のぐそんブログ

暗いおじさんがシコシコ書くブログです。

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);

左がバンプマップなしで、右がバンプマップを使用した例です。

まとめ

他にも法線バンプマップなどもあるのですが、効果てきなテクスチャの作り方がわかりませんでした。

THREE.jsでの環境マッピング

環境マッピングとは

環境マッピングとは、オブジェクトの周りの環境を、オブジェクトの表面に映り込ませるたり、屈折させたりすることです。 サングラスに周りの風景が映り込むイメージです。

環境マッピングの準備

よりリアルに環境マッピングを表現するためには、映り込ませる環境(風景)を準備する必要があります。

今回はキューブ環境マッピングを行うので、四角形用のテクスチャを用意します。 四角形なので、画像は上下左右前後の計6枚用意する必要があります。

テクスチャを内側に貼り付けた四角形の中にカメラを配置するイメージです。

続きを読む

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ファイルの使い所がよくわかりませんでした。 パーティクルシステムでつかうのかな・・・

WebGLでライトを実装する為に最低限理解しておく必要基礎知識

今回はWebGLでライトを実装する為に最低限理解しておく必要があることについてまとめました。

法線

法線とは向きを表すベクトルです。法線ベクトルと呼ぶ場合のあります。

続きを読む

Three.jsでGLSLを触るための基礎基礎メモ

GLSLの基礎

「WebGLを使って三角形を描画する為の基礎知識」でも少しかきましたが、GLSLは頂点シェーダーと、フラグメントシェーダーがあります。

頂点シェーダーではgl_Positionという組み込み変数に頂点データを必ず渡す必要があります。 フラグメントシェーダーには、gl_FragColorという組み込み変数がありピクセルの色を指定します。

gl_Positionには、後述するカメラの視野範囲の空間であるクリッピング座標が入ります。

続きを読む

WebGLでの行列による変換処理を理解する上で、最低限知る必要がある言葉

WebGLでの行列による変換処理を理解する上で、最低限しっていないといけない言葉について書きたいと思います。

下記を参考にさせていただきました。 3D 描画の基礎知識

続きを読む