0

我正在尝试创建一个自定义 ShaderMaterial 重用 ShaderChunks,但在设置map参数时似乎有问题。

在我的自定义着色器中,当我加载纹理并将材质mapuniforms.map.value值设置为纹理时,它不会从我的着色器中的纹理中获取值,尽管它似乎确实设置了USE_MAP定义。

这是一个小提琴

在着色器中,如果USE_MAP已定义,它会变为绿色,但它也应该获取贴图值。
我错过了一些简单的东西吗?

以下是重要的部分:)

设置着色器

var shaderUniforms = THREE.UniformsUtils.merge([THREE.UniformsLib[ "common" ]]);

var shaderVertex = [
  //THREE.ShaderChunk[ "common" ],
  THREE.ShaderChunk[ "uv_pars_vertex" ],
  "void main() {",
    THREE.ShaderChunk[ "begin_vertex" ],
    THREE.ShaderChunk[ "project_vertex" ],
  "}",
].join("\n");

var shaderFragment = [
  THREE.ShaderChunk[ "common" ],
  THREE.ShaderChunk[ "uv_pars_fragment" ],
  THREE.ShaderChunk[ "map_pars_fragment" ],
  "void main() {",
    "vec4 diffuseColor = vec4(1.0, 0.0, 0.0, 1.0);",
    "#ifdef USE_MAP",
    '  diffuseColor = vec4(0.0, 1.0, 0.0, 1.0);',
    '#endif',
    THREE.ShaderChunk[ "map_fragment" ],
    "gl_FragColor = diffuseColor;",
  "}",
].join("\n"); 

创建材料

material = new THREE.ShaderMaterial({
        uniforms: shaderUniforms,
      vertexShader: shaderVertex,
      fragmentShader: shaderFragment
    });  

添加纹理

function loadTexture() {
    var loader = new THREE.TextureLoader();
    loader.load(dataurl, function(texture){
    console.log('texture loaded ok');

    // What to do here to add texture (map) and update ShaderMaterial?

    // Do I have to set needsUpdate on the texture?
    texture.needsUpdate = true;
    // Do I have to set needsUpdate on the material?
    material.needsUpdate = true;

    // Seems I have to set both the uniform map value and the material map value...
    material.uniforms.map.value = texture;
    material.map = texture;

    // But still does not show the texture, though USE_MAP does seem to get defined in the shader (color changes to green).

    // Hmmmm
   });
}
4

0 回答 0