Mathis Biabiany

スイス在住のフランス人クリエイティブテクノロジスト Mathis Biabiany の個人ポートフォリオ。Gobelins 出身で、アムステルダムのエージェンシー勤務と日本での長期滞在を経て、Cartier・Coca-Cola・Adidas といったブランド向けにリアルタイム3D、AR、Unity、プロジェクションマッピングを手掛けています。仕事は動画とシーン遷移で見せていく構成です。 本人が three.js フォーラムで書いている通り、レンダリングは WebGL ではなく WebGPU + TSL（Three.js Shading Language）。起動時にGPU性能チェックを走らせ、複数のGPUティアに応じて別々のアセットを読み込みます。シーンごとにアートディレクションが違い、オーラ表現を伴うセルシェーディングのものとメビウス調のものが同居します。テキストはDOMではなくGLレイヤー上の MSDF で描かれており、ズームや移動でも輪郭が崩れません。 【参考になるポイント】 ・WebGPU + TSL はアセット準備の都合で初回ローダーが長くなる。本人はレイジーロードと組み合わせてそこを詰めたと書いている ・フレームワークは Nuxt 4 の静的生成、CMS は Prismic。メディアは Prismic の帯域上限に当たるのを避けて Cloudflare R2 に逃がしている ・MSDFテキストをGLレイヤーで描く方式は、3Dシーンとタイポグラフィを同じカメラの下で扱いたいときの定石 ・※技術情報は本人の three.js フォーラム投稿が出典。バンドルの中身までは確認していない ・※Awwwards は2026年8月18日時点で Nominee（コミュニティ投票中）