Oy Teaser
Web / Design, Develop (2021)
ライフスタイルブランド「Oy」のティザーサイトのデザインと実装を担当した。
「画面を傾けると水が流れ、ブランドのロゴが現れる」というコンセプトで制作を開始した。
スマートフォンのブラウザではジャイロセンサーを使うのが難しかったり、PCでは画面を傾けられなかったりという問題があったので、マウスや指で水の流れを作るようなインタラクションを採用した。
シンプルなサイトなので当初はPixiJSのみで実装しようとしたが、パフォーマンス上の問題があり、流体シュミレーション部分はThree.js、ポストエフェクトにPixiJSという構成を取っている。
Three.jsでオフスクリーンレンダリング(メモリ上にレンダリング)した流体のテクスチャとグラデーションの画像をPixiJSに渡し、グラデーションマッピングや各種フィルターを適用している。
水がある部分はロゴもぼやけて見えるようにしているが、これは流体のテクスチャをアルファマスクとして使い、PixiJSのBlurFilterで実現している。
Teck Stack
- Three.js /
- PixiJS