タッチ操作可能です
WebGLサンプルギャラリー
3DCGをウェブブラウザで表示／WebGL表現
WebGL（ウェブジーエル）は、ウェブブラウザで3DCGを表示させるための標準仕様です。特別なプラグインなしで、3DCGを表示できます。HTML5のAPIの1つで、近年利用が進むウェブ表現となっています。
r.c.o.では、WebGLを用いた新しい表現の研究開発を行っており、クライアントワークとしても実装経験があります。ここでは、WebGLを用いた新しい表現をサンプルとして紹介します。
Particle 1
シェーダーを用いたパーティクルの描画。3万個を同時に描画していますが、スマートフォンでも快適に閲覧できます。パソコンではマウスのドラッグやホイール操作、スマートフォンではピンチやフリック操作で回転・拡大操作可能。
Particle 2
WebGLを扱いやすくしてくれるJavaScriptのライブラリー「three.js」を用いたパーティクル表現。中央に向かって光の粒が吸収されていくようなアニメーションをつけています。パソコンではマウスのドラッグやホイール操作、スマートフォンではピンチやフリック操作で回転・拡大操作可能。
Particle3
Three.jsベースのパーティクル表現。一定時間で特定の形にFIXした後、散開というアニメーションを繰り返します。このサンプルでは、特定の形を3DCGデータの頂点情報を配列化して取り込んでいます。
Sprite
スプライト画像を使用した、アニメーションの表現。画像の座標位置を連続的に切り替えることで、アニメーションさせる手法です。
Earth
地球のテクスチャを張り込んだSphereを表示した上で、緯度経度情報も与えています。クリックすると、該当する位置にあわせて情報を表示できる仕組みです。
Data Select
パネル操作で各オブジェクトの見た目を変更可能。また、サインイン（Firebase）することで、その見た目を保存したりシェアしたりできるように。オブジェクトやテクスチャを用意することでさまざまな商品シミュレーターとして活用できます。
Object1
Three.jsを用いた3Dオブジェクトの回転デモ。マウス操作に連動して、背景の色や画像の位置が変わります。
Object2
babylon.jsを用いた3Dオブジェクトの回転デモ。ペダルをクリックするとペダルが回転す。ディスプレイをクリックすると正面位置にカメラが移動。クリック／タップでのインタラクションを実現しています。光沢や映り込みの表現も実装されているサンプルです。
VR Tour
babylon.jsを用いたVR空間のサンプルです。日本全国の3D都市モデルを整備するオープンデータ化プロジェクト「PLATEAU」から、新宿の3D都市モデルを利用。街の様々な場所に点在する四角錐をクリックすると、その地点へ移動します。そのほか、MAP VIEWやAREA SELECTなどのボタンを押すことでカメラの位置がスムースに移動します。