Hello there!
I am reading a lot about cube mapping since yesterday. My plan is to make reflective/refractive water using dynamic cube mapping. For this I use a THREE.CubeCamera and a THREE.WebGLCubeRenderTarget to generate the dynamic cube texture.
My problem is that I am getting a lot of distortion, as you can see in the following screenshot (I am only doing refraction for now):
I could not find techniques for reducing this distortion online, can anyone point me in the right direction?
On a side note, one could tell me to use planar reflections for this particular scene, instead of cube mapping. The thing is I would like to have a solution that works for trickier water meshes as well, for meshes that cannot be approximated to planes.
Another question: Is cube mapping a good approach for this use case? Is there a better approach than cube mapping or planar reflection?
TBH, I have never seen an environment map used for such a water effect. Can you share a reference where this approach is promoted?
A similar water effect (real-time reflective and refractive) is available in the repository:
https://threejs.org/examples/webgl_water
It uses Reflector and Refractor to provide the reflection and refraction maps for the final water fragment shader.
TBH, I have never seen an environment map used for such a water effect. Can you share a reference where this approach is promoted?
I actually did not see it promoted anywhere. I just thought it would be a nice solution for computing and combining reflection and refraction on the water surface. Although the cube mapping seems to be working well when it comes to reflecting/refracting objects at an “infinite” distance from the reflective/refractive object, which is not actually my case.
Thanks, it was part of my todo-list to check the implementations of those Reflector/Refractor classes. Doesn’t it use environment mapping internally? I don’t really see how it can work otherwise (still learning all those techniques).
No. They use a special virtual camera and render from a certain viewpoint the scene. The resulting render target is then applied to the surface via projective texture mapping and processed (e.g. distorted) in some way. It’s the default approach for rendering flat reflective or refractive surfaces. You should find plenty of resources about this via google.
Yeah that’s what I feared.
It’s basically a similar approach as for planar mirrors, right? This approach is fine when the water can be approximated to a plane. This is the case for the toy scene I showed, but not the case in my “bigger” use-case where the water can be more complicated (with water droplets, huge waves etc.).
I was kind-of hoping there would be a more general solution for reflective/refractive objects. Thanks for your answers!
If you find a resource that implements real-time reflections/refractors for such 3D water effects, feel free to share it in this topic. I’m interested, too 
.
1 Like
For the record, I went for the solution detailed here: https://developer.nvidia.com/gpugems/gpugems2/part-ii-shading-lighting-and-shadows/chapter-19-generic-refraction-simulation
It is not physically correct which disappoints me a bit, but it’s easy to implement and not very performance consuming. I suppose that’s what the Refactor class does in ThreeJS.
