Agence F+

2006年創業のフランスのコミュニケーション／AI／開発スタジオ Agence F+ の自社ポートフォリオ。フランス語と英語の完全な静的サイト（Nuxt SSG）で、トップのタグラインは「Imaginer. Créer. Proposer.」。 3Dは特定のヒーローオブジェクトではなく、全ページの背後に敷かれるアンビエントなWebGLパーティクル場です。Three.js の Points / BufferGeometry によるパーティクルシステムを、uTime / uAspect / uAmp / uZoom / uPartMix と、ブランドカラー2色 uTeal（#5a8aa2）と uGold（#dbb057）をuniformに持つ ShaderMaterial で描いています。transparent、depthWrite:false、depthTest:false の加算系ブレンドです。 【参考になるポイント】 ・ブランドカラーがCSSではなくシェーダのuniformとしてコンパイルされている（new Color('#5a8aa2')、new Color('#dbb057') がそのまま出荷コードに入っている）。WebGL背景を汎用的に見せず「自社らしく」する、そのまま真似できる手法 ・.glb / .gltf / .hdr / .exr が1つも存在しない。3Dレイヤーが完全に手続き的なGPUパーティクルなので、配信するアセットが何もなく、丸ごと静的なJamstackビルドで成立している ・3Dは約564KBの1チャンク（WebGLRenderer 81、BufferGeometry 62、Points 40、ShaderMaterial 21、lenis 26、gsap 58）に隔離され、427KBのアプリチャンクとは分離されている。EffectComposer もそこに入っており、ポストプロセスが1パス走っている ・uPartMix という名前のuniformは、パーティクル場が2つの状態の間でモーフィングしていることを示している ・※受賞ノミネートのエージェンシーサイトでありながら、og:image も twitter:image も持っていない（twitter:card は summary_large_image を宣言済み）。X・Slack・LinkedInでのリンクプレビューがテキストのみになるという、示唆的な取りこぼし。当面のサムネイルはAwwwardsの投稿画像