Image Image Image Image Image

フロントエンド開発、デザイン、動画制作、編集・執筆ほか、各種制作業務を行うr.c.o.株式会社の企業サイトです。

2019年のテーマ

Anyone who has never made a mistake has never tried anything new.

Albert Einstein

成功した人になるのは難しいことですが、失敗しない人になるのは簡単です。「一度も失敗をしたことがない」という人は、「何も新しいことに挑戦したことがない人」にすぎません。しかし、社会には、ビジネスにはイノベーションが求められています。
2019年の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」を用いたパーティクル表現。中央に向かって光の粒が吸収されていくようなアニメーションをつけています。パソコンではマウスのドラッグやホイール操作、スマートフォンではピンチやフリック操作で回転・拡大操作可能。

Sprite

スプライト画像を使用した、アニメーションの表現。画像の座標位置を連続的に切り替えることで、アニメーションさせる手法です。

Object1

Three.jsを用いた3Dオブジェクトの回転デモ。マウス操作に連動して、背景の色や画像の位置が変わります。

Building view

Three.jsを用いた3Dオブジェクトの回転デモ。マウス操作に連動して、ワイヤーフレームモデルが操作できます。

Data Select

パネル操作で各オブジェクトの見た目を変更可能。また、サインイン(Firebase)することで、その見た目を保存したりシェアしたりできるように。オブジェクトやテクスチャを用意することでさまざまな商品シミュレーターとして活用できます。