🎡glTFのチートシート

あたり帳簿

2021年1月3日 07:13

ここのチートシートが３D入門によさそうなので左上から見ていく

１－１　コンセプト

一番上が「シーン」でその下に「ノード」があり、ノードはカメラ、メッシュ（ジオメトリ）、スキンからなる。メッシュはさらにマテリアル（テクスチャ）とアクセサ（バッファ）を持つ。

長年のもやもやしたものがすっきりしてきた。

１－２　M=TRS

ノードごとにマトリクスがあってその計算をする式としてはマトリクス＝Translation x rotation x scaleとなっている。

１－３　メッシュ（ジオメトリ）

Three.jsではメッシュとジオメトリは別の概念である、オブジェクトになっている。

１－４バッファ（アクセサ）

頂点バッファなどを想定

１－５　マテリアルとPBR テクスチャ

材質の意味のマテリアルである。色にしろ柄にしろはたまた反射具合にしろマテリアルが癒着している。

https://academy.substance3d.com/courses/the-pbr-guide-part-2

２－１　カメラ

二種類ある

透視投影（とうしとうえい、英: perspective projection）は3次元物体を2次元平面に描画する図法（投影法）の一種である[1]。中心投影ともいう[2]。視点を設定して投影図を得るため、対象物を目で見た像と近い表現が得られるという特徴をもつ[3]。透視投影で得られた図は「透視図」あるいは英語の perspectiveから「パース」などと呼ばれる。

正投影図（せいとうえいず）とは、3次元の物体を2次元で表現する手法の一つ。対象を90度ごとに回転させるか、または視点を90度ずつ回転させて、複数の視点から描画された図

２－２　スキン

皮肌という意味ではなく、いわゆるボーンやらリグやらいうスケルタルアニメーション一般の概念をここでつかさどっている。名前からテクスチャとは似て非なるものなので注意が必要だ。

２－３　スキンの計算

スケルトンの位置や関係性によって変化するのがスキンだ。。ここでもM=T*R*Sみたいな式が出てくる。もうちょい配列計算みたいなやつ。

２－４　アニメーション

アニメーション、は時間（延長）の概念だ。ベルクソンも言っている。ここではTranslation Rotation Weightでいろいろ動かすと言っている。特にWeightの仕組みで表情筋みたいなもんが動くと述べている。

２－５　glbについて最後解説

全体踏まえて、

かなり理解が深まった。上を踏まえて、各仕様をざっくりとだけとみていきたい。

glTFでは出てこなかったシェーダーという表現。

3DCGは様々な要素技術の集まりである。「物体」を三角形の集合で表現するモデリング、「動き」を計算するアニメーション・物理演算、「見た目」を生成するレンダリングなどである。その中でシェーダーはレンダリングの一部を担う。レンダリングは複数の段階からなるパイプライン（レンダリングパイプライン）で成っており、シェーダーはこのうちの「プログラム可能な部分」を意味する。例えば頂点シェーダーは頂点を入出力としてなんらかの処理を記述したものであり、例えばカメラを起点とする座標変換の記述に用いられる。

OpenGLは画面（フレームバッファ）に描画することを前提に設計されている。3DCGを描画できると言っても、オフラインレンダラー（POV-Rayなど）のようなレイトレーシング法は標準ではサポートされておらず、ポリゴンなどのプリミティブ形状をリアルタイムに順序をもってラスタライズ（画素化）して合成する事で3DCGを描画する。

これも描画後の表現なので、見なかったということになるはず。

WebGLは基本ガワなのでたいして留意点がない。

three.jsは、WebGLのAPIを簡略化するためのラッパである。

上記ふまえてサンプルソース読むと、ある程度読めてくる

<script>
   var camera, scene, renderer,
   geometry, material, mesh;
   init();
   animate();
   function init() {
       scene = new THREE.Scene();
       camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
       camera.position.z = 1000;
       geometry = new THREE.BoxGeometry( 200, 200, 200 );
       material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );
       mesh = new THREE.Mesh( geometry, material );
       scene.add( mesh );
       renderer = new THREE.WebGLRenderer();
       renderer.setSize( window.innerWidth, window.innerHeight );
       document.body.appendChild( renderer.domElement );
   }
   function animate() {
       requestAnimationFrame( animate );
       render();
   }
   function render() {
       mesh.rotation.x += 0.01;
       mesh.rotation.y += 0.02;
       renderer.render( scene, camera );
   }
</script>

ジオメトリとマテリアルを、メッシュとしてシーンにぶちこんだあと、レンダラをDOM上にきれいに構成する。animateはタイマー系の処理と一緒で、次のフレームの関数を宣言してrender関数を呼び出していて、そこでジオメトリとマテリアルからなるメッシュに対してローテーションをかけたうえで、メッシュが入っているシーンとカメラでレンダリングしなおして3dをお届けしている。

After the geometry and materials are put into the scene as a mesh, the renderer is neatly configured in the DOM. animate, like timer-based processing, declares a function for the next frame and calls the render function, where the mesh consisting of geometry and materials is rotated and rerendered in the scene and camera to deliver the 3d image. After rotation is applied, the scene and camera containing the mesh are re-rendered to deliver the 3d image.

WebGL をサポートするブラウザーでは、プラグインを使用することなく HTML canvas 内で 3D グラフィックスをレンダリングするための、OpenGL ES 2.0 に基づく API をウェブコンテンツで使用できます。WebGL のプログラムは JavaScript で記述する制御コードと、コンピュータの Graphics Processing Unit (GPU) で実行する特殊効果コード (シェーダーコード) で構成されます。WebGL 要素は他の HTML 要素と混ぜられ、他のページ部品やページの背景と合成されます。

