martinrenou / threejs-caustics Goto Github PK
View Code? Open in Web Editor NEWCaustics computation using ThreeJS
License: BSD 3-Clause "New" or "Revised" License
Caustics computation using ThreeJS
License: BSD 3-Clause "New" or "Revised" License
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.
Around 20% of light is absorbed per linear meter of water, so the caustics intensity should be less important in deep water.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.