THREE.ShaderMaterialを使ってみる方法

THREE.ShaderMaterialを使ってみる方法

shaderを独自で適用させるには、メリットもあるけどデメリットもある。
Three jsで描画に使われているshaderはライトから光を受けた設定なども含まれている

似たものを作る場合には、
光の情報を毎render毎に渡すなどの処理が必要になるみたいです。

逆に、照明からの光のデータに干渉しないものを作る場合には、割とカンタンに利用ができそう。

qiita.html

<script id="test_vertexshader" type="x-shader/x-vertex">
    varying vec2 vUv;
    void main() {
        vUv = uv;
        gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
    }
</script>

<script id="test_fragmentshader" type="x-shader/x-fragment">
    uniform sampler2D map;
    varying vec2 vUv;
    void main() {
        gl_FragColor = texture2D( map, vUv );
    }
</script>

このデータを元に雲を生成してみると

qiita.js

function makeTestShader(){
  var geometry = new THREE.PlaneGeometry(500, 500);
  var texture = THREE.ImageUtils.loadTexture('cloud10.png', null, function() {renderer.render(scene, camera);});
  var material = new THREE.ShaderMaterial({
     uniforms: {
            "map": {
                type: "t",
                value: texture
            }
      },
      vertexShader: document.getElementById('test_vertexshader').textContent,
      fragmentShader: document.getElementById('test_fragmentshader').textContent,
      blending:     THREE.AdditiveBlending,
      depthWrite:   true,
      transparent:  true,
      side: THREE.DoubleSide
  });
  mesh = new THREE.Mesh(geometry, material);
  mesh.position.y = -300;
  mesh.position.z = 1600;
  scene.add(mesh);
}

これで雲のデータが向こうに見えるものが出来た。
※cloud10.pngが雲のデータ