oframe / ogl

Minimal WebGL Library
https://oframe.github.io/ogl/examples
3.71k stars 211 forks source link

Light not reflecting at the backside of plane #178

Closed monolithMktg closed 1 year ago

monolithMktg commented 1 year ago

I'm still learning WebGl and am loving the slim Ogl framework. However, could someone please help me understand why in this example sandbox, is the light not reflecting at the plane's backside even if I have cullFace set to null?

Link: https://codesandbox.io/s/elastic-wood-y4p98c

Thanks.

gordonnl commented 1 year ago

it's because on the back face the normal is negative, so you need to flip it. In the fragment shader, we have access to a gl_FrontFacing variable, which we can use to flip the normal accordingly.

Replace

vec3 normal = normalize(v_normal);

with

vec3 normal = mix(normalize(-v_normal), normalize(v_normal), vec3(gl_FrontFacing));

monolithMktg commented 1 year ago

Thank you so much for the quick response. I really hope to see a detailed documentation for this framework so we know all that it provides. Examples are not enough in some cases. :)