solved Rubber Plane... Glued-to Camera Lens

[Wingnut]

Hi gang! 

https://www.babylonjs-playground.com/#108TWV#7

I'm looking-for a way to keep that GUI-textured, green-rectangled, camera-parented plane... the exact same size as the render canvas, no matter what.

The plane's GUI white border... should extend-to all edges of the canvas... in PG full-screen, with/without F12 dev tools open, and no matter the playground's vertical divider position.  Simply put, the plane needs to scale... to match the render canvas size... perfectly, in ANY SITUATION.

Possible?  You can see assorted test code on-board.  The plane is currently parented 3.15 Z world-units from camera lens.  The green-background GUI rectangle is down-scaled 75%.

WHY do I want this, you ask?  I want to do a SEAMLESS transition from a FULL-screen AdvancedDynamicTexture (ADT)... to a texture-based ADT (on a plane), and back again.

WHY do I want to do THAT, you ask?  Not sure, yet.  Perhaps, just to see if it can be done.  But I suspect it all begins-with a plane that always, perfectly, matches the size of the render canvas.

Or maybe MORE accurately-said... the green plane must match the dimensions of the camera frustum... at +3.15 z-units from the camera. 

All assistance and ideas... highly-welcomed and appreciated.  (recently updated PG link... now #7 PG, no major diffs)

PS:  Use this PG to see how a full-screen ADT "acts"... when tortured by the 3 test conditions:  
    - F12 dev tools open/closed
    - PG settings --> fullscreen
    - Re-position of playground's vertical divider

Tiz perfect, through all 3 tests.  Can a texture-based ADT... do the same? 

[Pryme8]

Ive done this a bunch in the past.  1 second.
https://www.babylonjs-playground.com/#8Z9TI6#1

Its the same method I use in my raymarching scenes.
https://www.babylonjs-playground.com/#ZUMAGX#28

ezpz ^_^. do you need it to stay attached when the camera moves?
https://www.babylonjs-playground.com/#8Z9TI6#2

For resizes, you can shift this to make the plane initially at a 1 by 1 unit then scale it to the w/h values.  then add a listener for resizes recalc the w/h and scale the plane accordingly. 

https://www.babylonjs-playground.com/#8Z9TI6#3
You will need a better listener, but here you go.

[Wingnut]

Hi @Pryme8 thx for the reply.  None of those playground pass the three tests.  #3 is close, but it doesn't pass the playground editor/canvas divider drag.

If you use the https://www.babylonjs-playground.com/#108TWV#7 pg as a starter, then I can more-easily see the white border.  (ensure no plane over-flow)

Your call, though.  Thx for tests/interest.  There's good code there... thx.

 

[Pryme8]

That's why I said you need a better listener...  Not gonna do all the work for you. ❤️

The Math is correct though, there is no overflow I can promise that.
with this method though, you will need to make sure an engine resize if fired before you can use the c.fov parameter. 

[Wingnut]

Wellllll  pffft... all of a half of a sudden, my personal slave wants civil rights!  heh.  Of all the audacity! 

Ok, ok.  You mean like... canvas.addEventListener("resize", function () {  blah blah? }

Nah, that sucks, too.

I need a new event itself.  OnSomeoneDraggedThePlaygroundDividerObservable.add...  um... errr.  *scratch scratch*

Also need... OnSomeoneToggledTheirHistoryOrBookmarksSidebar.  Might be same observer... but luck says no.

I wish I knew how to code.... or think... or accomplish basic personal hygiene.  Let's see... google search, adding custom browser events...

[Pryme8]

I think there is a listener for the editor that we need to bind a callback to.  hang on 1 second let me see if I can dig that up.

[Wingnut]

Thx, I'll let ya do whatever you like, I have no leashes or timepieces. 

I recently completed a bus conversion... made an address bus into a hippy bus.  I'm just chillin' in its air-conditioned comfort, sittin' in a rest area by the MMU.

(nah, there's no bus - but it's an ALMOST FUNNY play-on-words, eh?  No?  fine.) 

[Pryme8]

https://www.babylonjs-playground.com/#8Z9TI6#5

Pictures of the bus or it did not happen ^_^.

[Wingnut]

COOOOOOL!  Ya did it!!!  Thx p8!  Well done.  Scary code... but I'll learn what ya did. 

[Pryme8]

https://www.babylonjs-playground.com/#8Z9TI6#9

Here is the scary part... adding a advance texture breaks it no matter what I do.

And that is odddddddddd..............

[Wingnut]

I beg to differ.  https://www.babylonjs-playground.com/#108TWV#8

SMOKIN'    Workin' great, so far.

I removed the ()=> stuff... cuz my IE hates it.

[Wingnut]

 c is null     calcSceneFrustrum@https://d33wubrfk

I get that.... after whacking my f12 key a few times.  hmm.

So... maybe... in the middle of an engine.resize... scene.activeCamera... goes stupid for a moment.  hmm.

[Pryme8]

I bet i had a listener double binding or something~!

good job bud!
 

[Wingnut]

Uh oh, I get that error on divider drags, too.  Vertical (above devtools area) and horizontal (editor/canvas divider).  darn.  I could wrap in try/catch and ignore it... cuz the thing works.  But, what will acadamia think of me?

[Pryme8]

Its listeners double binding and breaking scope.

Hard reload the page.  Ill look for a fix.

[DylanD]

Hello Guys,

 

 

rect.width = canvas.width;

rect.height = canvas.height;

im not really sure if thats what your asking for but just add a resize function too and it should work perfectly?

???

[Pryme8]

No. Coordinate spaces are different.

[Wingnut]

We're trying to resize the plane itself.  But that's a nice clean solve, DD! 

Could use a BIG plane, then, much bigger than camera... and then always resize the rect to the canvas.

But, what happens when i flop this plane onto a physics-active terrain.  The plane will be bigger than the rect... and look goofy.

*shrug*  That's sort-of why we're shooting-for sizing the plane, not the rect.

I want to make a full-screen ADT... tip-over, or fly away, or move off to the side, and make room for another full-screen ADT.    (a quick convert from a full-screen ADT, to a texture-based... and reversed, too)

[Pryme8]

https://www.babylonjs-playground.com/#108TWV#12

Crap fix...

Ideally on most developments your listeners will reset when you make changes to your page because you would refresh... this is the lazy workaround on a PG.

[DylanD]

3 minutes ago, Wingnut said:

We're trying to resize the plane itself.  But that's a nice clean solve, DD! 

Could use a BIG plane, then, much bigger than camera... and then always resize the rect to the canvas.

But, what happens when i flop this plane onto a physics-active terrain.  The plane will be bigger than the rect... and look goofy.

*shrug*  That's sort-of why we're shooting-for sizing the plane, not the rect.

oh yea I see that now... Then I'm just gonna throw ideas out that probably won't work, but why not shoot a ray for the four corners of the plane if no collision increase size, or better yet find the z plane of the four rays set that to the z coordinate of the plane, then find the difference between their x/y values do some math and set that as you plane size.

 

But I don't know how ray casts work   I'm thinking like 4 lasers that go just out of sight of the four corners of the camera and then you use those and the z coordinate of the plane to calculate the width and height the plane need to be, or like do a collision thing with them.

 

I think this could be solved with some maths.  interesting problem.

[Pryme8]

Its already solved with math...
 

var c = scene.activeCamera;

var fov = c.fov;

var aspectRatio = scene._engine.getAspectRatio(c);

var d = c.position.length();

var h = 2 * d * Math.tan(fov / 2);

var w = h * aspectRatio;

@jerome provided this to me last year

a quote from him:
"Actually this computation is just the same than the one used by the projection matrix when using a perspective camera : https://github.com/BabylonJS/Babylon.js/blob/master/src/Math/babylon.math.ts#L5269

This is the way distant things are rendered tinier than closer ones on the screen."

[DylanD]

3 minutes ago, Pryme8 said:

Its already solved with math...
 

var c = scene.activeCamera;

var fov = c.fov;

var aspectRatio = scene._engine.getAspectRatio(c);

var d = c.position.length();

var h = 2 * d * Math.tan(fov / 2);

var w = h * aspectRatio;

hmmm, looks like my work here is done ?

no haha I'm gonna go and think about what I've done(skipped to the end of the thread and offer suggestions without reading the thread).?

[Wingnut]

hehe.  You guys are maniacs.  Working good, now, though... tested with bookmarks sidebar toggles, and history sidebar toggles, and f12 toggles, and divider-drags... I can't seem to get it to flop.

Good job... thanks for all help/input.

Now maybe I can get @Deltakosh or other maniacs... to show me the fast way to convert a full-screen to a texture-based.  a "casted clone".  Changes datatype during the cloning.  heh.

Might be just a children copy... or maybe hand-around a host, or root, or layer.  Portable gui... comes with wheels.  :)

[Pryme8]

"to show me the fast way to convert a full-screen to a texture-based"

PostPass, I think you are talking about taking what is rendered on the scene and port it to that ADT correct?

[Wingnut]

I dunno about that.  Just cloning children of a fullscreen adt, onto a texture-based ADT... onto the magic plane you made for me.

https://www.babylonjs-playground.com/#108TWV#13

Workin' ok... just toggling between the two types... looking at the differences.  Same ._rootContainer._children for both ADT's. (line 143)  Interesting.

Cursoring the camera will tell which is which.  I need parent-to-cam, and not billboard, perhaps.  *shrug*  Not overly important right now.