Image Image Image Image Image

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

2017年のテーマ

「変化はコントロールできない。できることは、その先頭に立つことだけである」

ピーター・ドラッカー

トランプ現象、Brexit…。世界は新たな局面を迎えようとしています。ビジネスの世界も同様です。ウェブの世界も、メディアの世界も、コンテンツの世界も同様です。当社も、新たな局面を迎える年になるでしょう。変化を恐れず、機会ととらえて、新たな考え方や技術に取り組み続けたいと思います。

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

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