THREE.jsのテクスチャについて調べる
基本的なテクスチャの貼り方
一番シンプルな貼り方は下記になります。
let textuerLoader = new THREE.TextureLoader(); let mat = new THREE.MeshPhongMaterial(); let geom = new THREE.BoxGeometry(3, 3, 3); textuerLoader.load('images/n.jpg', function (textuer) { mat.map = textuer; let mesh = new THREE.Mesh(geom, mat); scene.add(mesh); });
テクスチャに利用する画像サイズは「256 x 256、512 x 512、1024 x 1024」 2の累乗を適切になります。
テクスチャの拡大縮小用のフィルタ
テクスチャをどう拡大するかにつていは、magFilterで設定、縮小するかについてはminFilterプロパティで設定できます。
フィルタ | 説明 |
---|---|
THREE.NearestFilter | もっとも近くにあるピクセルの色を使用する。拡大した場合はブロックノイズは生じ、縮小時に使用するとディティールが大幅に失われる。 |
THREE.LinearFilter | NearestFilterより高度なフィルタで、縮小時にはディティールが失われるが、拡大時はブロックノイズが少なくなる |
THREE.NearestFilter
THREE.LinearFilter
let textuerLoader = new THREE.TextureLoader(); let mat = new THREE.MeshPhongMaterial(); let geom = new THREE.BoxGeometry(3, 3, 3); textuerLoader.load('images/n.jpg', function (textuer) { textuer.magFilter = THREE.NearestFilter; textuer.minFilter = THREE.NearestFilter; mat.map = textuer; let mesh = new THREE.Mesh(geom, mat); scene.add(mesh); });
バンプマップ
バンプマップはテクスチャに奥行きを出すために使います。 バンプマップを使用する場合は、テクスチャ画像を2つ用意します。
コードは下のようになります。
let textuerLoader = new THREE.TextureLoader(); let mat = new THREE.MeshPhongMaterial(); let geom = new THREE.BoxGeometry(3, 3, 3); let textuer = textuerLoader.load('images/tile.png'); mat.map = textuer; let bump = textuerLoader.load('images/bump.png'); mat.bumpMap = bump; mat.bumpScale = 0.2; let mesh = new THREE.Mesh(geom, mat); scene.add(mesh);
まとめ
他にも法線バンプマップなどもあるのですが、効果てきなテクスチャの作り方がわかりませんでした。
WebGLでのプリミティブタイプについて
WebGLでの頂点をどのように描画するかの指定をプリミティブタイプで行います。
頂点を3つ使ってポリゴンを描くか、頂点を2つ使って線を描くか、頂点を1つ使って点を描くかなどの指定することができます。 基礎的な部分ですが、種類が沢山あるのでまとめておきます。
プリミティブタイプの指定方法
ドローコール時に指定します。 指定の仕方は下記になります。
gl.drawArrays( プリミティブ型, 頂点データの配列で最初に使用する要素のインデックス, 頂点の数);
頂点の描画順(IBO)を指定する場合はgl.drawElements()を使用します。
プリミティブタイプの種類
プリミティブタイプの種類について見ていきます。 頂点の数は4つでインデックスの設定は下記です。
gl.TRIANGLES
頂点を3つ使って、三角形を描きます。 頂点1、2、3が結ばれます。
gl.drawArrays (gl.TRIANGLES, 0, 3);
gl.TRIANGLE_STRIP
頂点を4つ使って、三角形を描きます。
頂点1、2、3 頂点2、3、4 がそれぞれが結ばれます。
gl.drawArrays (gl.TRIANGLES, 0, 4);
gl.TRIANGLE_FAN
頂点を4つ使って、三角形を描きます。
頂点1、2、3 頂点1、3、4 頂点1、4、2 とがそれぞれが結ばれます。
gl.drawArrays (gl.TRIANGLES, 0, 4);
gl.POINTS
点を描きます。
gl.drawArrays (gl.POINTS, 0, 4);
点を描画する場合は頂点シェーダーで、頂点の大きさ(gl_PointSize)を指定することができます。
<script id="vs" type="x-shader/x-vertex"> attribute vec3 position; void main(){ gl_Position = vec4(position, 1.0); //頂点サイズを指定 gl_PointSize = 5.0; } </script>
gl.LINES
直線を描きます。 頂点1と2、頂点3と4がそれぞれ結ばれます。
gl.drawArrays (gl.LINES, 0, 4);
gl.LINE_STRIP
直線を描きます。 頂点1、2、3、4の順で結ばれます。1と4は結ばれません。
gl.drawArrays (gl.LINES, 0, 4);
gl.LINE_LOOP
直線を描きます。 頂点1、2、3、4の順で結ばれ、1と4も結ばれます。
gl.drawArrays (gl.LINES, 0, 4);
まとめ
頂点の描画方法でも色々ありました。 ん〜〜むずかしい。
参考
PLYファイルを使ってパーティクルを作成
PLYファイルからパーティクルシステムを作成してみます。
PLYファイルとは
PLY(Polygon Model File)3Dファイル形式の一つです。 ポリゴンファイルのフォーマットで、3Dスキャナから得られた情報を保持するためによく利用されます。
PLYファイルをTHREE.jsで読み込み
PLYファイルはPLYLoaderを使って読み込みます。 PLYLoaderはPLYLoader.jsを別途読み込むことで使えるようになります。
読み込み部分のソースはこんな感じです。
var loader = new THREE.PLYLoader(); var group = new THREE.Group(); var material = new THREE.PointsMaterial({ color: 0xffffff, size: 0.025, opacity:0.5, transparent:true }); loader.load('./images/test.ply', function (geometry) { group = new THREE.Points(geometry, material); group.sortParticles = true; scene.add(group); });
表示はこうなります。
まとめ
PLYファイルの使い所がよくわかりませんでした。 パーティクルシステムでつかうのかな・・・
Three.jsでGLSLを触るための基礎基礎メモ
GLSLの基礎
「WebGLを使って三角形を描画する為の基礎知識」でも少しかきましたが、GLSLは頂点シェーダーと、フラグメントシェーダーがあります。
頂点シェーダーではgl_Position
という組み込み変数に頂点データを必ず渡す必要があります。 フラグメントシェーダーには、gl_FragColor
という組み込み変数がありピクセルの色を指定します。
gl_Positionには、後述するカメラの視野範囲の空間であるクリッピング座標が入ります。
続きを読む