Three.jsを使ってuniformsでテクスチャを渡すメモ
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); }