Viewport transformation to implement bezel compensation?

[Fuentes]

Hi everyone:

I need to implement a bezel compensation mechanism, but i dont know where to start.

I have four screens acting like a big one. I don't have the option to use bezel compensation at driver level, so i need to figure it out how to make it at software.

My first thought was use some kind of BABYLON.Viewport tranformation but the documentation of this class is very scarce.

Any hint for accomplish this?

Many thanks in advance.

[Wingnut]

Hi Fuentes!  No replies yet, huh?  Sorry.  Have you had any luck, yet?

Take a quick look at this thing:  http://www.babylonjs-playground.com/#13TVWJ#2

It's only 3 viewports (actually 5 because the blue divider lines are cameras/viewports, too)... but I think you can see how it could easily be 4 main viewports.  Feel free to change it into 4 main viewports, and hit save as often as you like.

This uses no "rigs" for the cameras, but you might want to create a 4-camera "rig".  Essentially, it would be 4 cameras... attached (parented) to a single pan/tilt/zoom "gizmo".  Babylon already uses a 2-camera "rig" for all its stereoscopic cameras, and there's really no reason that we couldn't make a custom 4-camera rig.  For testing, though, I think 4 cameras... parented to a central invisible "gizmo"... would also work.  Hooking a mouse to that gizmo so it acts like a camera... that's another challenge.

Then convert my tri-viewport playground above... into a "quad-viewport", and feed the 4 primary cameras into the 4 different viewports.

Now let's talk about the blue divider lines.  You'll see the narrow width of the vertical divider... in line 33.  Very narrow.  You'll see the low height of horizontal divider... in line 44.  Very short.  They need not be blue or even visible.  Those blues lines are also cameras and viewports... aiming at a lit blue plane far away from the scene (lines 70-78).  Add line 79... blueplane.setEnabled(false);  ...and they disappear.

The main point... is that the height and width of these divider lines... can be set very precisely.  That is what you need for between-monitor bezel width/height compensation, right?

I'm certainly no expert in ANY of these things, but perhaps these are the tools to give you hope, at least.  I don't think you will need a camera "rig", but here is an interesting conversation that included SOME "rig" talk.  Also, visit this section of the BJS source, and you can get a "taste" of rig modes.  Again, you might not need a "rig"... because you can parent 4 cameras to a single invisible mesh parent-gizmo, and then rotate/translate the gizmo itself as if it were a camera... and all 4 child cameras should move as well.

If you wish to advance this, you COULD change my tri-view into quad-view, and then maybe try parenting all 4 main cameras to a gizmo, or maybe try parenting camera 2, 3, and 4... to camera 1.  Take careful note of lines 20-24 in my tri-view demo... using scene.activeCameras, and notice line 63 .activeCamera (with no 's'). 

When dealing with viewport positioning, 0,0 is in lower left, and 1,1 is in upper right.  You sort of "stack" them from the bottom... upwards.  Viewport #5 is the bottom-most viewport, but it COULD be named viewport #1, because it is the first in the stack-o-viewports. In lines 46 and 47, you can see viewport 5 "begins" very close to bottom left corner.  When I first built this tri-view, I was lost for many days... trying to get my viewport layout working correctly... because I was thinking like CSS... where everything starts at the upper left.   But viewport layouts are like textures... which start with 0,0 in the LOWER left.  Dad72 rescued me on that one. 

Also notice lines 64-66... which "gangs" the cameras together.  This is sort-of like parenting to a gizmo, but different.  I don't think you need all 4 cameras to pan, tilt, and translate the same as each other... but instead... pan, tilt and zoom as if they were a single 4-lens camera.  So, I think you will still need to use parenting, and NOT scene.attachControl for all cameras.  In fact, you might have NO cameras 'attached' for your situation.  What will be attachedControl for YOUR scene... is the central gizmo that 4 cameras are parented-to.  Not sure how to do that.

I'm sure others will have comments soon, and maybe better ideas.  But all in all, I think... what you wish-for... IS possible.  We'll talk more. 

[Klaas]

Hi Fuentes!

I had that exact same Probleme some time ago with 2 screens. I solved it with a Video-Post-Process.

First i expandet the render-canvas in html about the amount the bezel takes. Then i made a post-process as follows:

#ifdef GL_ES
precision highp float;
#endif

// Samplers
varying vec2 vUV;
uniform sampler2D textureSampler;

// Parameters
uniform float bezelFactor;

void main(void) 
{
	vec2 nUV = vUV;
	
	if( vUV.x < 0.5 ){
		nUV.x -= bezelFactor;
	}else{
		nUV.x += bezelFactor;
	}
	
	gl_FragColor = texture2D(textureSampler, nUV);
}

the bezelFactor is the percentual (0 to 1) gap of the bezel. If the screen is 1 meter and the gap is 10cm your factor would be 10% or 0.1

Thir is not a very universal approach but it served my needs.