Question

使用three.js我一直在尝试创建一个使用内置lambert着色器的ShaderMaterial，所以我可以扩展lambert着色器并添加我自己的着色器代码，例如在顶点着色器中做一些简单的波形，无需重写已经存在的所有便利照明代码。

我的代码如下：

var lambertShader = THREE.ShaderLib['lambert'];

lambertShader.uniforms.map = {type:"t", value:this.waterTexture};

 this.seaMaterial = new THREE.ShaderMaterial({
    vertexShader: "#define USE_MAP\n"+lambertShader.vertexShader,
    fragmentShader: "#define USE_MAP\n"+lambertShader.fragmentShader,
    uniforms: lambertShader.uniforms,
    lights: true,
    transparent: true,
    opacity: 0.8,
    depthTest: false,
    depthWrite: false
});

首先，我从THREE.ShaderLib ['lambert']复制默认着色器程序和制服。

然后我将'map'统一设置为我想要使用的纹理。

最后，我使用lambert着色器程序创建了ShaderMaterial。

我遇到的问题：

我必须在顶点和片段着色器前加上“#define USE_MAP \ n”，让着色器程序知道它应该使用纹理贴图。如果我不添加它，则不使用纹理贴图。添加'map：true'不会像在另一个StackOverflow线程中所建议的那样修复此问题。
depthTest和depthWrite已禁用但无效。当使用普通的MeshLambertMaterial时，这很好用。
当我使用普通的MeshLambertMaterial时，纹理不会重复正确。（我把它设置为水平重复12次，垂直重复12次）

我感觉有更多的#define预处理程序指令会自动为MeshLambertMaterials启用，但不适用于ShaderMaterials，或者它可能是一个不同的问题。

看起来照明工作正常，所以至少会发送到着色器。

有没有办法自动添加所需的预处理程序指令或以任何其他方式修复depthTest / depthWrite和纹理重复问题？（因为我认为这就是着色器无法正常运行的原因）

我查看了three.js源代码，看来在WebGLProgram.js中，从第127行开始，有一些代码将必要的#define语句添加到着色器程序中，但我不是确定为什么没有为THREE.ShaderMaterial调用代码。

提前致谢，罗宾

在THREE.ShaderMaterial中使用/扩展内置的lambert着色器

0 个答案: