三个js - 克隆着色器并改变统一值

Question

我正在创建一个着色器来生成带阴影的地形.

我的出发点是克隆lambert着色器并使用ShaderMaterial最终使用我自己的脚本进行自定义.

标准方法效果很好:

var material = new MeshLambertMaterial({map:THREE.ImageUtils.loadTexture('images/texture.jpg')});

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

etc

结果:

但是我想使用lambert材料作为基础并在其上工作,所以我尝试了这个:

var lambertShader = THREE.ShaderLib['lambert'];
var uniforms = THREE.UniformsUtils.clone(lambertShader.uniforms);

var texture = THREE.ImageUtils.loadTexture('images/texture.jpg');
uniforms['map'].texture = texture;

var material = new THREE.ShaderMaterial({
    uniforms: uniforms,
    vertexShader: lambertShader.vertexShader,
    fragmentShader: lambertShader.fragmentShader,
    lights:true,
    fog: true
});

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

结果如下:

看起来好像着色器没有考虑我添加的新纹理,但是当我记录制服时查看检查器时,地图对象具有正确的值.

我对三个很新,所以我可能会做一些根本错误的事情,如果有人能指出我在这里正确的方向,这将是伟大的.

如果有帮助,我也可以提供演示链接？

谢谢,威尔

编辑:

这是一些演示链接.

使用着色器材质进行演示:http://dev.thinkjam.com/experiments/threejs/terrain/terrain-shader-material.html

使用朗伯材料的演示:http://dev.thinkjam.com/experiments/threejs/terrain/terrain-lambert-material.html

Answer 1

这不工作的原因是默认three.js所朗贝尔着色器使用预处理宏指令#ifdef,以确定是否使用地图,envmaps,光照贴图,等等等等.

Three.js WebGLRenderer设置适当的预处理程序指令(#define),以根据材质对象上是否存在某些属性来启用这些着色器.

如果您已开始采用克隆和修改默认着色器的方法,则必须在材质上设置相关属性.对于纹理贴图,Three.js WebGLRenderer.js有这一行:

parameters.map ? "#define USE_MAP" : ""

因此,请尝试设置material.map = true;着色器材质.

当然,如果你知道你将要编写自己的着色器并且不需要动态包含各种着色器片段,那么你可以明确地编写着色器,你不必担心这个问题.