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

Some about material question #45

Open RenderTool opened 4 years ago

RenderTool commented 4 years ago

image Hello,I'm sorry to disturb you again. I'm really interested in your ray tracing project. Here's my problem: when I change your roughness or metal in HDRI environment.html , It doesn't seem to work . 您好,很抱歉再次打扰到您,我对你的光线追踪项目实在是太感兴趣了。当发现你的HDRI_Environment.html中粗糙度、金属似乎不起作用.

RenderTool commented 4 years ago

https://neil3d.github.io/assets/pdf/s2013_pbs_epic_notes_v2.pdf

erichlof commented 4 years ago

@q750831855 Hello, apologies for my late reply. Yes that code that you are using is sort of 'dead code' that was just lying around in the HDRI_Environment.js file. Although I do use it briefly when loading in the model data, it never actually gets sent to the GPU. The real data that gets sent to the GPU is linked with the GUI, which is Material type (either a 2,3, or 4 corresponding to metal, glass, or clear-coat plastic) and Material Color (which is three rgb floats, 0.0-1.0 range for each color channel).
I hadn't really set up this demo to be used with the roughness parameter - sorry for not clarifying that in the code comments somewhere.
I will try and add a roughness slider to the GUI panel, and then I will add a real roughness uniform that gets sent to the GPU so you can change and view the roughness results in real time.

Hope I have clarified why you were having the issue. I'll let you know when I have something working. -Erich

erichlof commented 4 years ago

@q750831855 Hello again, I am happy to report that I have successfully added support for a roughness parameter on the HDRI_Environment demo! Check it out: HDRI_Demo

Thank you for bringing this issue to my attention. Not only did I simply add a roughness slider to the demo, I fundamentally changed how the three.js path tracer handles different roughness settings so as to minimize those pesky fireflies (random bright pixels of when the a ray accidentally hits the sun, on top of a darker color material - very distracting).
So because you have inspired me to work on this feature, everyone benefits because I ended up having to improve the light transport for rough materials!

You should be able to learn how I added the roughness support in the matching .js and .glsl files for this HDRI demo. In your code editor, just search for the word 'rough' throughout my updated source code and it should show all the stuff I added to make this work. If you have any further questions, feel free to ask here on this issue.

Thanks again and enjoy! -Erich

vinkovsky commented 2 years ago

Hello @erichlof! Is it possible to use the model with all the textures from the BVH_Animated_Model demo in the HDRI Environment demo?

vinkovsky commented 2 years ago

It would also be nice to have a demo where you can dynamically change the textures on the models and change their intensity in a certain range.

erichlof commented 2 years ago

Hello @vinkovsky !

Sorry for the late reply. Yes it is possible to have the Damaged Helmet glTF model (with all of its PBR textures) placed in a scene with an HDR as the background and lighting.

Pretty soon, I might make a demo where you can load a couple of different glTF models with the GUI menu picker. Also, I would like the backgrounds to be able to change with another menu item picker, for maybe 5 different HDR background choices.

About the dynamic textures for models, now that is a little more tricky. It's not impossible (many professional rendering packages can dynamically change textures when you click on a part of the model with your mouse). But it would require a lot of supporting JS code, just for that one extra feature. Some type of material picking at the triangle level would need to happen, as well as a system to load in different textures on the fly, and then map them correctly to the model's UV coordinates.

Handling material and texture loading for 3D models is one of my weak areas of programming. I have mainly been focusing on how to correctly display and path trace the model and its different types of materials in the path tracing shader code, - after it has been already loaded. I have a pretty good grasp of the path tracing side of things, but not so much on the CPU JS loading and picking/replacing side of things for models and swappable materials. Sorry, hope this makes sense.

But thanks for the suggestions- I'll see about that HDR with the Animated BVH glTF model demo you requested. 🙂