WebGL と CSS とをバランス良く組み合わせた立体表現がおもしろい EngineShop のウェブサイト

doxas : 2022-02-24 13:55:12

やや CPU 寄りな表現かも

今回ご紹介するのは、いわゆる広告代理店に該当するのかなと思うのですが、EngineShop というエージェンシーのウェブサイトです。

WebGL を利用して描かれる背景部分と、手前に表示される DOM で構築されたレイヤー部分と、それぞれに様々な仕込みのされた面白いウェブサイトですね。

表現を WebGL に頼りすぎておらず、CSS をうまく活用した表現がいくつも見受けられます。その分、やや CPU 負荷が高い実装と言えるかもしれません。

今回のサイトでは、WebGL は背景部分を表現する係の人という感じの使われ方をしています。

マスの目状のグリッドが描かれたやや暗い色使いの背景をベースに、カーソルの位置に軌跡が残るようなエフェクトが掛かるようになっています。

手前のレイヤーの、画面中央あたりにある文字が傾いているように見えると思いますが、これは WebGL でポリゴンやジオメトリを制御しているのではなく、CSS を使った transform ですね。

スクリーンショットではちょっと見えにくいのですが……

背景に表示されるグリッドは、サイトが表示されたばかりのときやカーソルを動かしているだけのときは、完全に水平・垂直なラインが交差している状態ですが、これがスクロール操作を行うとそれに連動して変形するようになっています。

まるでカメラの周囲の空間全体が歪んでいるかのような雰囲気が演出されていて、なんとも迫力があります。

スクリーンショットではわかりにくいが、背景のグリッドがスクロールに応じて歪むようになっている。

また、今回のサイトの場合は表現が WebGL 頼みではなく、CSS を中心とした表現が多く見られるのも特徴の１つだと思います。

トップページの冒頭にあるタイトル文字がカーソルに位置に応じて傾いて動くのもそうですが、ぐいぐいスクロールしていくと出てくる事例紹介のセクションでも CSS が活用されています。

画面の上下、端に近い部分の文字が斜めに傾いたようになる表現は WebGL っぽく見えるかもしれないですが、これも CSS ですね。

WebGL はあくまでも背景の演出にのみ専念し、それ以外の表現が CSS ベースで構築されています。それ自体は珍しくないというか、まあ普通はだいたいこういう構成になることが多いと思うのですよね。

今回のサイトの面白いところというか個性的な部分としては、WebGL を使わずにあえて CSS で 3D 表現をしているというところですね。

CSS だけを使うわけでもなく、WebGL だけに頼るわけでもなく、しかし表現のベースとして立体感のあるビジュアルを中心に据えているというのがなんとも面白いなと個人的には感じました。