three.js - Threejs - 在着色器 Material 上应用简单纹理

Question

将 Threejs (67) 与 Webgl 渲染器一起使用，我似乎无法获得带有着色器 Material 的平面来磨损其纹理。无论我做什么， Material 都会保持黑色。

目前我的代码看起来很基础:

var grassT = new Three.Texture(grass); // grass is an already loaded image.
grassT.wrapS = grassT.wrapT = Three.ClampToEdgeWrapping;
grassT.flipY = false;
grassT.minFilter = Three.NearestFilter;
grassT.magFilter = Three.NearestFilter;
grassT.needsUpdate = true;

var terrainUniforms = {
  grassTexture : { type: "t", value: grassT},
}

然后我在 vertexShader 中只有这个相关部分:

vUv = uv;

在 fragmentShader 方面:

gl_FragColor = texture2D(grassTexture, vUv);

这导致:

• 黑色 Material 。
• 控制台没有错误。
• gl_FragColor 值始终为 (0.0, 0.0, 0.0, 1.0)。

我尝试/检查的内容:

• 如果我只应用自定义纯色，一切正常。
• 如果我也使用纯色的 vertexColors 就没问题。
• 我的纹理宽度/高度确实是 2 的幂。
• 图像与代码位于同一台服务器上。
• 用相同的结果测试了其他图像。
• 图像实际上正在浏览器调试器中加载。
• 网格的 UVS 是正确的。
• 玩过 wrapT、wrapS、minFilter、magFilter
• 调整网格大小，使纹理的比例为 1:1。
• 使用 requirejs 图像插件预加载图像并从 THREE.Texture() 而不是使用 THREE.ImageUtils() 创建纹理；
• 玩过 needsUpdate : true;
• 尝试在 Material 实例化过程中添加定义['USE_MAP']。
• 尝试添加 material.dynamic = true。
• 我有一个正确的渲染循环(与地形的交互工作正常)。

我仍然想知道的是:

• 这是一款多人游戏，使用带有 express + socket.io 的自定义端口。我是否受到任何 Webgl 安全政策的影响？
• 我目前没有灯光逻辑，这是个问题吗？
• 也许着色器 Material 在实例化时需要其他“定义”？

我想我忽略了一些更简单的事情，这就是为什么我要问...谢谢。

Answer 1

我在同一着色器上应用各种效果。我有一个自定义 API，只需使用 Three.UniformsUtils.merge() 即可合并所有不同的效果制服，但是此函数正在调用纹理上的 clone() 方法，这导致在纹理到达渲染器之前将 needsUpdate 重置为 false。

看起来您应该在达到 Material 级别时将纹理needsUpdate 属性设置为true。在纹理级别上，如果您设置的制服被合并，并因此被克隆，在稍后的过程中，它将失去其 needsUpdate 属性。

这里也详细说明了这个问题:https://github.com/mrdoob/three.js/issues/3393

在我的例子中，以下没有工作(grassT 是我的纹理):

grassT.needsUpdate = true

虽然下面的代码稍后在代码中完美运行:

material.uniforms.grassTexture.value.needsUpdate = true;