How to rotate a BABYLON.Plane?

[Iwaa-kun]

Hi,

 

I have meshes that I dynamically adds on a scene. Among these meshes, there are mirrors.
I used this tutorial to make reflections and it works very well: https://github.com/BabylonJS/Babylon.js/wiki/Advanced-Texturing
But when I start to rotate my mesh, the reflection does not follow the rotation.

How to make the Plane follows the rotation of the mesh?

 

 

I attached an example of what I have:
I have several mirrors and 1 with a- 45degree angle (-0.785 radian). There are no differences in the reflections.

 

Here is the same problem on the playground: http://www.babylonjs-playground.com/#1UETWM

The reflection of "plane2" === The reflection of "plane"

And "plane2" is a clone of "plane"

[Dad72]

You must create a clone of your material and change the direction of reflection. You could well reflect for vertical plane and one for horizontal plane materials.

 

//Creation of a mirror material Horizontal (clone)var mirrorMaterialHorizontal = mirrorMaterialVertical.clone("texture5");//change of direction of reflectionmirrorMaterialHorizontal.reflectionTexture.mirrorPlane = new BABYLON.Plane(0, 0, -1.0, -10.0);

var plane2 = plane.clone("plan2");plane2.rotate(BABYLON.Axis.X, 1.5, BABYLON.Space.LOCAL);plane2.translate(BABYLON.Axis.Y, -10, BABYLON.Space.LOCAL);//The new material is added to the plan cloneplane2.material = mirrorMaterialHorizontal; 

PLayground:

http://www.babylonjs-playground.com/#1UETWM#1

 

PS: new BABYLON.Vector3.Zero() needs no "new" behind

 

 

[Iwaa-kun]

Thank you for the help but I think I picked a bad example with a sphere ^^'

 

I made another playground with a box: http://www.babylonjs-playground.com/#1UETWM#3

