The Wingnut Chronicles

Recommended Posts

Please read post #82 and #83 in this thread.  Already tried.  And YES... not so easy.  :)  Wingy goes to sleep crying. :(


quat.toEulerAngles() might be bug.  From post #82...


eval:  BABYLON.Quaternion.RotationYawPitchRoll(0, Math.PI, 0).toEulerAngles()

-->      ({x:0, y:0, z:3.141592653589793})


I think bug.  I think X and Z need swap.  Pitch of +3.14 rotation is around X axis.  Output shows Z axis.


More problems, though.


Yaw flyer 45 degrees to right.  ie. yaw flyer +y.  quat.toEulerAngles() = (0, .707, 0)  (correct)


THEN... to position/translate flyer +x local...  need force vector of (this.transforce/2, 0, -this.transforce/2)


ie. Must move flyer same amount +x and -z    ...  south-east


How to derive or calculate?


Try simple 'add'.  forcevec.add(quat.toEulerAngles()) = approx (this.transforce, .707, 0)   Flyer goes angle up.  Incorrect.  Flyer needs to go southeast.  (this.transforce/2, 0, -this.transforce/2).  'add' is wrong.  What math needed?


Maybe someone smarter than I... could fix this project.  :)  I think that would be faster and easier.  :/  Thanks.

Share this post

Link to post
Share on other sites

Cool.  I can swap X/Z numbers myself for now... no problem.  I still need some math to make toEulerAngles output into correct force vector.  Its difficult.  I don't know what to do.  Its some math formula.  I'll keep trying.  A bug in toEulerAngles() is not my big problem.  Converting toEulerAngles to proper forcevec is the big problem.  :)  Thanks for your interest and work, DK.  I/we will beat this... someday. 


Congratulations on your successful Developer Days!  Welcome home/back.  i hope you had fun.

Share this post

Link to post
Share on other sites

Do you ever think about 'pitch'?  It is strange. Pitch-UP is a -x rotation, yes?  And pitch-DOWN is a +x rotation, yes?  That seems strange to me.  :)  *shrug*.  I think we will see much confusion from users about this... in the future.  :)  Part of the fun.

Share this post

Link to post
Share on other sites

Hi everyone


Here's the latest flyer...  (zip there too)  This runs BJS 1.9.0.


There is a blue label on the top GUI...  X/Z Swapped Q.tEA Rot:


That is the quaternion.toEulerAngles() with the X and Z numbers swapped/switched.


The swap is temporary... awaiting some tweaks to .toEulerAngles(). The swap and numbers printing is done in a function called updateffinfo() that is located in flyer21.htm.  (in case anyone cares)


DK:  Maybe I see one other bug with toEulerAngles().  The SIGN on Z rotation value... needs change.  Push Rotation +Z button... outputs -Z numbers.


And, as stated many times... no matter how the flyer is currently rotated... no matter what toEulerAngle numbers...  I'd love to have the rotation vector3 for the white rods.  I need math converter function...  eulerAnglesToWhiteRodAngles()  hehe.  Thanks for any help.


Is everyone as tired of seeing this BJS scene... as I am?  I bet so.  :)  But soon, Lunar Lander and Space Taxi... maybe.

Share this post

Link to post
Share on other sites

Wow, I have been reading the thread...


...and holy cow, you guys have been working hard on this situation.  I also did some internet reading about q.toEulerAngles... and it is no easy task, apparently.  I wish I could help, and/or find a magic solution.  It looks like it has been a struggle for many years and in many programming languages.  Maybe .getRotationInEuler(some mesh) would actually be easier, and that would end the need for .toEulerAngles().  But I am not educated in this at all.  Good luck to everyone who is working on this... and thanks... from me, (and likely from ALL of us).

Share this post

Link to post
Share on other sites

Oh... I think I understand the new rotate function.


        // Old way...


        some_mesh.rotationQuaternion = BABYLON.Quaternion.RotationYawPitchRoll(0, 0, 0);

        // New way in BJS 1.9.0 - allows changing quaternion anytime and anyWAY... without YawPitchRoll crap...


        some_mesh.rotate(BABYLON.Axis.X, 0, BABYLON.Space.LOCAL);
        some_mesh.rotate(BABYLON.Axis.Y, 0, BABYLON.Space.LOCAL);
        some_mesh.rotate(BABYLON.Axis.Z, 0, BABYLON.Space.LOCAL);

