Unreal engineによるリアルなキャラクターや、FacebookのVRミーティング、
Greeのメタバース事業への参加など、VRや3DCGが盛り上がる気配が見えてきたため、
一度真剣に3DCGやVRを勉強しようと思い、色々とやってみることにしました。
私の仕事はサイトやアプリの制作など、スマホやPCブラウザ上で動くものを作る機会が多いため、
まずはjavascriptで書けるWebGLという技術について学ぶことにしました。
THREE.jsなどのWebGLをサポートするライブラリもあるようですが、
こういったツールは本質的な動作部分を隠して作られていたりするので、
どういった方法で3DCGとして表現されるのか、光や影はどう作られているのかなど、原理を学ぶのには不向きです。
そういったこともあって、今回はライブラリを使わずWebGLを学ぶことにしました。
そこで、どこかにわかりやすいチュートリアルのようなコンテンツはないかと探していたところ、良いサイトを見つけました。
https://developer.mozilla.org/ja/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL
丁寧に解説されているので、ここで手を動かしながらサンプルアプリケーションを作っていくことで、
3DCGがどのように表現されているのか、大体の仕組みを理解することができます。
ちなみに作ったアプリケーションは以下。
今までのweb制作に使う技術や考え方とは大きく違い、
数学のベクトルの考えが至るところに出てくるので、
勉強になるところが多くやってて楽しかったです。
チュートリアルを一通り学んだ後、
無料で提供されていた3Dモデルを拝借して、キャラクター作りもやってみました。
キャラクターは三角形の集まりで構成されているため、やっていることはチュートリアルとあまりかわりません。
チュートリアルのソースコードを少し変更し、応用するだけで作れてしまいました。
ここで勉強になったのは、3Dモデルの質を左右する要素が何か？という点です。
ヒトが物体を認識するのは反射した光が網膜に入ってくるからなのですが、
3Dモデルの光の反射を計算している部分の計算方法を変えたり、
3Dモデルのより多くの描画ポイントで計算を行うことで、
一昔前の格ゲーのようなポリゴン風キャラクターになったり、
逆に滑らかでリアルなキャラクターになったりします。
ただし、計算が複雑になり、多くの計算が必要になるほど計算機に負担をかけることになり、
リアルタイムな描写とは違うカクカクな動きになるわけですが、
最近は計算機の処理性能がどんどん向上しているため、今まで負担だった処理が負担ではなくなり、
Unreal engineなどに見られるような超リアルなキャラクターが描写できたりするわけですね。
チュートリアルだけでここまで勉強できたのは良かったと思います。
