Border

Oy Teaser

Web / Design, Develop (2021)

ライフスタイルブランド「Oy」のティザーサイトのデザインと実装を担当した。

「画面を傾けると水が流れ、ブランドのロゴが現れる」というコンセプトで制作を開始した。
スマートフォンのブラウザではジャイロセンサーを使うのが難しかったり、PCでは画面を傾けられなかったりという問題があったので、マウスや指で水の流れを作るようなインタラクションを採用した。

シンプルなサイトなので当初はPixiJSのみで実装しようとしたが、パフォーマンス上の問題があり、流体シュミレーション部分はThree.js、ポストエフェクトにPixiJSという構成を取っている。
Three.jsでオフスクリーンレンダリング(メモリ上にレンダリング)した流体のテクスチャとグラデーションの画像をPixiJSに渡し、グラデーションマッピングや各種フィルターを適用している。

水がある部分はロゴもぼやけて見えるようにしているが、これは流体のテクスチャをアルファマスクとして使い、PixiJSのBlurFilterで実現している。

Teck Stack

  • Three.js /
  • PixiJS