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

WebGLに触れてみませんか

11agate

はじめに

どうも、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

WebGL勉強中

この記事をシェア

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

関連する記事

2019年12月11日
円周率が無理数であることの証明【AdC2019 42日目】
Tarara
2019年12月11日
ぷよぷよってナンですか?【AdC2019 42日目】
arahi10
2019年12月10日
ブログ投稿ツイートを無理やり自動化した話【AdC2019 41日目】
xecua
2019年12月10日
理工系科目英語クラスについて【AdC2019 41日目】
kano
2019年12月9日
大学生活を豊かにする自己管理ツール集【AdC2019 40日目】
Deka
2019年12月8日
ハッカソンに参加して素材を作った話
NABE

活動の紹介

カテゴリ

タグ