Image Image Image Image Image

フロントエンド開発、デザイン、動画制作、施設体験コンテンツ、アプリ開発、編集・執筆など、各種制作業務を行うr.c.o.株式会社の企業サイトです。

2020年のテーマ

If you think you can, or you think you can’t, you’re right.

Henry Ford

シンプルですが「できる」と思えばできる。「できない」と思えば何もできない。2020年という現在は、いままでにないほど変化が激しく、先行きが不透明な時代であると感じられます。まさに、世界は「過渡期」にある。そのなかでは、未来を予測するのは大変難しい。しかし、未来がわからないからと何もしなければ、寂しくつまらない結果しかありません。未来がわからないからこそ、新しいことに挑戦する。できると信じて、やり遂げる。2020年もr.c.o.は、失敗を恐れず、新たな分野への研究も惜しまず、さまざまなデジタル表現に挑戦し、実装していきます。

Scroll to Top

To Top

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オブジェクトの回転デモ。ペダルをクリックするとペダルが回転す。ディスプレイをクリックすると正面位置にカメラが移動。クリック/タップでのインタラクションを実現しています。光沢や映り込みの表現も実装されているサンプルです。

tour3

VR Tour

babylon.jsを用いたVR空間のサンプルです。日本全国の3D都市モデルを整備するオープンデータ化プロジェクト「PLATEAU」から、新宿の3D都市モデルを利用。街の様々な場所に点在する四角錐をクリックすると、その地点へ移動します。そのほか、MAP VIEWやAREA SELECTなどのボタンを押すことでカメラの位置がスムースに移動します。