Hi, I am new and just learn to use Babylon JS recently. I run into the following playground example.
https://www.babylonjs-playground.com/#1WROZH#70
when I added the following to the script, the small viewport disappears.
scene.useRightHandedSystem = true; // use right handed
I try to find out how to bring the small viewport back when the coordinate system follows right hand rule.
Thanks!
Hi jhuang,
Welcome to Babylon! The “viewport” just disappears because, if you change the scene’s handedness, the plane it’s rendered on is placed somewhere the camera can’t see it. Here’s a slight modification:
https://www.babylonjs-playground.com/#1WROZH#82
I only changed lines 3, 58, and 59. Line 3 just sets the handedness. Lines 58 and 59 modify the placement of plane (I just put it in the middle of the screen for convenience) to be sensitive to handedness. Babylon changes handedness by effectively reversing Z; so while (0, 0, 20) is in front of the camera in a left-handed scene, it’s behind the camera in a right-handed scene. You also have to change the orientation of the plane as well (handled in line 59) to make sure that the plane is facing the camera in both handedness scenarios.
As a bit of a sidenote, I think this is a little more complicated than it might otherwise be because the “viewport” is actually a 3D element in the scene, even though it’s trying to behave like a 2D element in the screen. For a real use case, it might be better to render something like this using the GUI, which should have fewer unexpected behaviors.
Thanks. @syntheticmagus I am able to see the small viewport now. I added the xyz axis to the scene and see if the viewport shows the same coordinate system; apparently it doesn’t. See below.
https://www.babylonjs-playground.com/#1WROZH#83
The coordinate system in the small viewport is no longer following the right hand rule. Is it possible to make the coordinate system in the viewport to be the same as the coordinate system in the main scene following the right hand rule? Any suggestions? Thanks again.
Probably the fastest way to get the effect you’re looking for will be to change the uScale of the rendering material to match your expectations. In other words, I think you can do what you’re trying to do by changing line 128 to
mon2mat.diffuseTexture.uScale = scene.useRightHandedSystem ? -1 : 1; // zoom
I’m not 100% sure why this needs to be done. It might be something to do with the winding/computed forward direction, or it might be a bug, but I’ll have to think about it more. Either way, changing the uScale should be either the right way to do this or an effective workaround, at least for now.
Hi, @syntheticmagus, Thanks a lot!! It did solve my problem. Have a great day!!