martinrenou / threejs-caustics Goto Github PK

TLDR: What could I be missing in my attempts to rotate threejs-caustics from it's Z-up system into a ThreeJS scene using the default Y-up system?

I'm building an underwater scene and wanted to add caustics to the floor. This incredible project seemed like the perfect solution!

I managed to convert this project to Typescript, separate everything into it's own files/folders, and add a series of controls to manupulate the uniforms / environment, and increase the size of the caustics:

Problem is- when added to another ThreeJS scene, I noticed that everything was rotated by 90°. It appears the scene is using a Z-up system instead of a Y-up system?

I've been converting as many things as I can find related to the Z axis to the Y axis, from the lightProjection camera and WaterSimulation._camera to references within each shader. However, I can't seem to get anything other than this:

This is essentially the same result I get if I open threejs-caustics and add scene.rotateX(-Math.PI / 2)

I'm on day 3 of trying to figure this out so I figured it couldn't hurt to try to ask for a bit of advice 😅. Either way, you've done incredible work on this project and I appreciate your generosity in sharing it with us!!

After some swimming pool observations I saw that there was visible chromatic aberration in real-life caustics. This might be tricky to implement though.

When it comes to screen space refraction, Unity seems to be fading the refraction effect on the edges of the screen, see https://docs.unity3d.com/Packages/[email protected]/manual/Override-Screen-Space-Refraction.html.

If I understand correctly, this would reduce the issue that appears in the following screenshot:

As suggested by someone on Twitter, we could use hierarchical env maps in order to speed up the caustics computation. This would reduce the search space for the intersection and might increase the precision while increasing the performances.

We should also render the envmaps from the POV of the refracted rays (taking the assumption that the water is completely planar) so that the performances don't depend on the light incidence anymore.

Hello Martin!

We have just spoken on Twitter. Right now I have a simple scene in aframe, the problem is that I cannot increase the water area to cover all the plane, I tried different things but without success:

Let me know if you need more information and thanks in advance!

Around 20% of light is absorbed per linear meter of water, so the caustics intensity should be less important in deep water.