
Stuffed Dog Digital Marketing
WebGLを1行も使わずAwwwardsにノミネートされた例。3Dの正体は、WordPressプラグインでスクラブする事前レンダリングの連番画像。
- クレジット
- Stuffed Dog Digital, LLC.
- 使用技術
- WordPress / ElementorScrollsequence ProGSAP + ScrollTriggerCinema 4DAfter Effects※WebGL不使用
アメリカのマーケティング/ブランディング会社のサイト。構造としてはごく普通のWordPress+Elementorで、Hello Elementorテーマ、WPForms、Jetpack といった構成です。
ここで重要なのは、「3D」がWebGLではないということ。配信されるHTMLを THREE / WebGLRenderer / webgl / getContext('webgl') / spline / model-viewer のいずれで検索してもヒットは0件です。実体は Scrollsequence Pro というプラグインが、事前レンダリングした3Dの連番画像を2Dキャンバスにスクラブ再生しているもの。3D自体は Cinema 4D と After Effects でオフライン制作されています(Awwwardsのタグによる)。
このディレクトリでは3Dサイトとして並んでいますが、実装アプローチは他と根本的に違います。そして、それを承知で見ると学べることの多いサイトです。
【参考になるポイント】
・仕組みは .scrollsequence-wrap → .scrollsequence-sticky → <canvas class="scrollsequence-canvas"> という、古典的なsticky-canvas連番画像パターン。プラグインが自前のGSAP 3.8.0とScrollTriggerを同梱している
・スクロール量がインラインスタイルに明示されている:height: calc(100vh + 3550px) と calc(100vh + 3500px)。ひとつのシーケンスに約3,500px分の移動距離を割り当てている
・エンジニアリングチームを持たない会社が、既製プラグインと良質なC4Dワークだけでawwwardsノミネートまで到達している。「リアルタイム3Dでなければ評価されない」わけではないという実例
・連番画像はJSが実行時に注入するため、HTMLからはフレーム数もURLも静的には分からない
・※Cinema 4D / After Effects はAwwwardsのタグによる情報で、配信アセットからの確認はできていない
