Extendable shader material with customizable lights and shadows

Resources
, ,
1

The main idea behind this ShaderMaterial wrapper is to have lights attached to the material, so it’s possible to illuminate any object with any light(s), also I wanted to have more control over shadows and experiment with different ways to create them.

The lighting for this material is based on per-pixel Lambertian diffusion plus specular highlights.

The material currently supports texture map, bump map, translucency, gamma and any number of ambient, direct and point lights and 3 shadow modes for fun.

Point lights have attenuation over distance, light shadows have 4 levels of blur and strength.

Lights can be built-in THREE lights or stand-alone JavaScript objects.

This is still a work in progress but I wanted to share a couple of scenes.

Here is one with multiple objects illuminated by a custom material and UI to play with its settings (clickable link):

boxScene

And now, when I married this material with instanced meshes, I could test it on more complex geometry, illuminating different groups of meshes with different lights (clickable link):

imeshScene

An example of material setup:


dir.userData.shadow = {
	blur: 5,
	strength: 0.9,
	tex: { w: 1000, h: 1000 },
	cam: new THREE.OrthographicCamera(-700/9, 700/9, 700/9, -700/9, 50, 300),
	lookat: dir_lookat,
};
pnt0.userData.shadow = {
	blur: 5,
	strength: 1,
	tex: { w: 1050, h: 875 },
	cam: new THREE.PerspectiveCamera(55, 1, 30, 300),
	lookat: lookAt,
};
	
...

const mat_main = cust.material('lamb', {
	uni: {
		color: { value: [1, 1, 1] },
		amb: {
			get color() { return [amb.color.r, amb.color.g, amb.color.b] },
			get intensity() { return amb.intensity },
		},
		dir: {
			get color() { return [dir.color.r, dir.color.g, dir.color.b] },
			get intensity() { return dir.intensity },
			position: [dir.position.x, dir.position.y, dir.position.z],
			lookat: dir_lookat,
			shadow: dir.userData.shadow,
		},
		pnt: [{
			get color() { return [pnt0.color.r, pnt0.color.g, pnt0.color.b] },
			get intensity() { return pnt0.userData.power },
			position: [pnt0.position.x, pnt0.position.y, pnt0.position.z],
			get decay() { return pnt0.userData.decay },
			shadow: pnt0.userData.shadow,
		},{
			get color() { return [pnt1.color.r, pnt1.color.g, pnt1.color.b] },
			get intensity() { return pnt1.userData.power },
			position: [pnt1.position.x, pnt1.position.y, pnt1.position.z],
			get decay() { return pnt1.userData.decay },
			shadow: pnt1.userData.shadow,
		}],
		specular: {
			get position() {
				const pos = camera.position;
				return [pos.x, pos.y, pos.z];
			},
			get strength() { return ui.spec.str },
			get falloff() { return ui.spec.fo },
		},
		shad_mode: { get value() { return ui.shad_mode } },
		map: ['/_v1_jsm/textures/uv.png', () => { callback('r') }, ],
	}
});
2 Likes
2

Unfortunately, I just get a black view. Edge browser, Windows 11

There’s a momentary flash where I can see your scene, but then its gone. When I adjust a couple of the sliders, I get the following warning in the browser console.

GL_INVALID_VALUE : glViewport: negative width/height

const renderRTVP = (rend, scene, camera, outputRT, vp, clear = true) => {
	const bool = !clear && rend.autoClear;
	if (bool) rend.autoClear = false;
	const vp_old = new THREE.Vector4();
	rend.getCurrentViewport(vp_old);
	rend.setRenderTarget(outputRT);
	rend.setViewport(vp);
	rend.render(scene, camera);
-->	rend.setViewport(vp_old);
	rend.setRenderTarget(null);
	if(bool) rend.autoClear = true;
};

Hope this helps. The screen shots look amazing.

3

Thanks, I’ll have a look, not sure what might cause this.

I tested these pages in Chrome and FF, Win10.

4

Ok, I fixed some problems with the viewport, so now I can see these pages open w/o error on android mobile, can you please check if it fixed it for you as well?

Also added a button to test hi DPI screens, thanks!

5

Works! Looks fantastic. Nice work

1 Like
6

UPDATE:

Added texturized point lights to turn them into spot lights and to enable artistic control over the light intensity in the cross-section.

Here is the example with 3 sample textures
textlight

texture UI controls can be found under Aperture section of the material setup (clickable link):

texlight_ui

Also put all relevant files on github:

2 Likes