canvasthree.jswebglfragment-shaderfresnel

Three.js: Fresnel Shader - Lights: true issue

I have a small issue with the three.js example fresnel shader.

'lights : true' - if this is 'true' then I get the following error:

Uncaught TypeError: Cannot set property 'value' of undefined

I'm clueless. Thanks for any suggestions.

Solution

  • When you set ShaderMaterial.lights = true, the renderer will populate the shader lights uniform parameters for you.

    But you have to ensure that your shader has the necessary lights uniforms in the first place.

    THREE.FresnelShader does not use lights as written; it relies on an environment map instead. Consequently, setting lights: true will have no effect.

    But if you want to do it, and are willing to modify the shader, you have to replace

    var shader = THREE.FresnelShader;
var uniforms = THREE.UniformsUtils.clone( shader.uniforms );

    with

    var shader = THREE.FresnelShader;

var uniforms = THREE.UniformsUtils.merge( [

    THREE.UniformsLib[ "lights" ],
    shader.uniforms

] );

    three.js r.59