ブラーを活用して奥行き感を強調した独特なビジュアルがおもしろい WyrVox のウェブサイト
荘厳な雰囲気とそれにマッチしたスタイリング
今回ご紹介するのは WyrVox という組織のウェブサイトです。
書かれていることを見るとどうやらウェブ制作やブランディングを行うクリエイティブスタジオみたいな組織なのかなと思いますが、BGM も含めて荘厳な雰囲気です。
ブラーを活用した表現が行われており、ちょっと変わった雰囲気をまとっています。
リンク：
フレームワークの性質なのかすこしカクつく
今回のサイト、もしかしたらわたしの環境のせいなのかもしれないし、使われているフレームワークのせいなのかもしれないし判然としませんが、若干描画がもたつく場合があります。
勝手な想像では、いわゆるコンポーネントを組み合わせる形でウェブサイトが構築されていて、そのコンポーネントがビューポート内に入ってくるたびに初期化フローが走っているのではないかなという気がします。
こういうところは、ウェブ制作と WebGL 実装の難しい部分だなと思います。
サイトが表示された直後、まず最初に表示されるシーンは白っぽいレイヤーが上に重なっているようなコントラストの低いシーンから始まります。
カーソルを動かすと光源が動き、ロゴマークの影が動く様子がなんとも不思議な世界観を演出していますね。
画面内をクリックするとシーンが切り替わり、反転今度は黒を基調としたシーンに変化します。
黒い背景のシーンはスクロールすることでコンテンツが遷移していくオーソドックスなスタイルですが、途中のセクションでは 3D モデルが出てくる場面がいくつかあります。
冒頭で書いた、表示がもたつくような感じがあるのがちょっともったいないんですよね……
ただ表示されるシーンは手前と奥との双方にオブジェクトを配置しつつ、ブラーを上手に活用して絶妙な空気感を作っています。
レイマーチングを使っている場面なんかもあります
個人的な経験では、コンポーネントを組み合わせてウェブサイトを作るタイプのフレームワークだと、どうしても WebGL の初期化や描画プロセスとの折り合いをつけるのが難しくなります。
そのあたりの泥臭い足回りを自作するにはネイティブな WebGL の知識に近い領域の知見が必要となることも珍しくないので、解決するのが難しいこともあると思います。
今回のサイトの場合、ビジュアルや雰囲気の路線はすごく味わいがあって、だからこそ余計にもたつくような瞬間があったりするのはもったいないなと個人的には思ってしまいました。
気になる方はチェックしてみてください。
