Jump to content

How to rotate a BABYLON.Plane?


Recommended Posts



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"


Link to comment
Share on other sites

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; 




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



Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 /:

Link to comment
Share on other sites

Hi Iwaa-kun (and others)

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


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.

Link to comment
Share on other sites

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)


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.)  :o

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!  :)


Link to comment
Share on other sites

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.



Link to comment
Share on other sites

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. 


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

Link to comment
Share on other sites

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.


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!

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...