More granularity, less confusion... yet still quaternion... so cannon.js physics-ready.  Yes?  Interesting!  Nice feature!  I assume there is no "W". post #3


AlbertoBonn had same problem as I did earlier.  Objects changing rotation when .setPhysicsState.  I hope Alberto got his project working. 


Maybe... on the webpage... ... change the line to...



The initial position and rotation (using mesh.rotationQuaternion property) of the mesh are used to define the position and rotation of the impostors.  With BabylonJS 1.9.0 and newer, instead of using the mesh.rotationQuaternion property, you may use the discrete method of setting the rotation of a mesh...


        mesh.rotate(BABYLON.Axis.X, 0, BABYLON.Space.LOCAL);
        mesh.rotate(BABYLON.Axis.Y, 0, BABYLON.Space.LOCAL);
        mesh.rotate(BABYLON.Axis.Z, 0, BABYLON.Space.LOCAL);


Set any wanted mesh rotation(s) using these methods BEFORE using mesh.setPhysicsState.


I don't know.  Something like that.  That MIGHT keep people from asking "Why did my object lose rotation?" over and over.  Maybe I should start working on the BJS physics tutorial, huh?  :)  I don't know if I am qualified.

Share this post

Link to post
Share on other sites

Thanks!  I was just asking that to myself.  "Does mesh.rotate actually install a quaternion?"  You must be psychic.  :)


I was wrong when I said "anytime", though.  Quaternions do not like to be changed, it seems.  I tried doing some mesh.rotate from the console input, and no changes allowed.  i have SO SO SO much to learn.  The new mesh.rotate() should work from console eval, yes?  (live setting)  (pokes)  (Did you ever program in BASIC?) ;)


So if a user makes a box, sets a .rotationQuaternion on the box... then they cannot rotate the box ever again... not with .rotate... and not with setting .rotationQuaternion.x, .y, .z, or .w?  I have been doing many 'pokes' (sets) on the flyer's parent object... trying ANY rotation (from the console command line).  i can't get it to re-rotate from initial setting at all... not even with a fresh full command...


go.flyfr.handle.rotationQuaternion = BABYLON.Quaternion.RotationYawPitchRoll(Math.PI/2, 0, 0)


Once that inital value is set... it seems locked (other than my applyImpulse rotating).


Does that seem correct?  Users cannot manually rotate a mesh once it has a quaternion generated?  If so, I think that will cause a user uproar/revolt.  :)

Share this post

Link to post
Share on other sites

Hi gang!  Here is flyer 22 ... (zip there too)


This time, I put the flyer inside the physics playground room... to see if the parent box would bounce off-of the walls.  It fails.


Physics setup....


go.scene.enablePhysics(new BABYLON.Vector3(0, 0, 0));

go.flyfr.handle.rotationQuaternion = BABYLON.Quaternion.RotationYawPitchRoll(0, 0, 0);

go.flyfr.handle.setPhysicsState({ impostor: BABYLON.PhysicsEngine.BoxImpostor, mass: 4, friction: 0.0, restitution: 2 });

go.flyfr.handle.checkCollisions = true;  // not needed but set anyway.  Tested both ways.


Parent box (the flyer.handle) SHOULD bounce off the walls if I have everything correct.  But who knows if my brain works anymore.  :)


Also set the physics room walls...






I do not see the seams where the walls connect, outside or inside, so I think that is not working.  I use a standard material on them.  I add the material before I call .convertToFlatShadedMesh().  Not sure if that is the correct way.


New random-colored arrow indicates the quat.toEulerAngles() for the parent box... just for fun.


And if all this bad news is not enough, my town is expecting 1 foot of new snow tonight.  OUCH.  THANK GOD for snow blowers!  :)


Oh well... we PARTY ON just the same, right?!  I hope everyone is well!

Share this post

Link to post
Share on other sites

Hi Alex!  Welcome aboard!  Pardon my 'jumping-in".  I love to talk.  :)  I am sure deltakosh will answer your questions. He is an excellent guy (and a friggin' genius) and works very hard out of pure love of the project.  So do many others nearby.  ALL the people around here... are excellent. 


