issue with custom shadow on directional light

[frdsndr]

Hi guys,

Trying to setup custom shadow properties on directional light. I think these props should work (according to the documentation and the source).

<T.DirectionalLight
	{...{
		position: [3, 10, 10],
		intensity: 1,
		castShadow: true,
		shadow: {
			mapSize: [1024, 1024],
			camera: {
				left: -5,
				top: 5,
				right: 5,
				bottom: -5,
				near: 0.5,
				far: 1000
			},
			bias: 0,
			radius: 1
		}
/>

However, this results in the following error.

three.module.js:20892 Uncaught TypeError: shadow.getFrameExtents is not a function
    at WebGLShadowMap.render (three.module.js:20892:38)
    at WebGLRenderer.render (three.module.js:27878:13)
    at frameloop.js:70:26
    at tick2 (useRaf.js:8:9)

React-three-fiber has a similar/same issue: pmndrs/react-three-fiber#1093

Any ideas on how to fix this or how to set up a custom shadow for this light??

"@threlte/core": "^5.0.5",
"@threlte/extras": "^4.8.0",
"@threlte/preprocess": "^0.0.2",
"three": "^0.147.0",

[Paul-Vandell]

Hi, Working for me here with using the <Three /> component:

<script>
  let light = new DirectionalLight();
  light.shadow.mapSize.width = 1024;
  light.shadow.mapSize.height = 1024;
  light.shadow.camera.near = 0.1;
  light.shadow.camera.far = 100;
  light.shadow.camera.left = -10;
  light.shadow.camera.right = 10;
  light.shadow.camera.top = 10;
  light.shadow.camera.bottom = -10;
</script>

<Three type={light} castShadow />

[Paul-Vandell]

@frdsndr does it help you to figure out your issue ?

[frdsndr]

@Vandell63 Thanks for looking in to this and for the suggestion.

I created some Stackblitzes to demonstrate the issues more clearly.

• Here is the original problem, just to for the record: https://stackblitz.com/edit/sveltejs-kit-template-default-1u1rto?file=src/lib/Scene.svelte (Note: this results in an error)
• Here is your (Vandell63) <Three /> solution, the light works but the shadow does not: https://stackblitz.com/edit/sveltejs-kit-template-default-rxgykc?file=src/lib/Scene.svelte (Not sure whats going on here)
• Here is a working solution using a nested shadow camera. However, now I cannot create a sharp shadow somehow. 😵
  https://stackblitz.com/edit/sveltejs-kit-template-default-tpqsjz?file=src/lib/Scene.svelte

I think it has somehow to do with the shadow camera view frustrum but cannot figure out. Any suggestion are very much appreciated!

Here is the code snippet that works but displays a blurry shadow.

    <!-- THIS DOES WORK, BUT THE SHADOWS ARE TO SOFT -->
    <T.DirectionalLight castShadow position={[30, 100, 100]} >
      <T.OrthographicCamera
        attach="shadow.camera"
        left={-100}
        right={100}
        top={100}
        bottom={-100}
        near={1}
        far={10000}
      />
      <T.Vector2 attach="shadow.mapSize" args={[4196, 4196]} />

      <!-- SHARP BUT SUPER SLOW PERFORMANCE -->
      <!-- <T.Vector2 attach="shadow.mapSize" args={[40196, 40196]} /> -->
    </T.DirectionalLight>

[ixxie]

This is effectively a ThreeJS question and not so much a Threlte question. You can find discussions of various solutions by searching the topic in ThreeJS:

https://discourse.threejs.org/t/more-accurate-shadows/2222
https://discourse.threejs.org/t/how-to-increase-shadow-size-without-losing-quality/34584/3

[frdsndr]

After some more fiddling and testing, I finally found a solution:

<Canvas>
	<Ortho />
	<Lights />
	<!-- scale down all objects -->
	<T.Group scale={0.1}>
		<All My Objects />
	</T.Group>
</Canvas>

<!-- Lights -->
<T.DirectionalLight castShadow position={[3, 10, 10]} intensity={1}>
	<!-- add the `zoom` parameter -->
	<!-- set to same value as ortho cam -->
	<T.OrthographicCamera
		attach="shadow.camera"
		left={-10}
		right={10}
		top={10}
		bottom={-10}
		near={1}
		far={1000}
		zoom={200}
	/>
	<!-- 2048 resolution is now super sharp -->
	<!-- decrease zoom value for softer shadows -->
	<T.Vector2 attach="shadow.mapSize" args={[2048, 2048]} />
</T.DirectionalLight>

• I used a group to scale down all my geometry and objects.
  • now the geometry fits in the directional light shadow area (in the frustrum?)
  • but the shadows are very blurry
• add a zoom parameter to the shadow camera with the same value as the orthographic camera.
  • now the shadows are super sharp 🎉🎉🎉
  • you can soften the shadows by decreasing the zoom value

Hope it helps someone. And to thanks everyone for the suggestions