three.js shadermaterial 根本不工作

Question

我一直在摆弄three.js，当谈到THREE.ShaderMaterial 时，我感到很困惑。它从直接从示例中复制/粘贴开始，如下所示：http://threejs.org/examples/#webgl_materials_normalmap

我将它复制到一个只返回材料的函数中。它不起作用（错误，我稍后会详细说明），所以我移除了所有已设置的制服并使用完整的空白材料。只是看看是否仍然会显示相同的错误。

这是我的代码：

var testmaterial = function(params){
    var shader = THREE.ShaderLib[ "normalmap" ];
    var uniforms = THREE.UniformsUtils.clone( shader.uniforms );

    var parameters = { fragmentShader: shader.fragmentShader, vertexShader: shader.vertexShader, uniforms: uniforms};
    var material = new THREE.ShaderMaterial( parameters );

    return material;
};

你说的没什么好说的，我同意，但是，浏览器似乎不同意。这是我似乎无法摆脱的错误：

错误 X6077：以 r# 作为源的 texld/texldb/texldp/dsx/dsy 指令不能在动态条件“if”块、动态条件子例程调用或带 break* 的循环/rep 中使用。

有人知道我做错了什么吗？任何帮助将不胜感激。

Answer 1

您选择的着色器，即normalmap，需要设置一些输入统一。 如果您查看https://github.com/mrdoob/three.js/blob/r68/src/renderers/shaders/ShaderLib.js#L595，您将看到为空的变量：

    "tDisplacement": { type: "t", value: null },
    "tDiffuse"     : { type: "t", value: null },
    "tCube"        : { type: "t", value: null },
    "tNormal"      : { type: "t", value: null },
    "tSpecular"    : { type: "t", value: null },
    "tAO"          : { type: "t", value: null },

所以要么你需要设置这些，要么因为你只是在摆弄，尝试另一个不需要输入的简单着色器。似乎大多数其他人不需要设置输入制服。

编辑：

您还需要计算模型的切线。 但为此，您需要使用不同的模式。

var geometry = new THREE.SphereGeometry(100, 50, 50);
geometry.computeTangents();

var material = myShaderMaterial({
    //enableAO          : 0,
    enableDiffuse       : 1,
    //enableSpecular    : 0,
    //enableReflection  : 0,
    enableDisplacement  : 1,

    tDisplacement       : THREE.ImageUtils.loadTexture('textures/planets/earthbump1k.jpg'),
    tDiffuse            : THREE.ImageUtils.loadTexture('textures/planets/earthbump1k.jpg'),
    //tCube             : planet.maps.planet.
    tNormal             : THREE.ImageUtils.loadTexture('textures/planets/earthbump1k.jpg'),
    //tSpecular         : planet.maps.planet.
    //tAO               : planet.maps.planet.
});

var mesh = new THREE.Mesh(geometry, material);