在着色器材质上应用简单的纹理

 

使用Threejs（67）和Webgl渲染器，我似乎无法让搭配着色器材质的飞机穿上其纹理。 不管我做什么，材料都会保持黑色。

我目前的代码看起来很基本： 

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);

这导致：

  • 黑色材质。
  • 在控制台中没有错误。
  • 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;
  • 尝试在材料实例期间添加定义['USE_MAP']。
  • 尝试添加material.dynamic = true。
  • 我有一个正确的渲染循环（与地形交互正在工作）。

    • 我仍然想知道的是：

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

    • 我想我可以忽略更简单的东西，这就是为什么我要问...谢谢。

    我在同一着色器上应用各种效果。 我有一个自定义API，通过使用Three.UniformsUtils.merge()简单地合并所有不同的效果制服。然而，此功能正在调用纹理上的clone()方法，并导致在texture到达渲染器之前将needsUpdate重置为false 。

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

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

    在我的情况下，以下不起作用（ grassT是我的纹理）： 

    grassT.needsUpdate = true

    而以后在代码中完美运行： 

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

    图像加载是异步的。 最有可能的是，您在渲染纹理图像之前渲染场景。

    加载图像后，必须将texture.needsUpdate标志设置为true 。 three.js有一个实用程序可以为你做到这一点： 

    var texture = THREE.ImageUtils.loadTexture( "texture.jpg" );

    渲染器渲染器将texture.needsUpdate标志设置为false 。

    three.js r.68

    链接地址: http://www.djcxy.com/p/33985.html

    上一篇: Applying simple texture on a shader material

    下一篇: Android OpenGL ES 2.0 black textures