のぐそんブログ

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

Three.jsを使ってuniformsでテクスチャを渡すメモ

Three.jsを使ってテクスチャを読み込むのはとても簡単です。

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

今回はuniform変数としてデータを渡して、テクスチャを表示してみたいと思います。

画像編

画像のテクスチャを表示してみます。

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

// Geometry作成
let geometry = new THREE.PlaneBufferGeometry(100, 100);
// Material作成
let material = new THREE.ShaderMaterial({
        uniforms: uniforms,
        vertexShader: myVert,
        fragmentShader: myFrag
});
// Mesh作成
let mesh = new THREE.Mesh(geometry, material);
vert
varying vec2 vUv;

void main() {
  vUv = uv;
  gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
frag
precision mediump float;
varying vec2 vUv;
uniform sampler2D uTex;

void main(){
  gl_FragColor = texture2D(uTex, vUv); 
}

動画編

動画のテクスチャを表示してみます。

JS
let video = document.createElement('video');
video.src = "movie/mv.mp4";
video.load();
video.play();

let uniforms = { 'uTex': { type: "t", value: new THREE.VideoTexture(video) } };

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

//テクスチャの拡大縮小用のフィルタ
material.uniforms.uTex.value.magFilter = THREE.LinearFilter;
material.uniforms.uTex.value.minFilter = THREE.LinearFilter;
// 動画テクスチャフォーマットの指定
material.uniforms.uTex.format = THREE.RGBFormat;
//テクスチャのアップデート
material.uniforms.uTex.value.needsUpdate = true;

// Mesh作成
let mesh = new THREE.Mesh(geometry, material);
vert
varying vec2 vUv;

void main() {
  vUv = uv;
  gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
frag
precision mediump float;
varying vec2 vUv;
uniform sampler2D uTex;

void main(){
  gl_FragColor = texture2D(uTex, vUv); 
}