feature image

2019年11月25日 | ブログ記事

WebGLに触れてみませんか

はじめに

どうも、19の11agateです。突然ですが、最近Web上のコンテンツなどで、インタラクティブという言葉をよく耳にします(しますよね?)
こんな意味だそうです

「対話」または「双方向」といった意味で、ユーザーがパソコンの画面を見ながら、対話をするような形式で操作する形態を指す。具体的には、コンピューターからの画像や音声によるメッセージに対して、ユーザーがマウスやキーボードを入力して操作を進めていく。ユーザーが積極的に参加できるため、コンピューターを利用した学習教材にも使われる。 コトバンク

そう…って感じだと思うので実例を見てみましょう

なんとなくイメージは掴めたのではないでしょうか?動作が体感できてとても面白いですよね
こんな感じのブラウザ上の3Dコンテンツはどうやって動いてて、どうやったら自分でも作れるのかみたいなことを話していきたいと思います

WebGLって?

WebGLとは

WebGL は、ウェブブラウザ上で OpenGL ES 相当の描画処理を行うことができる低レベル API で、GPU を利用した高速で強力な描画性能をウェブにもたらします。

OpenGLというのはざっくり言えばグラフィックスの高速描画に使うハードウェアのAPIです
それがインターネットブラウザでできるようになったのがHTML5とWebGLというわけです
このような技術によって上記のサイトは動いています。
学習コストは正直高いです。そこでもっと簡単に触れられるツールを紹介します

Three.jsとは

https://threejs.org/
ぜひ上のリンクで飛んで色々触れてみてください!
three.jsは見た通りjavascriptのライブラリの一つでWebサイトの一部として3Dコンテンツを表現できます。WebGLの登場で可能になりました
実は上記の三つのサイトは全てthree.jsで実現されています
19Bで3Qに図形科学を履修していた人は先生がちょっと触れていたので聞き覚えがあるかもしれません。GLSLのような高レベルライブラリよりも簡単に複雑な3Dアニメーションをブラウザで表示できるのが魅力の一つです
ちょっと触ってみましょう

実践

次のサンプルで実際に見ていきましょう

See the Pen rotating_NormalMaterialCube by 11agate (@11agate) on CodePen.

自身の環境でコピーして遊んでみてください
ライブラリのソースにはCDNのURLを用いたので手軽にいじれます
ここのサイトがチュートリアルとしてはかなり分かりやすいと思います
sceneと呼ばれる空間のようなものに作ったカメラ、オブジェクトを追加し、canvasにrendering(描画)します。 ここでのオブジェクトであるboxはgeometry(形状)とmesh(表面の処理)を引数に取る必要があります
色々語ると長くなるので割愛しますが書き方が若干違えど上のサイトとやってることは同じです

おすすめライブラリ紹介

ゲームやアプリを作りたい!ってなったときに生のテクスチャやメッシュをいじるのは大変ですし、UIや動作のデザインに集中しにくいです
そこで流行りのライブラリを紹介します

React-three-fiber

チュートリアル
demoを見てるだけでもワクワクしますね
threeのライブラリは色々ありますがReactが特に熱い印象です
コンポーネントをシーングラフに変換してくれて、識別しやすく複雑なものを作るのに強いです
vueやangularにも同様のライブラリがあるのでreactに慣れてない人はそちらもどうぞ
vue-3d-model glTFに対応してます
vue-gl

A-Frame

VR体験フレームワークで、かなりとっつきやすそうな印象があります
Reactライクに開発できるライブラリも出ていますこちら
他にもWebVRコンテンツが作れるReact 360というのもあります
VR上のUIを設計でき、インタラクティブなアプリケーション開発とかだったらこちらが強そうです(使った事ないけど)
シェーダー等を用いた複雑なエフェクトに重きをおいたコンテンツならばA-Frameに軍配が上がりそうです

終わりに

いかがですかね
創作意欲をガンガン駆り立てるような作品が並んでて自分も作ってみたいと思えたのではないでしょうか?
ハードルが高そうなイメージがあるかもしれませんが、まずは公式ドキュメントのdemoでいじって遊んでみるのもおすすめです
明日はshioyakiohさんの記事です、お楽しみに!

11agate icon
この記事を書いた人
11agate

WebGL勉強中

この記事をシェア

このエントリーをはてなブックマークに追加
共有

関連する記事

2019年12月21日
モデリングを始めてみたい君へ、MagicaVoxelのススメ
isak icon isak
2019年12月13日
ゲーム紹介「League of Legends」【AdC2019 44日目】
Yataka_ML icon Yataka_ML
2019年12月25日
TensorFlow.jsでwasmを使ってみるためにコントリビュートした【AdC2019 56日目】
sappi_red icon sappi_red
2019年12月25日
無料でDTM環境構築 電子音系編
liquid1224 icon liquid1224
2019年12月22日
部内製チャットサービス「traQ」UIのこれから 【AdC2019 53日目】
sigma icon sigma
2019年12月23日
無料でDTM環境構築 生音系編
kashiwade icon kashiwade
記事一覧 タグ一覧 Google アナリティクスについて