Blog

【WebGL】Three.jsでガラスのような表現

nino-eye2

Three.jsではCubeCameraという環境マッピング(対象オブジェクトに背景を反映させるためのマッピング)用のテクスチャ画像を生成するためのカメラが用意されていますが、
こちらを活用することで、様々なリアルな表現が可能になります。

今回はその中で、ガラスのような表現に挑戦してみました。

↓作ってみたもの
DEMO

仕組み・方法

仕組み

ガラスでは、向こう側の景色が屈折して映り、表面は反対側の景色が反射して映っています。

glass-ball-1146900-639x426

Three.jsのcubeCameraではこの表現に必要な屈折と反射の両方が用意されているため、
マテリアルにそれを反映することで、ガラスのような表現が可能となります。

方法

屈折を反映させた球体と、反射を反映させた球体を重ねて表示することで、
ガラスのような球体を表現しました。

cubeCameraはdefaultの状態では反射マッピングとなっているため、
1つ目の屈折の球体に反映させるcubeCameraには、以下の指定で、屈折マッピングを適用します。

屈折率は0.75くらいがガラス球っぽくなります。

以下が、DEMOの全コードです。

参考図書

three.jsによるHTML5 3Dグラフィックス 下―ブラウザで実現するOpenGL(WebGL)の世界 遠藤 理平著 2014/1

参考デモ

Refraction (Three.js)

 

Author Profile

ninomiya
ninomiya
Webデザイナー兼コーダーです。 イラストを描くのも好きです。 SVGとCanvasを使ったWEBアプリにも興味があります。 よろしくお願いいたします。
» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