▶▶▶ 【新型コロナウイルス】期間限定!
越境ECサイト構築で最大150万円キャッシュバック支援中

LaunchCartな日々

LaunchCartとともに歩む日々を綴った
ブログです

Three.jsを使ったWebGLでアウトラインだけの表示

テクニック

Three.jsを使ったWebGLでアウトラインだけの表示

WebGLを利用したサイトは導入のハードルの高さから決して多いとは言えませんが、
ECにおいても少しずつ利用されるサイトが増えているようです。

RIMOWA UNIQUE | Custom Luggage | RIMOWA

Konfiguriere dir jetzt deinen Backforce

WebGLによる3Dのコンテンツは臨場感が高く、
写真と比べた場合、いろいろな角度から見ることができ、
動画と比べた場合、ユーザーの意思で見る角度やアレンジができることから、
うまく利用すれば、ECサイトにおいても高い効果が得られることは間違いありません。

ただ、利用どころが難しいというのは、否めません。

今回、ECサイトでもっと手軽な感じでWebGLを利用した方法はないか考えていたところ、
予約商品などでシルエットだけ表示されていたりすることがありますが、
それを3Dでやってみたら楽しみ感が出ていいかもしれないと思いいたりました。

ただ、普通のシルエットだと、いまいち特別感がないので、輪郭だけが浮かび上がったような表現ができたら面白いかもしれないと思い、試しに作ってみることにしました。

↓作ってみたもの
DEMO

方法

基本的にThree.jsを使いますが、重要なポイントはWebGLを直接的に操作します。

  1. カメラと、ステンシル用および通常用のシーンを生成し、Three.jsのローダーで3Dオブジェクトを読み込む
  2. 読み込んだオブジェクトをクローンして、クローンしたオブジェクトをTHREE.ShaderMaterialのvertexShaderで一回り大きくする
  3. THREE.WebGLRendererでレンダラーを用意し、.setClearColor()で背景を透過にして、.autoClearをfalseに設定して、任意のタイミングで.clear()を実行するようにする
  4. 大きくしていない方のオブジェクトでステンシルバッファーを設定し、その設定をもとに一回り大きくしたオブジェクトを型抜きしたような状態で描画

今回の方法では、一回り大きくしたオブジェクトをステンシルバッファーを利用して型抜きにします。

基本的な方法は以下のサイトを参考にさせていただきました。

wgld.org | WebGL: ステンシルバッファでアウトライン

 

1.  カメラと、ステンシル用および通常用のシーンを生成し、Three.jsのローダーで3Dオブジェクトを読み込む

2. 読み込んだオブジェクトをクローンして、クローンしたオブジェクトをTHREE.ShaderMaterialのvertexShaderで一回り大きくする

3. THREE.WebGLRendererでレンダラーを用意し、.setClearColor()で背景を透過にして、.autoClearをfalseに設定して、任意のタイミングで.clear()を実行するようにする

レンダラーの.autoClearをfalseにするところが実は重要で、私はここでハマりました。
この部分は以下のサイトを参考にさせていただきました。

[Three.js][WebGL] DepthBufferを共有して選択オブジェクト以外にブラーをかけてみる – Qiita

4. 大きくしていない方のオブジェクトでステンシルバッファーを設定し、その設定をもとに一回り大きくしたオブジェクトを型抜きしたような状態で描画

これで、アウトラインだけを描画することができました。

ステンシルバッファーを利用すると、様々な表現を混在させることができるので、
表現の幅が広がります。
いろいろな効果を試してみたいです。

Script部分全文

 

 


 

余談ですが、最近はWebGLを使ったサイトで、3Dではなく、GPUの特性を生かした水面のようなリアルな効果を生み出す手段としても、使われる機会が増えているようです。

Bruno Arizio — Interactive Designer

 

 

この記事を書いた人
Ninomiyaのアイコン

Ninomiya

Webデザイナー兼コーダーです。 イラストを描くのも好きです。 SVGとCanvasを使ったWEBアプリにも興味があります。 よろしくお願いいたします。

資料ダウンロード

送信いただいたメールアドレス宛に、資料のダウンロードURLを送付いたします。