# Shade - WebGPU graphics

**URL:** <https://discourse.threejs.org/t/shade-webgpu-graphics/66969>\
**Category:** Showcase\
**Tags:** rendering, webgpu\
**Created:** [June 17, 2024, 10:46pm UTC](https://discourse.threejs.org/t/shade-webgpu-graphics/66969 "2024-06-17T22:46:29Z")\
**Posts on this page:** 1\
**Showing post:** 8

<div class="post-metadata">

**Author:** ![Usnul](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/usnul/32/2355_2.png) [@Usnul](https://discourse.threejs.org/u/Usnul)\
**Post date:** [June 19, 2024, 4:33pm UTC](https://discourse.threejs.org/t/shade-webgpu-graphics/66969/8 "2024-06-19T16:33:22Z")

</div>

Working on shadows. I looked into various shadow mapping techniques, including virtual shadow maps. I was originally going to go for virtual shadow maps, but after working on them for a while, I came to a realization that they are very complex and it’s difficult to avoid drawing parts of the scene multiple times. I didn’t like that, and I didn’t like the complexity involved.

For the past few days I’ve been dusting off my path tracing code from [meep](https://discourse.threejs.org/t/meep-a-game-engine/10098) when I was [working on global illumination](https://discourse.threejs.org/t/gentle-light-probing/44155) and with a little bit of effort I got ray tracing to work.

Here are a few shots with ray-traced shadows:

 ![Screenshot 2024-06-19 165918](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/c/a/cab5e76306578653a1fd708dd83b14db427aa99a.jpeg)

 ![Screenshot 2024-06-19 170037](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/6/a/6a12b49a8e7fa0bc3674c489ef537d2fa233b0a2.jpeg)

 ![Screenshot 2024-06-19 170729](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/c/f/cfd5db0ac4f8c40c826d89385fbaf63dd7ab945c.jpeg)

Here’s are a few close-ups:

 ![Screenshot 2024-06-19 171012](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/7/e/7efe97c6d32dc79f03e78f61c93c72e9b63b3442.jpeg)  
 ![Screenshot 2024-06-19 171124](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/5/9/599ace5b4e36bb4867cf2f92b8b6b2f2b6f4d150.jpeg)  
 ![Screenshot 2024-06-19 171215](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/1/d/1d6b8e26aaa4f2f3b6a9165ebf0eb3aa15dee323.jpeg)

Here’s an even closer zoom on the spider’s leg:

 ![Screenshot 2024-06-19 170909](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/1/5/15c1ef6347afbc9daacf61285daf2491c7482232.jpeg)  
 ![Screenshot 2024-06-19 170931](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/5/4/54fc59d27882f902704f7f1cb926fce3143edda3.jpeg)  
 ![Screenshot 2024-06-19 171423](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/f/f/fff515c98cd0f6d53789a3d87555870885fecc29.jpeg)

As you can see - shadows are pixel-perfect and there’s no peterpanning going on.

All in all - I’m pretty happy with the results. Performance seems to be a bit of an issue as my BVH traversal was not optimized for GPU. My path tracer was originally written for the CPU, and it shows 🙂

That said, performance is okay in most scenes. I feel this is a good approach overall, even if there is no RTX api available in WebGPU at the moment. We can get within ~20% of the dedicated API’s performance, according to some numbers I read in an Intel paper a while ago. And considering that hard shadows only require a single ray per pixel - it’s quite cheap.

I’m thinking to add SDF and ray marched shadows later on, as that should be significantly cheaper and it’s proven to work well in production as Unreal have been using that tech for a number of years now.

The goal is to offer shadowing solution that requires no tweaking and looks good, and I think I’m close to achieving that already.

### PS

For sharp-eyed of you, you’ll notice that some of the screenshots show 42 FPS, that was a software cap I introduced for prototyping, to keep my room a bit less hot.

Why 42? - why not? 🤷

---

_[View the full topic](https://discourse.threejs.org/t/shade-webgpu-graphics/66969)._