BabylonJS is a beautiful framework, and the things currently being worked-on in this thread... are actually about cannon.js... the physics system add-on used by BabylonJS.  It has some... ahem... 'requirements' that can be a bit annoying.  It was added real recently, and we are (I am) just learning about its capabilities and nuances.  Cannon.js is very small compared to all other physics systems, and, its also very efficient.


In my opinion, you are NOT on thin ice with BabylonJS, though, if you don't mind me saying so.  BabylonJS was made to be fast and easy.  Where many webGL frameworks require 3-5 steps to get a mesh added, a light turned-on, a particle system activated, a camera installed...  BabylonJS does it in 1-2 steps.  All you need to do is fly a camera around in BabylonJS and compare it to any other framework. It will not take long for you to see how FAST and SMOOTH things are... when using the BJS framework.  AND EASY! 


You have flown the flyer I made, yes?  Do you see any other framework doing a flying machine that is near as smooth, physics and all?  No.  Because they can't.  Other frameworks cannot pull it off.  That flyer is using (apply)impulse... a physics thing.  Its thrusters are as close to real spacecraft thrusters as you will find in any webGL project... and that happens because of the speed and ease of BabylonJS.  I am not an aerospace engineer or near, nor an expert at webGL, but even someone as newbie and stupid as I... has been able to build a very accurate and sensitive simulated spacecraft that NASA folks would be impressed-with.  It was easy!


The rough water you hear-of in this thread... is highly-advanced often-physics stuff.  Physics engines are still maturing, and Javascript is not perfectly suited for physics.  I could easily 'fake' the spacecraft flying using BabylonJS built-in interpolation (LERP) and keyframe animation... and it would make a perfectly fine spacecraft game.  But instead, I chose to use the cannon.js physics engine... which is a third party add-on... and I try things with IT... that are truly envelope-pushing and brand new.  I ask the world of it and IT has limitations that the BabylonJS team helps me work-around.  We are blazing new trails... and we have a leader that listens very closely to what the users want, and/or tries to implement it, or show us the ways it can be done.  BabylonJS works great.  If anything, its webGL that is the log jam.  WebGL is still maturing and changing, and so are the browsers that honor it.


I've been around the block testing frameworks, and you just won't find a sleeker and easier framework than BabylonJS... not even close.  Can you take over the world with BabylonJS, cannon.js, and webGL?  No.  Can you perform what seems to be beautiful miracles... in a few lines of Javascript?  Absolutely yes.  I highly suggest sticking with BabylonJS... not just for your thesis... but for a whole lot of fun and usefulness far beyond that.  Keep in mind the separate pieces.  Browsers/WebGL - a little limited.  Cannon.js - pretty nice (except for its grumpy quaternion rotations)... but VERY SMALL and REAL FAST.  BabylonJS framework - superb and still flowering nicely... not bogged in the mud whatsoever. 


BabylonJS is slim, fresh and evolving.  WebGL and physics engines are also evolving.  We are in the early years of web 3D, and this 'evolution' is all quite wonderful and expected.  Its a brave new world and you are going to have a total blast, Alex.  Again, welcome aboard. Help us write docs and do demos... as we are still learning just how much power and fun is really here.  It is a HUGE frontier, and we are just beginning to explore it.  There are over a million experiments yet to be tried, and BabylonJS will not be the thing standing in the way.  It is the OTHER limiting factors that will, like the speed of javascript and the gazillion calculations needed to operate a physics engine such as Cannon.js.


There, your thesis is done, Alex.  haha.

Share this post

Link to post
Share on other sites

Hi dk!  Um, I am using the same physics walls that you made for your physics demo. The 'playground' as you called them.  :)


I just resized them and took out the floor.


From flyer22.htm source...


