Image Image Image Image Image

デザイン・コーディング・動画・執筆ほか、各種制作業務を行うr.c.o.株式会社の企業サイトです。

2018年のテーマ

Life shrinks or expands in proportion to one’s courage.

Anaïs Nin

勇気の持ちようによって、人生は縮もするし、広がりもする。それは企業も同じです。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オブジェクトの回転デモ。マウス操作に連動して、ワイヤーフレームモデルが操作できます。