Here we see the reflection is distorted on the mirrors that are on the sides. ( For me, should have been more like that: http://www.babylonjs-playground.com/#1UETWM#4 but I can be wrong )

Of course, this is because the parameters of BABYLON.Plane(a, b, c, d) are not good.

 

What I really wanted to know was if there was a way to calculate a, b and c.

In fact, the user can rotate the mirrors along the axis he wants in my final application. So I can not predict all combinations for a, b and c without calculating them.

[RaananW]

I was always wondering as well what the parameters of the plane should be. I could never find any documentation about that. Can anyone explain that?

 

Regarding the distortion, I think this is more influenced by the mirror "resolution" (size) you chose (512). Try 1024, it will look better.

[GameMonetize]

A good idea could be to use BABYLON.PLane.FromPoints(p1, p2, p3) to get a plane and then extract (a, b, c, d)

[Iwaa-kun]

There is also a method BABYLON.Plane.transform(transformation) but whatever I do, it has no effect on the reflection.

 

 

A good idea could be to use BABYLON.PLane.FromPoints(p1, p2, p3) to get a plane and then extract (a, b, c, d)

I have a result when I do not have a rotation because it is easy. It's a little more difficult when there are transformations (scale, translation, rotation).

So I looked for a way to get the coordinates of points using the method BABYLON.Mesh.getVerticesData("position"). But this method returns the position of the points before the transformation, which is not great /:

[Wingnut]

Hi Iwaa-kun (and others)

   Iwaa-kun... I have been traveling with you... in your experiment...

http://playground.babylonjs.com/#K4R1M

I like my camera facing +z by default... just a personal preference.  Thus, this demo is scene-rotated a bit different, and I put angled mirrors on the sides, but not on the top and bottom. Other than those differences, it is the same scene.  And, I have the same problems as you.  Right now I am working on plane4 which is my left-side plane.  I get the vertex array for plane4... in line 92, but, its not transformed.  (I agree with you completely.)  

My demo has also shut off the light and is using emissiveColors on the materials, instead.  Later, I will change that back to using point lights, because your demo looked really cool with those two point lights you had.

I think the transform problem happens because we are using clones, and when we get the vertex data, I think we are getting data from the father of the clones (plane1) which is the bottom plane in my demo.

After I get the array of vertex points (line 92), I create the plane in line 98 (using the fromArray method). Then in line 102... I attempt to transform the BABYLON.plane, using the worldMatrix of plane4.  I don't know if a "worldMatrix" is a proper thing to transform a BABYLON.plane with.  I'm not very experienced with transforms.

If you pan the camera far right, you will see the red box reflection in plane4 (left plane) but it's not correct.  Plane5 (the right side) is more correct, but I got its a,b,c values... by guessing and "trial and error" (not a very good policy). 

My top, bottom, and back planes seem to be reflecting correctly, but they are not angled so they are easier. 

I have not tried this yet, but I would guess that IF we did NOT use clones for the planes,  we would get proper vertex data and then we could make better BABYLON.planes from that data.  Iwaa-kun, feel free to use my demo and its code in ANY way that could help.  Report your discoveries in this thread, please, and I will report my discoveries here, too.

We are near to getting this correct.  I really like your "mirror fun" demo, and that's why I needed to do experimenting with it and see if I could help-with the problem (and learn about 45 degree mirrors).  I want to see 45 degree angle mirrors, or ANY angle mirrors, work correctly and be easy to use for myself and others. 

Notice I saved many versions of your previous playground.  http://playground.babylonjs.com/#1UETWM#11  All the way up to version 11 now.  Sorry about that.  I should have started my own URL instead of saving so many versions of yours.    Oh well, you can save many versions of mine, if you wish, Iwaa-kun.

Thanks everyone.

[Wingnut]

Whelp, I made another one... without cloned mesh-planes... and it looks and works pretty well.  But the change from cloned mesh-planes to 'created' mesh-planes... made no difference in the trouble of "transforming the BABYLON.Plane".  (that sounds like something that happens during an old west cattle drive)

http://playground.babylonjs.com/#29NQNG

But oh my goodness, what a bunch of BS I provided for myself.  I could NOT transform the BABYLON.Plane.  I think I tried everything plus 7 more things.  Most of the hell was with the 45 degree mirrors, of course.  So, I manually plotted 3 green boxes at 3 corners of the left and right mirrors.  I put the xyx coords of those 3 boxes in an array called 'pile' (once for plane4, and again later for plane5). 

Then I made the BABYLON.Plane from values in 'pile'.  Using the right mirror (plane 5) as an example:

mirrorMaterial5.reflectionTexture.mirrorPlane = new BABYLON.Plane.FromPoints(	new BABYLON.Vector3(pile[0], pile[1], pile[2]),  // location of a green box	new BABYLON.Vector3(pile[3], pile[4], pile[5]),  // location of a green box	new BABYLON.Vector3(pile[6], pile[7], pile[8])  // location of a green box);

Those three Vector3 parameters... are the BABYLON.Plane... a, b, and c values. 

For plane5, the points were placed into the 'pile' array in counter-clockwise order, so the parameters above... needed to be in clockwise order.  Yep, plotting-order applies to BABYLON.Plane-making.  It affects the plane's 'normal'.  (It affects the programmer's 'normal', too.) 

Then I guessed at the 'd' values, using my eyes. Scientific, eh?

mirrorMaterial5.reflectionTexture.mirrorPlane.d = -35;

Change the angle of either side mirror, and it all goes to hell, instantly.  (Because I manually plotted the coordinates to make the reflection plane).

But, it's all working.  The "depth into the mirror" of the box reflection... looks about right... on all 5 mirrors. 

It's a crappy work-around, and it only took two days of continuous work, PLUS Iwaa-kun's early work! 

 

[Iwaa-kun]

I think I found something interesting and perfectly working the way I want.

To make it work, it was necessary to know 2 methods:

BABYLON.Mesh.computeWorldMatrix(force) returns the (right?) Matrix object of the mesh. I tried getPivotMatrix(), getWorldMatrix(), ... but they did not affect the second method.

BABYLON.Vector3.TransformCoordinatesToRef(vector3src, matrix, vector3dest) returns the transformed point through the matrix.

To find how to do, I had to study the source code of the method BABYLON.VertexData.transform()

Anyway, it works for me.

http://playground.babylonjs.com/#2EP7UB

http://playground.babylonjs.com/#27K5IR

[Wingnut]

You rock, Iwaa-kun!  Good find, and thanks for the demos showing your discovery!  Way good!

AND, you changed it to FOR-loops, so it is easy to add LOTS of mirrors!  Yay!   Fun ahead!  Thanks again!

I tried rotating the angled planes to see if the reflection planes rotated also.  But noooo. 

http://playground.babylonjs.com/#N5HVM

Maybe we can ask the BJS authors to put a .parent property on BABYLON.Plane     This would sure make our experiments much easier.  We would build our BABYLON.Plane with (0,0,0,0)... and then set its .parent to our mesh-plane, and boom, done.  The B.Plane would then track its parent, perfectly, automatically.  Yum. (with an optional .parentOffset property so we could control reflection depth.)  Double yum! 

And maybe a .reflectionDepthScale somewhere, to make "Objects are closer than they appear" mirror, and its opposite. 

Yeah, .parent!  But BABYLON.Plane isn't really a mesh, is it?  It's more of a concept.  heh

[Wingnut]

Ahh, here we go.  I used Iwaa-kun's getPointsTranformed() function... in the animate function... to make new BABYLON.Planes for the two animated reflection planes... every frame.  Just in case somebody still has interest in this answered thread, here's a demo... animated mirrors that reflect correctly.

http://playground.babylonjs.com/#18LRHP

Sorry for hijacking your thread, Iwaa-kun, but this was interesting to me, and informative for others (maybe).  So, I wanted to keep fleshing this subject until my nipples got properly erect.  Animated angled mirrors... gotta love it.  Not all that easy to accomplish.  Party on!