user defined clip plane

I’d like to use user defined clipping planes. In openGL i would use:

glClipPlane(GL_CLIP_PLANE0, planeEq);
glEnable(GL_CLIP_PLANE0);

How can I do the same with webGL?

[Slayvin]

Hey many thanks guys!!

Your suggestions made me reconsider the problem, and I noticed that there was no ‘general’ lag, but only flickering when the near clip plane changes (the mirror position compared to the mirrored camera position).

So, you were almost there @WestLangley: it’s the matrices of the mirrored camera you need to update, not the camera itself.

Result: no more ‘lag’ : http://jsfiddle.net/slayvin/PT32b/2/ 😃

Maybe we could abstract this into it’s own object.

Yes, I’ve thought about it. It would be great to have a new THREE.mirror() that handles everything. I’ll try to code something…

[Slayvin]

I recently encountered the same problem while implementing reflective flat surfaces (aka ‘mirrors’ 😄 ) into three.js As far as I know, you can not have user-defined clipping planes with WebGL, at least not with the ‘simple’ openGL way you described. The trick is to use the “Oblique View Frustum” method, which is explained in this paper: http://www.terathon.com/lengyel/Lengyel-Oblique.pdf The purpose of this method is to replace the near clip plane of your mirrored camera frustum by the plane defined by the reflective surface. There is even some source code provided (in C++ though): http://www.terathon.com/code/oblique.html

I successfully ported that method in three.js and here is a sample scene to show this live: http://jsfiddle.net/slayvin/PT32b/

The only remaining issue is that the renderTarget is rendered a frame behind, and I have no clue why! This causes some flickering when the camera moves too fast and when the mirror is going through other objects.

Any idea on how to fix this? Do I need to implement a kind of multi-buffering method, or is it simply because I don’t udpdate the camera matrix after modifying the frustum? If so, how can I do that?