Three.jsとはWebで3D表現を行うWebGLのJavaScriptライブラリです
Three.jsの本が出てたのでその勉強メモです
ちなみに買った本はこれです、2013年10月出版とまだ新しいっ！
始めに書いた雛形ソースをいじって最終章まで使い回せたので読みやすかったです。
Unityもblenderも3D用語や考え方は共通なので、3Dを勉強するためにいいです
目次1. Chromeの設定
2. Three.jsのレンダリングについて
3. 3Dの用語集
1. Chromeの設定three.js のサンプルをDLしてさぁ実行！っとした時、以下のようなエラーが出るかと思います。
Webサーバ用意するのも手間なので、セキュリティーポリシーを外したChromeアイコンを作りました。
以下のサイトを参考に設定しました。
【小ネタ】Chromeのローカルセキュリティポリシーの回避
2. Three.jsのレンダリングについてThree.jsのレンダリング方式って実は5つあり選べます。
（１）WebGLRenderer
（２）CanvasRenderer
（３）SVGRenderer
（４）SoftwareRenderer
（５）CSS3DRenderer
コードの中で以下のように指定します
・WebGLRendererの場合
var renderer = new THREE.WebGLRenderer();
・CanvasRendererの場合
var renderer = new THREE.CanvasRenderer();
基本的にはWebGLRendererを使います。
CanvasRendererはCanvas2Dに3Dを表現できWebGLRendererと同じ事ができます。
ただし、WebGLRendererより実行速度は遅いです...
当然スマホでもCanvasRendererなら表示可能でした
簡単なアニメーションならFPSもWebGLRendererと変わりませんでした。
あたかもWebGLRendererと同じ動きをするようにthree.jsが裏で色々やってくれます。
Three.jsで定義されているクラスも一部を除いて両方サポートされてます。
※ パーティクル系はWebGLRenderer専用
他3つはまだ発展途上でサポートされてないクラスが多々あります。
まだ覚えなくてもいいと思います
まだ覚えなくてもいいと思います
3. 3Dの用語集以下は、メモしとかないと覚えない3D用語達。
アンチエイリアス
物体の輪郭と背景の色を混ぜ合わせる事でエッジを滑らかにすること
レンダラー
与えられたデータに対して規則で他の形式に変更するソフトウェアのこと
透視投影
視点から手前の物体を大きく、遠くの物体を小さく描画する方法
オイラー角
オイラー角
仮想空間内の3次元オブジェクトの傾きを表す
環境光源
3次元に均等に照らす光源のこと。
環境光源を設定すると光が当たっていない面も明るくすることができる
クォータニオン
4次元ベクトル。物体の回転系つまりRotateの事を表す。
オイラー角の回転は「オブジェクト名.rotation.set(x,y,z);」であるが
クォータニオンの回転はオイラー角より複雑で書くのが大変。
クォータニオンの回転はオイラー角より複雑で書くのが大変。
複雑な制御をしたい場合はクォータニオンを使い、簡単な制御ならオイラー角を使う
グロー効果
明るい部分がぼんやり発光するような効果
シェーディング
立体感を出す手法のこと。
フラットシェーディングとスムースシェーディングがあり滑らか具合が違う
正投影
視点の距離によらず描画する方法
ドローコール
描画の呼び出し回数。これが多いと負荷が増大する
点光源
全方位に光を発する光源
半球光源
three.js独自の特殊な光源。
空から降り注ぐ太陽光と地面からの照り返し効果を得られる
フォン反射材質
コート紙のように表面のテカリあたる材質。ランバート反射の拡張版。
ランバート反射材質の拡張色に加えて物体の表面による鏡面反射する光もある
法線
曲線上の一点において、その点での接戦に垂直な曲線
モーションブラー
動くものをカメラで撮影したときに生じるブレや残像。
これがないと不自然な人工的な映像になる
ランバート反射材質
マッド紙のように表面がざらつく材質。
入射光に対して物体表面の色の見え方を決定するモデル
LOD(レベルオブディディール)
カメラ位置からの距離に応じてオブジェクトのディティールを制御する概念
シェーダー
大まかに言うと頂点シェーダーとピクセルシェーダーがある。
頂点シェーダーは3Dモデルを描画する1つ1つの点を計算し、
ピクセルシェーダーで頂点で結ばれた三角形にテクスチャを割り当てる
行列とか難しい概念は、理解できたらかいていきまーす