三.js 着色器材料根本不起作用 [英] three.js shadermaterial not working at all

问题描述

我一直在摆弄three.js，当谈到THREE.ShaderMaterial 时，我被难住了.它从示例中直接复制/粘贴开始，如下所示:http://threejs.org/examples/#webgl_materials_normalmap

I've been fiddling around with three.js a bit, and im stumped when it comes to THREE.ShaderMaterial. it started out with copy/pasting directly from the example, shown here: http://threejs.org/examples/#webgl_materials_normalmap

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

i copied it into a function that just returns the material. it wouldnt work (error, i'll get to the specifics later), so i removed all the uniforms that had been set and went for a complete blank material. just to see if the same error would still show.

这是我的代码:

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

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

nothing fancy you'd say, and i'd agree, however, the browser seems to disagree. here's the error i just cant seem to get rid of:

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

error X6077: texld/texldb/texldp/dsx/dsy instructions with r# as source cannot be used inside dynamic conditional 'if' blocks, dynamic conditional subroutine calls, or loop/rep with break*.

有没有人知道我做错了什么?任何帮助将不胜感激.

does anyone have the slightest clue on what i'm doing wrong? any help would be greatly appreciated.

推荐答案

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

The shader you chose, namely normalmap, requires some input uniforms to be set. If you look at https://github.com/mrdoob/three.js/blob/r68/src/renderers/shaders/ShaderLib.js#L595 you will see the variables that are null:

    "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 },

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

So either you need to set these or since you are just fiddling around try another simple shader that does not require inputs. Seems that most others do not require input uniforms to be set.

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

You also need to compute the models' tangents. But for that you need to use a different pattern.

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

这篇关于三.js 着色器材料根本不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！