Three.jsでBufferGeometryのサンプル


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

Three.jsやってみてる

  • BufferGeometryについて覚書
  • Three.jsのリビジョンはr85を使用



BufferGeometryってなんだろう


  • いろいろな配列(buffer)を中にいれて(addAttribute)、どんどん属性を追加していくことが可能なGeometry
  • よりWebGLに近い、描画を低レベルで扱えるものっぽい(その分書き方はちょっとむずかしくなる)
  • ただ、これを使えばもっと柔軟な描写が可能となるんだろなってのがあるからこれぐらいはマスターしておいたほうがいいかも
  • どうやらCPU側ではなくGPU側で管理するバッファリング処理に必要な知識らしい
  • 頂点データの数が増えまくる時はこれが必要になる、と
  • BufferGeometryを使うことでデータをGPUに渡すコストが削減できるらしい
  • 参考

  • 下記サンプルコードが読み解くのに良さそうなので読んで見る

  • 以下読んだメモ
    • new THREE.Vector3
      • three.js docs - Vector3
      • 3Dのベクトルを表現する関数
      • 単純には new THREE.Vector3(x座標, y座標, z座標) でベクトルを表す
      • var vertex = new THREE.Vector3(x, y, z)
        • vertex.length(); はベクトルの長さを表す
    • new THREE.Color
      • そのまんま、色を生成する。デフォルトは白で、Color(r, g, b)のようにRGBカラーで値が挿入される
      • setHex関数でhex(16進数)方式で色を与える
      • 与えると、RGBで表現される(おそらく、それぞれ r g b の範囲は 0~1)
    • addAttribute
      • attribute: 属性、という意味
      • つまり addAttributeは “属性を追加する” という意味
      • これは、BufferGeometryはデフォルトでは何も情報を持っていない(たぶん)頂点生成関数なので、頂点座標情報とか色の情報とかをどんどん追加していかないといけない
      • geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) ); のようにしてどんどん情報を追加していくこと
      • 指定可能なattributeの第一引数は色々あるみたい、どこかにまとめられてないのかな・・・
        • position
          • 頂点の位置座標
        • color
          • 頂点の色情報
        • size
          • 頂点ポリゴンのサイズ?
        • normal
          • 各頂点の面または頂点の法線ベクトルのx, y, z成分を格納する
        • uv
          • ????
    • 残りはちょっとわからなかったが、なくても動くのと後述するシンプルな三角形のサンプルなどでは無かったのでまぁひとまず保留
      • .computeBoundingSphere()
      • PointsMaterial
        • 特に今回のは点を表示させるため、PointsMaterialでsize指定してからじゃないと大きさのせいかライトのせいかうまく表示されなかった
        • 点を描画するためのMaterialらしい
        • BufferGeometryのマテリアルの指定としてはMeshNormalMaterialとかでもいいんだろうけど今回のだとうまく動かなかった
      • dynamicのところ
        • よくわからなかったので保留
        • ひとまずここもなくても動く
        • 物理シミュレートする時には何か必要なのだろうか



シンプルなコードにしてみる


本格的なコードを書くとなると、大元のWebGLの知識がどうしても必要になってしまう

wgld.org | サイトマップ |でとても詳しくWebGLについて説明されているので余力があるなら一読していったほうがよい

(特に最初のほうの、シェーダーとはとかポリゴンについてみたいなところとか基本的なところ)

といってもThree.jsで何か反映できないと楽しくなさそうなのでBufferGeometryを扱ってみる

公式のドキュメントを見ても所見だとこれだけで何が起こるかわかりずらかったので(慣れたらなんとなくわかるけど)

three.js docs - BufferGeometry

とりあえず下記コードをhtmlで保存すると動く(はず)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>BufferGeometry three.js</title>
<style>
html, body { margin: 0; padding: 0; overflow: hidden; }
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/86/three.min.js"></script>
<script>
// [three.js docs - BufferGeometry](https://threejs.org/docs/#api/core/BufferGeometry)
// THREE.WebGLRenderer 85
var renderer, scene, camera;
// renderer
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0xcccccc, 1.0);
document.body.appendChild(renderer.domElement);
// sceneの作成
scene = new THREE.Scene();
// cameraをposition(0, 0, 10)で作成
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.set(0, 0, 10);
// BufferGeometryの追加
geometry = new THREE.BufferGeometry();
// Floatの32bit(32ビット浮動小数値型)の配列に頂点情報を追加していく
// 三角形は頂点が3つあり、それぞれの頂点には位置情報として(x, y, z)座標を設定してやる必要があるので全部で数値が9つ必要
// ここの数値を変えると、三角形の形が変わる
var vertices = new Float32Array([
-1.0, -1.0, 1.0, // 1つ目の頂点座標
1.0, -1.0, 1.0, // 2つ目の頂点座標
1.0, 1.0, 1.0, // 3つ目の頂点座標
]);
// addAttribute関数でBufferGeometryに情報を追加していく
// 今回は頂点の位置情報のみなので 'position' を指定
geometry.addAttribute('position', new THREE.BufferAttribute(vertices, 3) );
// 今回はマテリアルはMeshBasicMaterialを指定、もちろんMeshNormalMaterial()などでも良い
var material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
// THREE.Meshにgeometryとmaterialを読み込ませる
var mesh = new THREE.Mesh( geometry, material );
scene.add(mesh);
renderer.render(scene, camera);
</script>
</body>
</html>

結果は、下記のように背景色が(0xcccccc)でシンプルな赤い三角形が表示される


これでシンプルな三角形が表示された

あとは公式のdocumentだとverticesに指定した値が下記のように

全部で18個あって

1
2
3
4
5
6
7
8
9
var vertices = new Float32Array( [
-1.0, -1.0, 1.0,
1.0, -1.0, 1.0,
1.0, 1.0, 1.0,
1.0, 1.0, 1.0,
-1.0, 1.0, 1.0,
-1.0, -1.0, 1.0
] );

レンダリングしてみればわかるが、これはもう一個三角形を追加していて

頂点が重なったところもあるので結果的に四角形が表示される

こんな感じで、頂点情報をたくさん追加していけば色々なポリゴン(三角形)が追加されていく

参考にしたサンプルコードみたいに、for文など繰り返しを使えば色々な図形も描写可能なので

試してみると良さそう


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