A Problem with Multi-Viewport Screen-Layout Positions

[Wingnut]

Hi everyone!  Thanks for reading about my problem.  If you wish, take a look at http://urbanproductions.com/wingy/babylon/polygun/polygun02.htm (.zip is there, too).

 

In the htm file, you can find at the top of createScene function:

	var viewport1 = new BABYLON.Viewport(.005, 0, 0.485, .7);	var viewport2 = new BABYLON.Viewport(0.495, 0, 0.005, .7);	var viewport3 = new BABYLON.Viewport(0.505, 0, 0.491, .7);	var viewport4 = new BABYLON.Viewport(0, .71, 1, .25);

The arg0 is x-start, arg1 is y-start, arg2 is x-width, arg3 is y-width.  When I rem-out the last line, the first three viewports are aligned ok.  They are at screen top... and spaced-out sideways correctly.

 

When I add that 4th line, and try to get a viewport across the bottom 1/4 of the screen, full width... it instead puts that 4th viewport at the top of the screen, and pushes the other 3 viewports down... beneath v4.

 

Lets look at that 4th line...

	var viewport4 = new BABYLON.Viewport(0, .71, 1, .25);

This says that I want the 4th viewport to start at screen location x = left edge (0), y = 71% down the page (.71), and I want a viewport width of full screen (1), and a viewport height of 25% of total page height (.25).

 

In case you are confused about viewport2, that viewport is only a thin blue vertical line.

 

Does anyone have any idea why viewport4 is displaying at the top of the screen, instead of 71% down the screen, below the other three viewports?  I cannot see my mistake.  Thanks for any help!

 

Update:  During troubleshooting, I decreased the value of viewpoint4 y-start position from .71 to .1:

	var viewport4 = new BABYLON.Viewport(0, .1, 1, .25);

And guess what. Viewport4 actually went lower on the screen, and in a strange way. The other three views still did not move to the top of the screen as they should. Weird!  Look for yourself. http://urbanproductions.com/wingy/babylon/polygun/polygun02x1.htm It should have gone up higher, I think.

[Wingnut]

Hi again.  I did some fooling around, and was able to come up with the viewport layout 'look' I wanted.

 

http://urbanproductions.com/wingy/babylon/polygun/polygun03.htm (.zip is there too)

 

I am still battling with detachControl.  I don't know why its not working, but there are 5 cameras in scene.activeCameras, and I may try emptying that array, then detaching the scene.activeCamera, then re-pushing all 5 cameras into scene.activeCameras ... see what I can discover.  Currently, the viewport selector buttons are not working right. 

 

Viewports 2 and 4 are thin blue lines.  What a waste of viewport usage, huh?  Camera 2 and 4 are out at (500, 0, 500) looking at a blue plane.  They have easy jobs.

 

 

As you can see, it took some very strange start-y numbers to get the viewports to align as wanted.  Trial and error, and sort of stacking them from the bottom towards up.  Lets not mark this as solved until the gods of babylon.js verify that those numbers are working properly.  Personally, I see little logic to them... but the results...  okay.  Je pense que ces chiffres axe Y sont étranges. Party on.

[gryff]

Wingnut, What happen if an active camera is disabled eg camera 2 - does  viewport2 disappear ?

 

cheers, gryff

[Wingnut]

Well that's an interesting question, G.  I used camera3 (upper right viewport) to test...

 

alert(camera3 == scene.activeCameras[2]);
camera3.setEnabled(0);
scene.activeCameras[2].setEnabled(0);

 

The alert reported true.  And, after a double attempt at disabling camera 3, there was absolutely no change seen whatsoever.  Demo acts exactly the same.  Now isn't THAT interesting?!  You just wanted to see my tumor grow larger, didn't you? 

[GameMonetize]

cameras do not use setEnabled because they are referenced by the scene ( I know this is not obvious)

[Wingnut]

Ok, thanks for that information, deltakosh.  Any thoughts on those start-y numbers?  (no rush).

[Wingnut]

Maybe another picture will help 

 

 

These are Y-start locations (vertical).  .28 means 28% down from the top?  They are NOT 28% from the top.  They are more like .1% down Y-axis from the top (of canvas start).

 

The last 2 numbers seem far incorrect.  They should be .7x or .8x area... I think.  Maybe I am wrong, though.  I am wrong quite often. 

 

Keep in mind that viewport #2 and #4 are just blue divider lines.  Thanks for help/info.

[GameMonetize]

May I ask you to create a small repro case using jsfiddle? (it is far easier for me to debug)

[Wingnut]

Hi.  Well, here is the jsFiddle thing... http://jsfiddle.net/QVX9N/5/  It is difficult to get the 'full screen effect' there.

 

How about a nice little demo with a nice little zip?    Thanks for looking at those numbers, DK and others.

 

By the way, who says you can only have one camera active at a time?  I have 3 active here. 

 

And if you are wondering about the 'bump' in the render loop that is done to camera 2 and 4... that is needed to get them to display the blue lines.  You have to give them a little kick, at least in FF21... to get them to activate.  Interesting, huh?  *nod*

 

To remind:  The demo looks proper.  The y-start numbers used to get the demo looking proper, make no sense, and were found by trial and error experimenting.  The demo works correct.  The numbers are incorrect (I think).  Thanks again... for checking those numbers.

 

Maybe a problem in the BOLD line...

 

BABYLON.Engine.prototype.setViewport = function (viewport, requiredWidth, requiredHeight) {
        var width = requiredWidth || this._renderingCanvas.width;
        var height = requiredHeight || this._renderingCanvas.height;
        var x = viewport.x || 0;
        var y = viewport.y || 0;
       
        this._cachedViewport = viewport;
       
        this._gl.viewport(x * width, y * height, width * viewport.width, height * viewport.height);       
    };

 

But I have no idea.  Over my head. 

[Wingnut]

One more picture... just for fun.

[Wingnut]

OK, I have finally figured out the problem (like anyone cares).

 

Babylon.js is measuring the Y numbers from the bottom of the canvas, which might be a bug in the framework, maybe. But at least the numbers make sense, now.

 

Here is a fresh demo using the numbers shown in the picture.  Here is a zipped version.

 

DK, I am not going to mark this solved until you say you understand the situation.  I think the Y numbers are supposed to be measured from the top of the canvas, not the bottom.  I know everyone is sick of this thread topic, but I am not letting it fall into the garbage until I know it has been addressed and given the green light to die.

[Dad72]

The coordinate system starts at the bottom left or right in the 3d world (x, y, z)

An image also starts at the bottom left (x, y)

 

 

It is therefore normal that your measurement starts with the point 0 at the bottom

 

I hope I understood what you were saying

[Wingnut]

Alright Dad72, that makes good sense.  I was thinking too much about canvas = HTML, where 0,0 is at top left.

 

Thank you, thank you, thank you!!!  Well done!

[Dad72]

Delighted to have been able to help