Have same lighting on both sides of a shape (translucency)?

Questions
,
1

Is there a built in way to flip normal if looking at the back side of a shape, so it’s illuminated the same way on both sides? Something based on gl_FrontFacing?

I need this to make light shine through thin objects like three leaves.

I thought there was something like THREE.SameSide but it was a dream.

1 Like
2

If the object geometry is just a plane, could this work for you:

material { transparent: !0, opacity: 0.5, side: 2 }

3

not really, besides, I don’t want to introduce transparency, I only need a semblance of it

this is the example of what I want:

I didn’t track down how it works in THREE code but here is the crux, you can switch between “same side” and “both sides” to see what I mean:

    // "both sides" lighting - THREE default
    // vec3 nrm = gl_FrontFacing ? vpn[1] : -vpn[1];

    // "same side" lighting - what I want
    vec3 nrm = vpn[1];
4

Ok, I did some digging into the code, here is the solution that does what I wanted:

const shineThrough = (mat, val = '0.5') => {
	mat.onBeforeCompile = function(shader) {
		const repl = val + ' * abs(dotNL) : abs(dotNL)';
		const new_vs = THREE.ShaderChunk.lights_lambert_vertex
		.replace(/saturate *\( *dotNL *\)/g, `(dotNL < 0.0 ? ${repl})`)
		.replace(/saturate *\( *- *dotNL *\)/g, `(dotNL > 0.0 ? ${repl})`);
		shader.vertexShader =
		shader.vertexShader.replace('#include <lights_lambert_vertex>', new_vs);
	}
};

The first argument mat is the material in question, the second val controls the fraction of the light received by the “sunny” side of the shape that will be radiated by the “shadow” side. This mimics the effect of light shinning through thin non-transparent surfaces like tree leaves.

fiddle

1 Like