var physics_init = function() {

// DK's Playground
var ground = BABYLON.Mesh.CreateBox("Ground", 1, go.scene);
ground.scaling = new BABYLON.Vector3(80, 1, 80);
ground.position.y = 15.0;
ground.checkCollisions = true;
var border0 = BABYLON.Mesh.CreateBox("border0", 1, go.scene);
border0.scaling = new BABYLON.Vector3(1, 30, 80);
border0.position.y = 10.0;
border0.position.x = -40;
border0.checkCollisions = true;

var border1 = BABYLON.Mesh.CreateBox("border1", 1, go.scene);
border1.scaling = new BABYLON.Vector3(1, 30, 80);
border1.position.y = 10.0;
border1.position.x = 40;
border1.checkCollisions = true;

var border2 = BABYLON.Mesh.CreateBox("border2", 1, go.scene);
border2.scaling = new BABYLON.Vector3(80, 30, 1);
border2.position.y = 10.0;
border2.position.z = 40;
border2.checkCollisions = true;

var border3 = BABYLON.Mesh.CreateBox("border3", 1, go.scene);
border3.scaling = new BABYLON.Vector3(80, 30, 1);
border3.position.y = 10.0;
border3.position.z = -40;
border3.checkCollisions = true;

var groundMat = new BABYLON.StandardMaterial("groundMat", go.scene);
groundMat.diffuseColor = new BABYLON.Color3(0.4, 0.1, 0.1);
groundMat.specularColor = new BABYLON.Color3(0.5, 0.5, 0.5);
// groundMat.emissiveColor = new BABYLON.Color3(0.5, 0.2, 0.2);
// ground.material = groundMat;
border0.material = groundMat;
border1.material = groundMat;
border2.material = groundMat;
border3.material = groundMat;
// ground.receiveShadows = false;


    go.scene.enablePhysics(new BABYLON.Vector3(0, 0, 0));

    go.flyfr.handle.rotationQuaternion = BABYLON.Quaternion.RotationYawPitchRoll(0, 0, 0);

    go.flyfr.handle.setPhysicsState({ impostor: BABYLON.PhysicsEngine.BoxImpostor, mass: 4, friction: 0.0, restitution: 2 });

    go.flyfr.handle.checkCollisions = true;

    return 1;



I could be making some mistakes, yet.  That was my first attempt, and I did not get time to troubleshoot.


As for flat shading... I will believe what you say.  I expected to see a line/seam (and some color change) where the walls come together.  I need to test this further, too.  Do you have a demo for flat shading?  Maybe a sphere?  We should be able to see a slightly different color on each facet/face of the sphere material... if flat shading is working correctly, yes?


See the line where the walls connect?


No line there.  Maybe because I use a hemisphericLight?  (I also use one directionalLight).  *shrug*


I need to do more tests... I could be making a mistake.  Thanks for the reply, DK.

Share this post

Link to post
Share on other sites

Ya know what?  I don't either!  hehe.  THANKS DK!  You are just the best!  I am sometimes not very intelligent.


And thanks for the info on the flat shading!


Ok kids... here is flyer 23... (zip too)


YAY, the center parent bounces off the walls!  Later, the parent will be the same size as the entire flyer, and invisible.  Not yet, though.  HOLD DOWN the position +X button, and slam that puppy into the wall!  YAY!!!


(Do not try this at home with your car... in your garage.)  :)


Experimenters... remember to set scene.enablePhysics... BEFORE doing any mesh.setPhysicsState.  I make THAT mistake sometimes, too.  :o


Restitution (bounce amount) might be a bit high yet... but... YAY!!!  Thanks again, DK!!  COOOOOOL!

Share this post

Link to post
Share on other sites

Hi gang.  I am trying to test/answer... (mirroring a video texture) and... hmm... I cannot get video texture to show picture at all.  Using BJS 1.9.0 and FF21...


var tv = BABYLON.Mesh.CreatePlane("tv", 5, scene);

tv.material = new BABYLON.StandardMaterial("tv_mat", scene);

tv.material.diffuseTexture = new BABYLON.VideoTexture("video", ["textures/tvshow.mp4"], 256, scene, true);


I hear the sound from the video file.... but no picture... just black plane.


I also tried babylonjs.mp4... still no picture.


Both video files play in other media players. (media player classic)


Also, when I put ONLY this... in the body of the document...


<video src="textures/tvshow.mp4" controls></video> plays fine.


Same problem in IE11 except plane goes invisible when video starts. Any ideas?  THANKS!

Share this post

Link to post
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.