我有2个jsfiddle显示完全相同的代码，除了三个版本：
第一个样本使用three.js r68（http://jsfiddle.net/32gg0rdu/）
<body>
<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r68/three.js"></script>
<script>
var renderer = new THREE.WebGLRenderer({ antialias:true });
renderer.setSize(500, 500);
renderer.setClearColor(0x000000, 1);
document.body.appendChild(renderer.domElement);
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(15, 500 / 500);
camera.position = new THREE.Vector3(0, 0, 8);
camera.lookAt(new THREE.Vector3(0, 0, 0));
scene.add(camera);
var light = new THREE.DirectionalLight(0xcccccc);
light.position = new THREE.Vector3(0.577, 0.577, 0.577);
var ambient = new THREE.AmbientLight(0x333333);
scene.add(light);
scene.add(ambient);
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);
THREE.ImageUtils.crossOrigin = '';
var mapOverlay = THREE.ImageUtils.loadTexture('http://i.imgur.com/vIRBywG.jpg');
var material = new MyMeshPhongMaterial({
// MeshPhongMaterialのパラメータ
color: 0xffffff, specular: 0xcccccc, shininess:30, ambient: 0xffffff,
map: mapOverlay,
uniforms: THREE.UniformsUtils.merge([
THREE.ShaderLib['phong'].uniforms,
{ tNoise: { type:'t', value:null } }
]),
vertexShader:THREE.ShaderLib['phong'].vertexShader,
fragmentShader:[
"uniform vec3 diffuse;",
"uniform float opacity;",
"uniform vec3 ambient;",
"uniform vec3 emissive;",
"uniform vec3 specular;",
"uniform float shininess;",
THREE.ShaderChunk[ "color_pars_fragment" ],
THREE.ShaderChunk[ "map_pars_fragment" ],
THREE.ShaderChunk[ "lightmap_pars_fragment" ],
THREE.ShaderChunk[ "envmap_pars_fragment" ],
THREE.ShaderChunk[ "fog_pars_fragment" ],
THREE.ShaderChunk[ "lights_phong_pars_fragment" ],
THREE.ShaderChunk[ "shadowmap_pars_fragment" ],
THREE.ShaderChunk[ "bumpmap_pars_fragment" ],
THREE.ShaderChunk[ "normalmap_pars_fragment" ],
THREE.ShaderChunk[ "specularmap_pars_fragment" ],
// 独自の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.1);",
THREE.ShaderChunk[ "alphatest_fragment" ],
THREE.ShaderChunk[ "specularmap_fragment" ],
THREE.ShaderChunk[ "lights_phong_fragment" ],
THREE.ShaderChunk[ "lightmap_fragment" ],
THREE.ShaderChunk[ "color_fragment" ],
THREE.ShaderChunk[ "envmap_fragment" ],
THREE.ShaderChunk[ "shadowmap_fragment" ],
THREE.ShaderChunk[ "linear_to_gamma_fragment" ],
THREE.ShaderChunk[ "fog_fragment" ],
"}"
].join('\n'),
});
material.uniforms.tNoise.value =
THREE.ImageUtils.loadTexture('http://i.imgur.com/f081FPr.jpg');
var geometry = new THREE.SphereGeometry(1, 32, 16);
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
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);
}
};
var baseTime = +new Date;
function render() {
requestAnimationFrame(render);
mesh.rotation.y = 0.3 * (+new Date - baseTime) / 1000;
renderer.render(scene, camera);
};camera.position.set(5,5,5);camera.lookAt(new THREE.Vector3(0,0,0));
render();
</script><canvas width="500" height="500"></canvas>
第二个样本使用three.js r69（http://jsfiddle.net/kj9cm6br/）
<body>
<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r69/three.js"></script>
<script>
var renderer = new THREE.WebGLRenderer({ antialias:true });
renderer.setSize(500, 500);
renderer.setClearColor(0x000000, 1);
document.body.appendChild(renderer.domElement);
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(15, 500 / 500);
camera.position = new THREE.Vector3(0, 0, 8);
camera.lookAt(new THREE.Vector3(0, 0, 0));
scene.add(camera);
var light = new THREE.DirectionalLight(0xcccccc);
light.position = new THREE.Vector3(0.577, 0.577, 0.577);
var ambient = new THREE.AmbientLight(0x333333);
scene.add(light);
scene.add(ambient);
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);
THREE.ImageUtils.crossOrigin = '';
var mapOverlay = THREE.ImageUtils.loadTexture('http://i.imgur.com/vIRBywG.jpg');
var material = new MyMeshPhongMaterial({
// MeshPhongMaterialのパラメータ
color: 0xffffff, specular: 0xcccccc, shininess:30, ambient: 0xffffff,
map: mapOverlay,
uniforms: THREE.UniformsUtils.merge([
THREE.ShaderLib['phong'].uniforms,
{ tNoise: { type:'t', value:null } }
]),
vertexShader:THREE.ShaderLib['phong'].vertexShader,
fragmentShader:[
"uniform vec3 diffuse;",
"uniform float opacity;",
"uniform vec3 ambient;",
"uniform vec3 emissive;",
"uniform vec3 specular;",
"uniform float shininess;",
THREE.ShaderChunk[ "color_pars_fragment" ],
THREE.ShaderChunk[ "map_pars_fragment" ],
THREE.ShaderChunk[ "lightmap_pars_fragment" ],
THREE.ShaderChunk[ "envmap_pars_fragment" ],
THREE.ShaderChunk[ "fog_pars_fragment" ],
THREE.ShaderChunk[ "lights_phong_pars_fragment" ],
THREE.ShaderChunk[ "shadowmap_pars_fragment" ],
THREE.ShaderChunk[ "bumpmap_pars_fragment" ],
THREE.ShaderChunk[ "normalmap_pars_fragment" ],
THREE.ShaderChunk[ "specularmap_pars_fragment" ],
// 独自の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.1);",
THREE.ShaderChunk[ "alphatest_fragment" ],
THREE.ShaderChunk[ "specularmap_fragment" ],
THREE.ShaderChunk[ "lights_phong_fragment" ],
THREE.ShaderChunk[ "lightmap_fragment" ],
THREE.ShaderChunk[ "color_fragment" ],
THREE.ShaderChunk[ "envmap_fragment" ],
THREE.ShaderChunk[ "shadowmap_fragment" ],
THREE.ShaderChunk[ "linear_to_gamma_fragment" ],
THREE.ShaderChunk[ "fog_fragment" ],
"}"
].join('\n'),
});
material.uniforms.tNoise.value =
THREE.ImageUtils.loadTexture('http://i.imgur.com/f081FPr.jpg');
var geometry = new THREE.SphereGeometry(1, 32, 16);
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
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);
}
};
var baseTime = +new Date;
function render() {
requestAnimationFrame(render);
mesh.rotation.y = 0.3 * (+new Date - baseTime) / 1000;
renderer.render(scene, camera);
};camera.position.set(5,5,5);camera.lookAt(new THREE.Vector3(0,0,0));
render();
</script><canvas width="500" height="500"></canvas>
。正如你在代码中看到的那样，我使用一个自制的phong着色器材质的分叉，使用2个纹理混合在我的球体上产生嘈杂的效果。问题是：它与r68一起运行良好，但它在r69中没有工作（嘈杂的效果）
如果有人有想法......提前谢谢！