はじめに
どうも、19の11agateです。突然ですが、最近Web上のコンテンツなどで、インタラクティブという言葉をよく耳にします（しますよね？）
こんな意味だそうです
「対話」または「双方向」といった意味で、ユーザーがパソコンの画面を見ながら、対話をするような形式で操作する形態を指す。具体的には、コンピューターからの画像や音声によるメッセージに対して、ユーザーがマウスやキーボードを入力して操作を進めていく。ユーザーが積極的に参加できるため、コンピューターを利用した学習教材にも使われる。 コトバンク
そう…って感じだと思うので実例を見てみましょう
なんとなくイメージは掴めたのではないでしょうか？動作が体感できてとても面白いですよね
こんな感じのブラウザ上の３Dコンテンツはどうやって動いてて、どうやったら自分でも作れるのかみたいなことを話していきたいと思います
WebGLって？
WebGL は、ウェブブラウザ上で OpenGL ES 相当の描画処理を行うことができる低レベル API で、GPU を利用した高速で強力な描画性能をウェブにもたらします。
OpenGLというのはざっくり言えばグラフィックスの高速描画に使うハードウェアのAPIです
それがインターネットブラウザでできるようになったのがHTML5とWebGLというわけです
このような技術によって上記のサイトは動いています。
学習コストは正直高いです。そこでもっと簡単に触れられるツールを紹介します
Three.jsとは
https://threejs.org/
ぜひ上のリンクで飛んで色々触れてみてください！
three.jsは見た通りjavascriptのライブラリの一つでWebサイトの一部として３Dコンテンツを表現できます。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さんの記事です、お楽しみに！
