CODEWITHSUNDEEP
three.jswebgl
Wezy
Wezy

Reputation: 667

Lights and shade with a custom fragmentShader

I'm creating a sphere and adding distortion to it, that's working fine. When I look at the wireframe it's like this

wireframe

and with the wireframe turned of it looks like this

solid

As you can see the are no shades and the distortion isn't visible when the wireframe is turned of.

What I'm looking for is what to place in my custom fragmentShader.

I used this

        // calc the dot product and clamp
        // 0 -> 1 rather than -1 -> 1
        vec3 light = vec3(0.5,0.2,1.0);

        // ensure it's normalized
        light = normalize(light);

        // calculate the dot product of
        // the light to the vertex normal
        float dProd = max(0.0, dot(vNormal, light));

        // feed into our frag colour
        gl_FragColor = vec4(dProd, dProd, dProd, 1.0);

But that just creates a very ugly false light. Any ideas anybody?

Thanks in advance, Wezy

Upvotes: 2

Views: 1226

Answers (1)

Tapio
Tapio

Reputation: 3456

If you want to use Three.js' lights (and I can't think a reason why not), you need to include the corresponding shader chunks:

  1. Take a look at how the WebGLRenderer composes its shaders in THREE.ShaderLib
  2. Pick a material there that is close to what you want and copy its definition (uniforms and both shader codes) to your code, renaming it to something custom
  3. Delete chunks you don't need, and add your custom code to appropriate places

Upvotes: 1

Related Questions