自定义ShaderMaterial地图问题

时间:2015-12-31 07:00:10

标签: three.js shadermaterial

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

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

HERE is a fiddle

在着色器中,如果定义了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
   });
}

0 个答案:

没有答案