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

Posted 2023-02-27

【中文标题】三个 js - 克隆着色器并更改统一值

【英文标题】：Three js - Cloning a shader and changing uniform values

【发布时间】：2012-08-18 23:29:22

【问题描述】：

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

我的出发点是克隆 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

【问题讨论】：

是的，演示链接确实很有帮助。

您好 mrdoob，为您的快速回复欢呼。我在帖子中添加了演示链接。如果你能对此有所了解，那就太棒了

我注意到 webgl 渲染器中特定于 THREE.MeshLambertMaterial 的一些功能在 THREE.ShaderMaterial 中没有。尤其是清爽的制服。 github.com/mrdoob/three.js/blob/master/src/renderers/…这只是在黑暗中刺伤，但这会引起问题吗？

【参考方案1】：

这不起作用的原因是默认的 Three.js 兰伯特着色器使用预处理器宏指令#ifdef 来确定是否使用贴图、环境贴图、光照贴图等。

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

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

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

所以尝试为您的着色器材质设置material.map = true;。

当然，如果您知道自己要编写自己的着色器，并且不需要动态包含各种着色器 sn-ps，则可以显式地编写着色器，无需担心关于这个。