search

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.95k stars 178 forks source link

Duplicate this? #58

Open coderextreme opened 3 years ago

coderextreme commented 3 years ago

https://playcanv.as/p/wQgQBgkE/ primary equation is:

rho = A + B cos (C phi) cos (D theta)

-= spherical coordinates and animated values of A, B, C, and D. You can also think about adding offsets inside the cosines for rotations.

Sphere from blender, saved as FBX, then imported into PlayCanvas. Vertex shader does offsets from sphere. Chromatic aberration done with 3 (RGB) rays.

I don't have a ray tracing graphics card yet.

Real-time, not a video, probably very similar to various water animations, but smoother.

Space, W, A, S, D are the interface ESC to get out of capture

erichlof commented 3 years ago

Hi @coderextreme That's pretty cool! Did you code that yourself in PlayCanvas? The reason I ask is because I would like to see the shader source code if possible. But if it's something you just found on the internet, then it might take some more investigating.

At first glance, it looks like the technique used is ray marching a distance field (your equation above). The chromatic aberration effect is cool and gives the refractive material more realism.

As to whether I can implement this from just sight, I don't know. I know how to load in and sample the background HDR image. I understand the basics of ray marching distance fields. But what I don't have a grasp on is this particular math shape and how to build a distance function from it that you can sphere trace against. Also, I've never quite delved into splitting light rays into 3 separate RGB rays for chromatic aberration effects. This effect looks cool and is something that I would like to try. It could be useful for rendering soap bubbles for instance.

If you don't have the actual distance function from the shader, it might be possible to locate a similar demo on Shadertoy where you can actually see and copy the equation for this particular shape. This looks like something that you would find on Shadertoy, so if you don't have access to the PlayCanvas shader code under the hood, Shadertoy might be the only resource.

I'll wait for your response before investigating further. Thanks for your post! :-)