WebGLの能力を引き出すプログラマブルシェーダー：Webグラフィックをハックする（最終回）（5/5 ページ）

'phong': {
    uniforms: THREE.UniformsUtils.merge( [
        THREE.UniformsLib[ "common" ],
        THREE.UniformsLib[ "bump" ],
        // ...中略...
        {
            "ambient"  : { type: "c", value: new THREE.Color( 0xffffff ) },
            "emissive" : { type: "c", value: new THREE.Color( 0x000000 ) },
            // ...中略...
        }
    ] ),
 
    vertexShader: [
        "#define PHONG",
        "varying vec3 vViewPosition;",
        "varying vec3 vNormal;",
        THREE.ShaderChunk[ "map_pars_vertex" ],
        THREE.ShaderChunk[ "lightmap_pars_vertex" ],
        // ...中略...
 
        "void main() {",
            THREE.ShaderChunk[ "map_vertex" ],
            THREE.ShaderChunk[ "lightmap_vertex" ],
            // ...中略...
        "}"
 
    ].join("\n"),
 
    fragmentShader: [
        "uniform vec3 diffuse;",
        "uniform float opacity;",
        // ...中略...
 
        "void main() {",
            "gl_FragColor = vec4( vec3 ( 1.0 ), opacity );",
            THREE.ShaderChunk[ "map_fragment" ],
            THREE.ShaderChunk[ "alphatest_fragment" ],
            // ...中略...
        "}"
    ].join("\n")
},

var MyMeshPhongMaterial = function(parameters) {
  this.fragmentShader = "void main() {}";
  this.vertexShader = "void main() {}";
  this.uniforms = {};
  this.defines = {};
  this.attributes = null;
  THREE.MeshPhongMaterial.call(this, parameters);
};
MyMeshPhongMaterial.prototype = Object.create(
  THREE.MeshPhongMaterial.prototype);

var material = new MyMeshPhongMaterial({
  // MeshPhongMaterialのパラメータ
  color: 0xffffff, specular: 0xcccccc, shininess:50, ambient: 0xffffff,
  map: THREE.ImageUtils.loadTexture('images/earth.jpg'),
 
  // 独自シェーダー
  uniforms: THREE.UniformsUtils.merge([
    THREE.ShaderLib['phong'].uniforms,
    { tNoise: { type:'t', value:null } }
  ]),
 
  vertexShader:THREE.ShaderLib['phong'].vertexShader,
 
  fragmentShader:[
    // ...中略...
 
    // 独自のuniform変数
    "uniform sampler2D tNoise;",
 
    "void main() {",
      "gl_FragColor = vec4( vec3 ( 1.0 ), opacity );",
 
      // カラーテクスチャのフェッチを独自のコードに差し替える
      // THREE.ShaderChunk[ "map_fragment" ],
      "vec2 noise = texture2D(tNoise, vUv).xy + vec2(-0.5, -0.5);",
      "gl_FragColor = texture2D(map, vUv + noise * 0.01);",
 
      // ...中略...
    "}"
  ].join('\n'),
});
material.uniforms.tNoise.value =
  THREE.ImageUtils.loadTexture('images/noise.png');

var oldInitMaterial = renderer.initMaterial;
renderer.initMaterial = function(material, lights, fog, object) {
  if(material instanceof MyMeshPhongMaterial) {
    var dummy = {};
    for(var i in material) dummy[i] = material[i];
    oldInitMaterial.call(this, dummy, lights, fog, object);
    for(var i in dummy) material[i] = dummy[i];
  } else {
    oldInitMaterial.call(this, material, lights, fog, object);
  }
};