Van Lent

アムステルダムのクリエイティブデベロッパー Tim van Lent の個人ポートフォリオ。DOOH広告ネットワークのサイト、光学・投影機器メーカーのコーポレートサイトなど、クライアントワークをデバイスモックアップの動画で見せていく構成です。 3Dはモデルビューアではありません。ポイントスプライトの群れがカールノイズで流れ、sphereRandom / sphereGraticule / sphereRings / sphereGalaxy / galaxyCore / blob といった名前の付いた形状の間をモーフィングし、ポインタに押し退けられる、完全に自作のGPUパーティクルシステムです。サイト内に .glb も .gltf も .hdr も存在しません。 【参考になるポイント】 ・Three.js は r180 がNextのバンドルに同梱されている（CDN読み込みではない）。3Dレイヤー全体が約440KBの1チャンクに収まっている ・シェーダのuniform名がそのままアートディレクションの操作盤になっている：uCurlFrequency、uCurlNoiseAmount、uTurbulenceTangential、uMouseInfluence、uMouseRadius、uShapeType、uWobbleTypeFrom / uWobbleTypeTo / uWobbleBlend、uDustVisibility、uSoftSprites、uRimIntensity など ・形の切り替えはジオメトリの差し替えではなく、uWobbleTypeFrom と uWobbleTypeTo を uWobbleBlend で補間するだけ。float 1つのアニメーションで済む ・uThemeLight と uIsMobile というuniformを持ち、ライト／ダークモードとモバイル向けの間引きをシェーダの中で処理している。シーンを作り分けていない ・Awwwards の「Three.js」タグは、このサイトの場合モデル読み込みではなくシェーダ仕事を意味している