Mirror mirror...

Following the discussion about the user defined clip plane (#647), I created a ‘class’ for the mirror objects that would really simplify their usage.

Here are a few examples:

1. a simple scene with only one mirror (relevant lines are 60-63 and 139): http://jsfiddle.net/PT32b/7/
2. the same scene, but with a second mirror. Note the usage of the renderWithMirror method (line 142-143), to correctly render a mirror into another one. Currently, only one additional mirror can be rendered inside a mirror (it would probably possible to have more than one by changing the code, but that would be too slow…): http://jsfiddle.net/PT32b/5/
3. With this method, an infinite mirrors effect is possible, but with some glitches. Only the first 2 reflections are “true” reflections. The other ones are from the previous rendered frames and are not completely accurate: http://jsfiddle.net/PT32b/6/
4. Finally, the first scene with a third mirror. Because of the two mirror limitation, the reflection of the cut sphere is not correctly rendered in the other mirrors: http://jsfiddle.net/PT32b/8/

Note that you don’t have to use the FlatMirror.material member as material, you can also directly use the FlatMirror texture in your own shader, as long as you use the correct uniforms (I’ll try to make an example of that later).

You can look at the code of the class here: https://code.google.com/p/mirror-three-js/source/browse/FlatMirror.js

Before submitting a pull request, I’d like some suggestions though.

As it is now, you have to create a mirror like this: myMirror = new THREE.FlatMirror(...) by passing the renderer and the camera as parameters. Then you have to add the mirror to the scene, and assign the mirror.material member to a Mesh. And finally, in your update/render loop, you just call myMirror.render() before your main render call. The scene that is rendered in the mirror is the scene the mirror belongs to. Is it a good idea? Maybe I should try to stay consistent with the render() method of THREE.WebGLRenderer, so passing the scene (and the camera?) when rendering the mirror?

Another question: I’ve added the required uniforms and shaders in the same .js file as the FlatMirror class. Can this stay like that, or should this part separated and added to WebGLShaders.js (not sure about that, since it’s an add-on ) or FlatMirrorShaders.js maybe?

Finally, where would be the best place for FlatMirror.js? I would put it into src\extras\objects. Would that be ok? Another location?

I still have a few optimizations to do on the code, so if you have any suggestions/comments about it, I’d be glad to hear them.

[mrdoob]

https://threejs.org/examples/#webgl_mirror https://threejs.org/examples/#webgl_water

[zz85]

nice discussion… seems vertex displacement is slightly more realistic at close range because waves tends to overlap each other, at the tradeoff of more polygons. (as seen in @oosmoxiecode‎ and @brokedRobot’s examples)

from a distance, calculating reflections would seem good enough to look like a realistic ocean (approach taken by @jbouny and @jwagner)

it is also possible to archive what vertex displacement does in the fragment shader by using sphere tracing (aka raymarching)

a trade off between doing more polygons could be to use some sort of LOD or using a radial geometry as described in this gpu gem

there’s also a whole lot more research done on ocean simulating like this which has been used in Houdini and Blender.

anyways I think I’m drifting off topic already from the original mirror topic and I think I’ll stop pursuing this rabbit hole for now… would still love to see any ocean progresses any of you have!