Three.jsで画面全体に板ポリゴンを貼る

板ポリゴンを作成して、テクスチャを貼ってみたいと思います。 まずは、画面全体に板ポリゴンを貼ってみたいと思います。

Geometryクラスと、BufferGeometryクラスで少し書き方が異なるみたいだったので、両方書いておきます。

頂点シェーダ

void main() {
  gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}

フラグメントシェーダー

void main(){
    gl_FragColor = vec4(vec3(1.0,1.0,0.0),1.0);
}

Geometryクラスを使う

let windowWidth = window.innerWidth;
let windowHeight = window.innerHeight;
//横長の前提で
let aspect = windowWidth / windowHeight;

//Geometryを作成
let geometry = new THREE.Geometry();

//頂点座標
geometry.vertices = [
    new THREE.Vector3(-1.0 * aspect, 1.0, 0.0),
    new THREE.Vector3(1.0 * aspect, 1.0, 0.0),
    new THREE.Vector3(-1.0 * aspect, -1.0, 0.0),
    new THREE.Vector3(1.0 * aspect, -1.0, 0.0)
];

//頂点インデックス
geometry.faces = [
    new THREE.Face3(0, 2, 1),
    new THREE.Face3(1, 2, 3)
];

// Material作成
let material = new THREE.ShaderMaterial({
    uniforms: uniforms,
    vertexShader: myVert,
    fragmentShader: myFrag
});
// Mesh作成
let mesh = new THREE.Mesh(geometry, material);

BufferGeometryクラスを使う

THREE.BufferGeometryを使って、ポリゴンを描いてみます。

JS

let windowWidth = window.innerWidth;
let windowHeight = window.innerHeight;
//横長の前提で
let aspect = windowWidth / windowHeight;

//Geometryを作成
let geometry = new THREE.BufferGeometry();

//頂点座標
let vertices = new Float32Array([
    -1.0 * aspect, 1.0, 0.0,
    1.0 * aspect, 1.0, 0.0, 
    -1.0 * aspect, -1.0, 0.0,
    1.0 * aspect, -1.0, 0.0

]);

//頂点インデックス
let index = new Uint32Array([
    0, 2, 1,
    1, 2, 3
]);

//頂点座標
geometry.addAttribute('position', new THREE.BufferAttribute(vertices, 3));
//頂点のつなげ順
geometry.setIndex(new THREE.BufferAttribute(index, 1));

//マテリアルを設定。シェーダーファイルや、uniform変数を指定
let material = new THREE.ShaderMaterial({
    uniforms: uniforms,
    vertexShader: myVert,
    fragmentShader: myFrag
});

let mesh = new THREE.Mesh(geometry, material);

こんな感じで描画されます。

テクスチャを貼ってみる

今回のゴールである、板ポリゴンにテクスチャを貼るのをやってみたいと思います。 注意点はテクスチャ座標は左下が原点になることです。

頂点シェーダ

varying vec2 vUv;

void main() {
  vUv = uv;
  gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}

フラグメントシェーダー

varying vec2 vUv;

void main(){
    vec4 dest = texture2D(uTex, vUv); 
    gl_FragColor = vec4(dest);
｝

Geometryクラスを使う

THREE.Geometryを使って、ポリゴンにテクスチャ画像を貼ってみます。

JS

let windowWidth = window.innerWidth;
let windowHeight = window.innerHeight;
//横長の前提で
let aspect = windowWidth / windowHeight;

let uniforms = {
    'uTex': {
        type: 't',
        value: new THREE.TextureLoader().load('images/img.jpg')
    }
};

//Geometryを作成
let geometry = new THREE.Geometry();

//頂点座標
geometry.vertices = [
    new THREE.Vector3(-1.0 * aspect, 1.0, 0.0),
    new THREE.Vector3(1.0 * aspect, 1.0, 0.0),
    new THREE.Vector3(-1.0 * aspect, -1.0, 0.0),
    new THREE.Vector3(1.0 * aspect, -1.0, 0.0)
];

//頂点インデックス
geometry.faces = [
    new THREE.Face3(0, 2, 1),
    new THREE.Face3(1, 2, 3)
];

geometry.faceVertexUvs[0] = [
    [
        new THREE.Vector2(0.0, 1.0),
        new THREE.Vector2(0.0, 0.0),
        new THREE.Vector2(1.0, 1.0),
    ],
    [
        new THREE.Vector2(1.0, 1.0),
        new THREE.Vector2(0.0, 0.0),
        new THREE.Vector2(1.0, 0.0),
    ]
];

// Material作成
let material = new THREE.ShaderMaterial({
    uniforms: uniforms,
    vertexShader: myVert,
    fragmentShader: myFrag
});
// Mesh作成
let mesh = new THREE.Mesh(geometry, material);

BufferGeometryクラスを使う

THREE.BufferGeometryを使って、ポリゴンにテクスチャ画像を貼ってみます。

JS

let windowWidth = window.innerWidth;
let windowHeight = window.innerHeight;
//横長の前提で
let aspect = windowWidth / windowHeight;

let uniforms = {
    'uTex': {
        type: 't',
        value: new THREE.TextureLoader().load('images/img.jpg')
    }
};

//Geometryを作成
let geometry = new THREE.BufferGeometry();

//頂点座標
let vertices = new Float32Array([-1.0 * aspect, 1.0, 0.0,
    1.0 * aspect, 1.0, 0.0, -1.0 * aspect, -1.0, 0.0,
    1.0 * aspect, -1.0, 0.0

]);

//頂点インデックス
let index = new Uint32Array([
    0, 2, 1,
    1, 2, 3
]);

let uvs = new Float32Array([
    0.0, 1.0, //1つ目の頂点のUV座標
    1.0, 1.0, //2つ目の頂点のUV座標
    0.0, 0.0, //3つ目の頂点のUV座標
    1.0, 0.0 //4つ目の頂点のUV座標
]);

//頂点座標
geometry.addAttribute('position', new THREE.BufferAttribute(vertices, 3));
//テクスチャ座標
geometry.addAttribute('uv', new THREE.BufferAttribute(uvs, 2));
//頂点のつなげ順
geometry.setIndex(new THREE.BufferAttribute(index, 1));

//マテリアルを設定。シェーダーファイルや、uniform変数を指定
let material = new THREE.ShaderMaterial({
    uniforms: uniforms,
    vertexShader: myVert,
    fragmentShader: myFrag
});

let mesh = new THREE.Mesh(geometry, material);

表示はこんな感じになります。