erichlof / THREE.js-PathTracing-Renderer

Real-time PathTracing with global illumination and progressive rendering, all on top of the Three.js WebGL framework. Click here for Live Demo: https://erichlof.github.io/THREE.js-PathTracing-Renderer/Geometry_Showcase.html
Creative Commons Zero v1.0 Universal
1.88k stars 171 forks source link

Shadow Catcher #77

Open nikail23 opened 1 year ago

nikail23 commented 1 year ago

Hi @erichlof! I'm interested in creating photorealistic picture of 3d scene. You can see on the picture, that i have scene with background picture of room, light point on the window and full transparent walls with Shadow Material. Is it possible to render in your library this walls as shadow catcher? (render only shadow without wall like Shadow Material in ThreeJS). And also i am not a specialist with 3d graphic, but i need to learn it for my project :) So sorry, if i described something wrong. image

erichlof commented 1 year ago

Hello @nikail23 !

Unfortunately at the moment, my renderer does not support loading of arbitrary scenes with different objects. I have been successful with loading and path tracing just 1 glTF model with 1 material that wraps around the entire model. But loading in a scene with different components (like furniture, walls, doors, etc), each with their own transform and each with their own materials, is still a work in progress.

If you would like to stay within the three.js library, maybe this would work?

https://threejs.org/examples/?q=shadow#webgl_shadowmap_progressive

I think this is pretty close to what you are wanting- which is a way to render accurate, soft shadows, and then save them to a texture which can be applied later to the floor, walls, etc - which makes a dark shadow spot on the shadow catcher surface.

This is closely related to full light-mapping, which is usually found in 3D engines like Unity and Unreal. Not only do they ray trace the shadows and save those into textures, they also bounce around the rays a couple of times to gather colorful global illumination (diffuse reflections or color bleeding between materials), which is then also saved to textures and applied to the floors, walls, etc of the room. I think there may be a three .js full light-mapper out there, but I can't recall where it is or what it was called.

Sorry I couldn't be of more help - shadow catching and light mapping of arbitrary scenes requires a lot of planning, infrastructure, and usually more than 1 person on the team. Hope you find a solution that works for your project. If you do end up locating a solution, please post back here with a link. I would appreciate that because it would be a resource for those asking about baked lighting and light mapping utilities. 🙂

-Erich