glslでテクスチャをはる

glsl側でテクスチャを貼ってみたいと思います。 画像はTHREE.ImageUtils.loadTextureで読み込んでuniform変数として渡します。

渡した画像は、glslのビルドイン関数であるtexture2Dを利用します。 テクスチャの型はsampler2Dを利用します。

precision mediump float;
uniform sampler2D uTex;
varying vec2 vUv;

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

js

var myVert = require('./../shader/sample.vert');
var myFrag = require('./../shader/sample.frag');

window.onload = function () {
  var windowWidth = window.innerWidth;
  var windowHeight = window.innerHeight;

  // rendererの作成
  var renderer = new THREE.WebGLRenderer();
  
  // canvasをbodyに追加
  document.body.appendChild(renderer.domElement);

  // canvasをリサイズ
  renderer.setSize(windowWidth, windowHeight);

  // scene作成
  var scene = new THREE.Scene();
  // camera作成
  var camera = new THREE.PerspectiveCamera(75, windowWidth / windowHeight, 0.1, 1000);
  camera.position.z = 1;

  // Geometry作成
  var geometry = new THREE.BoxBufferGeometry(0.25, 0.25, 0.25);

  // Material作成
  var material = new THREE.RawShaderMaterial({
    vertexShader: myVert,
    fragmentShader: myFrag,
    uniforms: {
      uTex: { type: 't', value: THREE.ImageUtils.loadTexture('images/t.jpg') }
    }
  });

  // Mesh作成
  var mesh = new THREE.Mesh(geometry, material);

  // Meshをシーンに追加
  scene.add(mesh);

  // draw
  render();

  var r = 0;

  //描画
  function render() {
    renderer.render(scene, camera);

    r += 0.01;

    mesh.rotation.set(0, r, r);

    // animation
    requestAnimationFrame(render);
  }
};

vert

attribute vec3 position;
attribute vec2 uv;
uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;
varying vec2 vUv;

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

frag

precision mediump float;
uniform sampler2D uTex;
varying vec2 vUv;

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

結果

uvを変更してみる

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

まとめ

複数のテクスチャを使うとか、uvをそれぞれのポリゴンに対して設定するとかがイマイチわかりませんでした。 引き続き調べたいと思います。