Aristide Benoist

モーションとインタラクションを専門とする独立系デベロッパー Aristide Benoist のポートフォリオ。ジャズドラマーからの転身で、独学およそ3年で Awwwards Independent Developer of the Year 2017 を受賞した人物です。 本人は「できる限りライブラリを避ける。自分でやってみるのが一番学べるから」と語っており、現在のサイトはその実践そのもの。バンドルを調べると createShader / shaderSource / useProgram / drawElements を直接呼び、gl_FragColor を含む一方で、THREE や WebGLRenderer、BufferGeometry、ShaderMaterial といったThree.jsの痕跡は一切ありません。ライブラリなしの生WebGLです。 【参考になるポイント】 ・デスクトップ版のJSバンドルが約70KB。Three.js製の同種ポートフォリオ（1.2MB前後）と比べると、3Dライブラリのコストが具体的な数字で見える ・デスクトップ用とモバイル用のビルドを完全に分けている。インラインの起動スクリプトがUA判定（iPad対策の MacIntel ＋ maxTouchPoints > 1 も含む）を行い、d.css/d.js か m.css/m.js を注入する。モバイルはデスクトップ専用のシェーダコードを一切ダウンロードしない ・その起動スクリプトがグローバル _A に背景色を #141414 と [0.07843, 0.07843, 0.07843] の両方で持っている。後者は gl.clearColor() やシェーダのuniformがそのまま受け取れる正規化値で、CSS背景とGLのクリアカラーが実行時変換なしで一致する ・gsap も TweenMax も入っていない。評価の高いモーションは自前のトゥイーンとrAFループで書かれている ・※Awwwards の2017年のエントリーは旧バージョンのサイトについてのもので、当時のクレジット（Three.js等）は現行ビルドには当てはまらない