three.js shadermaterial not working at all

问题

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.

so here's my code:

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:

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.

回答1:

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.

EDIT:

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

来源：https://stackoverflow.com/questions/25889688/three-js-shadermaterial-not-working-at-all

标签

three.js

shader