うつくしいボケを表現した高品質なビジュアルがかっこいい 3D Web Lab のウェブサイト

doxas : 2025-01-28 12:14:45

質感高くボケを表現

今回ご紹介するのは 3D Web Lab というなんとも主語の大きな名前を持つ組織のウェブサイトです。

どうやら 3D とクラウドコンピューティングを組み合わせたような事業を展開している企業で、本拠地はベルギーにあるみたいですね。

今回のサイトではその社名にぴったりの印象を持つ、ボケの描画が美しい CG を見ることができます。

今回のサイトの説明をする前に、ぼかしとボケの違いについて簡単に言及しておこうと思います。

CSS のブラーフィルターに代表されるような、いわゆる「ぼかし」と、今回のサイトでモチーフとなっている写真や映像などで現れる「ボケ」は、語感こそ似ていますが概念としては全然違うものです。

たとえば、物理的なレンズを通して撮影する写真や映像では、フォーカスを外したりすることで大きなボケ（玉ボケとも呼ばれる）が出ますが、これは画面をブレさせて滲ませるブラー（Blur）とは全然違うものだということは、誰しも想像できると思います。

今回のサイトで登場するエフェクトは「ボケ」を表現している例であり、WebGL の実装でボケを扱っているのは結構珍しいと思います。

いわゆるボケの効果に加えて、さらにブラーなども同時に組み合わされており、描画負荷は比較的高めなんじゃないかなと思います。

まるでアウトフォーカスにした映像のように、画面全体に玉ボケのような美しいボケたシルエットが浮かび上がっています。

一部の下層ページなどでは、ボケをあえて適用せずにそのまま CG を描画しているようなシーンもあり、そのあたりは意識して使い分けがされているように見受けられます。

いわゆる「ボケ」の効果って、自分で実装したことがないですが想像するに結構描画するの大変なタイプのエフェクトだと思うんですよね。どうやっても、マルチパスになっちゃいそうな気がしますし……

今回のサイトのボケの効果は非常に自然な仕上がりになっていて、見た目がすごくいいですね。

そこにさらに、上から CSS でぼかすような処理を施している部分もあったりして、かなりビジュアルにこだわって作り込まれている感じがします。

これまでの WebGL の実装のなかに、ボケを扱った事例がまったくなかったというわけではないのですが、比較的難易度が高い実装に分類されること、また描画負荷が比較的高くなることなどからあまり事例としては見かけない気がします。

今回のケースのような、どこか抽象的な雰囲気で絵作りをしたいという状況であれば、ボケのような効果ってすごく印象的で見事にマッチしていますね。

ここでは掲載していませんが、各種下層ページの作りやそこに遷移するトランジションなども丁寧に作られています。