Jump to content

Rubber Plane... Glued-to Camera Lens


Wingnut
 Share

Recommended Posts

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?  :o

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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

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.  :o Let's see... google search, adding custom browser events...

Link to comment
Share on other sites

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.)  :)

Link to comment
Share on other sites

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)

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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."

Link to comment
Share on other sites

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).😪

Link to comment
Share on other sites

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.  :)

Link to comment
Share on other sites

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.

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

Guest
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.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...