ここもWEBGLの肉付けで、Three.jsで見てきたことと基本同じはず。もうちょい合成が楽しくできる可能性が見えてきた。

この一連の記事が WebGL 自体を紹介していることに注意してください。ただし THREE.js など、WebGL の機能をカプセル化する多くのフレームワークが利用でき、3D アプリケーションとゲームを簡単に構築することが可能です。

glTFのチートシートからthree.jsみたほうが理解しやすい箇所は多い

A-Frameは、開発者がHTMLを使用して3DおよびWebVRシーンを作成できるThree.js用のエンティティ・コンポーネント・システムフレームワークであり、Unityなどのエンジンで使用されている一般的なゲーム開発パターンを取り入れながら、Web開発者やデザイナーによく知られているオーサリングツールを提供する。

これもほぼ立ち位置がぶれなくなってきた。

ソースもいくつか見てみる、threeのVRのデモ

				renderer.xr.enabled = true;
				container.appendChild( renderer.domElement );
				document.body.appendChild( VRButton.createButton( renderer ) );
				// controllers
				controller1 = renderer.xr.getController( 0 );

とかで、レンダラとコントローラの関連付けを忘れずに行い。

			function render() {
				cleanIntersected();
				intersectObjects( controller1 );
				intersectObjects( controller2 );
				renderer.render( scene, camera );
			}

という感じで、レンダリングの際にコントローラの内容反映すれば、threeと基本そんなに変わった概念が出てくるものではないようだ。

p5はカメラ操作の入門はしやすそうだ。

3Dスケッチのカメラ位置を設定します。この関数のパラメータは、カメラの位置、スケッチの中心（カメラの向き）、上方向（カメラの向き）を定義します。この関数は、カメラの動きをシミュレートし、オブジェクトを様々な角度から見ることができます。オブジェクト自体を動かすのではなく、カメラを動かすことに注意してください。例えば、centerXの値が正の場合、カメラはスケッチの右側に回転しているので、オブジェクトは左側に移動しているように見えます。

大枠のゲームオブジェクトとかの概念が分かりづらかったが、グラフィックスのところはglTFのチートシートで学んだことが生きてくる。以下はueからの抜粋だが

UEはそのうえで考えると結構用語が独特な部分が多い。

Material は、シーンの視覚的な外観を制御するために、メッシュに適用することができるアセットです。概要として、マテリアルはオブジェクトに適用する「ペイント」として捉えるのがおそらく一番わかりやすいでしょう。ただし、この考え方は誤解につながる恐れがあります。マテリアルは文字通り、そこからオブジェクトが作成されたかのように見えるサーフェスのタイプを定義するものだからです。色、光沢の度合い、オブジェクトの透過可否などを定義することができます。

サーフェスも、一般的といえばそうだが、GlTFチートを通過した後だとすこし扱いに困る。メッシュとマテリアルの関係はここでも一緒なので、そこは安心する。

スケルタルメッシュアクタは、外部 3D モデリングプログラムでアニメートしてから Unreal Editor へインポートが可能な 3D モデルアセットです。スケルタルメッシュアクタは、メッシュ自体とスケルタル階層の 2 つの部分から構成されます。スケルタル階層のボーンは、3D モデリングプログラムで定義されたルールに従って変形させたメッシュで、アニメーションの作成に使用することができます。**コンテンツブラウザ**でスケルタルメッシュをアセットとしてインポートすることができます。

Ueにおいてはアクタ=ノードとみてよさそうだ。

このリポジトリ内のファイルは、以下のライセンスのいずれかに該当します：

SPDXライセンス識別子「Apache-2.0」

Apache ライセンス 2.0。

スクリプトとビルドツール。

SPDXライセンス識別子「CC-BY-4.0」

クリエイティブ・コモンズ表示 4.0 国際

glTF 2.0 AsciiDocソースなどの仕様ソースマークアップ文書用。これらのソースから構築されたglTF 2.0仕様のHTMLとPDF出力は批准され、Khronos glTF Registryで公開されます。

また、このLICENSEファイルのような雑多なメタ文書についても。

SPDXライセンス識別子：「LicenseRef-KhronosSpecCopyright」（ライセンス参照-クロノス仕様著作権

Khronos仕様の著作権。

glTF 1.0やKhronosエクステンションなどのMarkdownフォーマット仕様ファイルのためのもので、この形式でKhronos Board of Promotersによって批准されます。

SPDXライセンス識別子：「`LicenseRef-TBD」

To Be Determined copyright - 正確な著作権者とライセンス条件は現在不明。

glTFのベンダーによる拡張のみ。それぞれのケースで、これらのライセンスの完全な詳細を決定するために取り組んでいます。

これらのライセンスの完全なライセンステキストは以下で入手できます：

Apache-2.0: https://opensource.org/licenses/Apache-2.0

CC-BY-4.0: https://creativecommons.org/licenses/by/4.0/legalcode

LicenseRef-KhronosSpecCopyright: link:LICENSES/LicenseRef-KhronosSpecCopyright.txt

LicenseRef-TBD: link:LICENSES/LicenseRef-TBD.txt

お願い致します

🎡glTFのチートシート

１－１ コンセプト

１－２ M=T*R*S

１－３ メッシュ（ジオメトリ）