のぐそんブログ

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

THREE.BufferGeometryの使い方を調べる

THREE.BufferGeometryの使い方の基礎的な部分をまとめたいと思います。

THREE.BufferGeometryとは

var geometry = new THREE.BufferGeometry();

BufferGeometryはピュアなWebGLAPIを扱うようにGeometryを作成できます。 BufferGeometryは作成時は何も情報を持たない為、頂点データ(attributeやindex)を定義する必要があります。

続きを読む

Three.jsでポストプロセスを試してみる

THREE.jsにはポストプロセス用のフィルターが用意されている。 使い方を調べてみる。 ポストプロセスはオブジェクトに対して適応するのではなくシーン全体に対して適応する。

続きを読む

Three.jsのGeometryのattributesをいじってみる

Three.jsでは、ビルドインクラスに沢山のGeometry用のクラスが用意されています。 ただ、そのままの形状を使わず、少し頂点座標を動かしてみようと思います。

続きを読む

UVマッピングについて

UVとはポリゴンにテクスチャを貼るためのテクスチャの座標のことです。 UV座標はX、YのVector2(2次元)の情報となります。

主にテクスチャの特定の位置を表示したい場合などに使用します。

続きを読む

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

まとめ

頂点の描画方法でも色々ありました。 ん〜〜むずかしい。

参考

点や線のレンダリング