Playing with GUI-2d Banner Buttons

Demos and projects
1

Hi gang… I’m playing with a little project…

https://www.babylonjs-playground.com/#1AVEYO#66

It started with an OLD “magic carpet” wavey plane… that someone made LONG AGO. Then Wingnut put an advancedTexture (gui2d for mesh) on all of them, and one button… on each.

Then I started playing with the button events… AND with the functions that provide the ANIMATION of the button (like for pointer-enter and pointer-out - hovering). Hovering (enter/out)… events themselves… are not triggering real well. It is understandable… the darned mesh that the ADT texture is mapped-onto… is wiggling around like a fish. :slight_smile:

Button 340 is the last one to be created, so I made IT face the camera. Click it… and you can see all sorts of crap happen… on-screen AND on-console. Wow, a rotation-on-click-event animation… fancy.

Thoughts about this playground:

  • Is there a way to use instances and instancesBuffer… instead of clones? Likely not… instances are not textured, and adt’s ARE textures.

  • How might we put a button on the BACK of the banner, which is also clickable and displays left-to-right correctly? These banners are targeted to be pulled by little 3D airplanes… and camera can be anywhere in my airport’s traffic pattern. :wink: Two-sided button banners… a must (if possible)

  • Why IS pointerEnter/Out… NOT triggering. Is it because of wiggly mesh/adt? Another reason?

  • IF we get pointerEnter/Out working… AND we try some custom hover/un-hover animations… HOW do I know WHICH BUTTON is being hovered… while inside the pointerEnterAnimation and pointerOutAnimation functions? There’s no “d” and “s” being sent in args to those anim methods. hmm. Ideas on determining WHICH button is being hovered, while inside anim handlers… welcomed.

  • And finally, why DOES Wingnut feel the need-to torture GUI-2d… so badly and often? :slight_smile:

Climb aboard this goofy project, at will, gang. I’m compiling a loose-list of folks… who shoot videos of their experiences with flying aircraft. I thought it might be fun to make a “visual” representation of the list… each pilot in a little BJS airplane, pulling the banner to THEIR youTube videos. (busy airspace around Lake Babylon airport.)

Wavey GUI… with added Wing-nut-ness.

Has anyone an easy way to make these banners two-sided? Perhaps, side-by-side identical buttons in a non-vertical stackpanel, then uOffset the adt texture 50%, so that it wraps to backside of wavey-plane? hehe

Maybe stack two buttons, one reversed somehow, both isBlockers? Add another wavey-plane and another adt, glued to the back of the original? hmm. Fun!

2 Likes
2

https://www.babylonjs-playground.com/#H3Z6J1#6

I think that airplane was “assembled” by @TheLeftover. Maybe he will let us use it… to drag some advertising banners. (instancesBuffer for producing color-varied airplane instances?)

Speaking of Brian (LeftOver - authored MeshWriter system)… I’m also thinkin’ about MeshWriter words AS wavey-banners. That nice SPS-powered tech is certainly handy inside a nearby airport hanger… warming-up for flight tests. Unfortunately, it is EQUALLY difficult to display/read meshWriter (real mesh) fonts… from the back-side.

Whooda ever thunk… that when book pages got “depthful”… it would cause SO MUCH HELL for us 3d text-displayers? hrmf. You can write the text across a farmer’s field… in huge fonts… easy to see from any cam/view, even from space. But… SOMEONE will want to read it from magma/center-of-planet view… ya just KNOW it. When you ask these adventurers WHY they feel the need to read the text from underground, they say “cuz we CAN”. :slight_smile: sigh. 3d freedom… sort-of forces the accepting of new perspectives. Interesting.

Banner-clicking and other air-click advertising systems (via Microsoft’s new AR sunglasses)… is going to get hot hot hot. We better start managing the advertising airspace around the malls… via simming it in BJS, right? billboardMode - takes over the world. :slight_smile:

Ok, ok, it probably won’t be banner-dragging. It will more-likely-be… a drone flies right up to your face (just out of punch-reach) and says “Hi, I’m Billy Mays… here to tell you about this AMAZING new product… the RonCo Drone-Smucker!” (for protecting the airspace over your personal head). hehe.

3

How about this plane https://www.babylonjs-playground.com/#5NIBE1#1 looks more like a banner dragging one :blush:

2 Likes
5

:slight_smile: Yeah! That airplane is pretty, but looks angry, huh?

https://www.babylonjs-playground.com/#1AVEYO#73

New waveyMesh playground … squared-up my createGround and widths/heights… etc. Just 4 “banners” out there, each with a horizontal stackPanel… with 2 near-identical buttons in the stack… button (green) and backbutton (blue).

Objective… move backbutton to ACTUAL back of waveyMesh… somehow. Initial thoughts… since each banner is a complete adt (advancedDynamicTexture), then maybe… adt.rootContainer.left = 0.5? SLide the whole damn adt, OR the stackPanel only… to the right… 50%. If the magic GUI faeries are smiling-down upon me, the blue button will wrap to the back of waveyMesh, and the sun will come-out, and the angels will sing.

But we all know better, don’t we? There is no ADT.rootContainer or ANYTHING adt-related… on the back of these “ground mesh”. We would need to use a super-thin box instead of a sub-divved grdMesh (to get another copy of adt printed on back-side of box). And if we use a box, the adt will map to ALL SIX sides of the box. Not sure if that would matter, because our “box banners” would be SO THIN… that you coudn’t see the box sides, or top/bottom.

But then… how do we wavey-animate a BJS box? It only has 24 verts… certainly not enough sub-divisions to make smooth wave-anims. What we need… is sideOrientation features on groundMesh… and when an ADT is seen being mapped-onto a sub-divided ground like I am using… the ADT automatically does exactly what we want to happen. hehe.

And what is that? Inverse (mirrored) ADT clone/deepcopy/instance/repaint… automatically mapped onto back side of ground mesh. The ADT actually “senses” that we are about to map it onto a groundMesh, so it does both sides with the same ADT… cuz it KNOWS… we are about to do a flag or banner that waves in the wind. :slight_smile:

Automatic banner-sensing on our applied-to-ground ADT’s. No flags… it just automatically mirrors on the backside of groundMesh…

That’d be a cool feature, huh? Would it be dangerous and back-compat compatible? I’m thinkin’ yeah… or close enough. Just how many people map adt’s onto grounds? Probably nobody but me, so far. Maybe some terrain folk… pasting some stickers on the ground… might use gui 2d. Auto back-mirroring could still be eliminated with backfaceCulling = true.

AND, I think, we can’t have different ADT on front/back of ground… it must be the same adt. So, button 1 click on front side, is same as button 1 click on back side. They would be identical adt’s… actually the very same one… just automatically (inverse-) mapped ALSO onto bottom of all groundMesh it is applied-to.

Thoughts, anyone? I bet there’s an easier way.

Meantime, have fun trying to “wrap” (left/uOffset) the blue button in the right side of sidestack horz stackpanel… to the back-side of these ground mesh… and still be clickable… and don’t let it click-thru to the front button.

Actually, we probably don’t care if click-thru’s happen (no isBlocking)… because both buttons go to the same link. The main thing… PRINTING/DISPLAYING the button label correctly, when viewed from the back side. hmmm. ponder ponder.

6

Ok, Hi gang, just cluttering the forum with another attempt at gui banners.

https://www.babylonjs-playground.com/#1AVEYO#76

This time, no horizontal stackPanels with two buttons (hoping for some kind of miracle ADT wrap-around to backside of waveyMesh). Currently unrealistic to hope for an ADT or buttonControl wrap-to-back. Need big core-ish hack to do that, I suspect.

In this version… I make a front-side (green) and back-side (blue) waveyMesh, installing a separate ADT and single button… and each side. Both green and blue waveyMesh are cloned from the same wavey groundMesh, so… after I spin-around blue backside waveyMesh into position, you can see that the text looks good… but the blue waves are 180 degrees out-of-phase from the green waves.

I might need to clone greens from ONE wavey ground, and clone blues from a DIFFERENT wavey ground (animated differently).

Click on green button 270… good green-button 270 spin. Oddly enough, to make blue button 270 spin, gotta click blue button 90. (yet another interesting puzzle) :slight_smile:

Ok, that’s all I have for today. I can tell that everyone is super-excited! :smiley: Party on.

7

Ok, https://www.babylonjs-playground.com/#1AVEYO#79

I’m running the green front-side banners on waveyMesh ground and the blue backside banners on waveyMesh ground2.

Problem… on green mesh/banners… wave is traveling leftward (when facing cam). For blue backside banners, wave is ALSO traveling leftward, but needs to travel rightward.

The issue is in lines 239 & 240. Does anyone know how to mod line 240… to make the blue-banner waves… travel in the opposite direction? (thx)

For anyone thinking they can simply Y-rotate blue-banner 180 degrees, that won’t work at this time. That would cause blue-banner’s backface-culling and its advancedDynamicTexture… to face the wrong z-directions.

Ideas/fixes welcome. I’m sure I’m making this challenge… much more difficult than it needs to be. Clickable 2-sided GUI2d waving-flag buttons… certainly as-difficult-as baking a decent kuchen.

8

Ok, here’s another version… https://www.babylonjs-playground.com/#1AVEYO#81

I know all the readers were on the edges of their seats in anticipation. (snore)

I replaced blue banner wave-maker line 240… with line 241, which sort-of does the same as green banner wave-maker line 239… except it starts from “end” of positions2 array, and works backwards, and uses cosine instead of sine.

Main thing… blue banner now has its waves traveling in same longitude direction as green banner, and in-phase (as best I can tell so far). YAY!

But, as you can see… latitude-wise… blue wave is 180 degrees out of phase with green wave. DARNIT! SO CLOSE… yet so far. hmm. Help welcomed.

Line 241 needs SOMETHING… just a touch of faerie dust from a plotting expert. It’s SO CLOSE! My dog’s entire back-half… is wagging. :slight_smile:

9

This is pretty rad. Seems like an interesting challenge to solve! Keep the updates coming Wingnut! Would love to see where this takes you!

2 Likes
10

I predict… it will take me to a mental institution, to be frank. :slight_smile:

Thx for the kind words, J. You make my “begging for better ideas at every step”… look dignified. :slight_smile:

Really, we’re seeing a blatant lack of “plotting knowledge” from Wingnut, I suspect.

I think… all I need to do… is reverse the “order” of the indices of a green banner, and it becomes a blue banner… via frontside/backside swap. No changing the math formula for blue backside banner at all. No need for two different wavey grounds to make clones-from, either.

In theory, it should work. Blue banner would be an exact copy/clone of green banner, not even rotated differently, but blue banner frontside/backside has been swapped.

THEN… mapping ADT to green banner… faces camera. ADT on blue banner, faces away from camera. No probs with horz or vert wave-phase, blue backside banner is a perfect geo-clone of green.

I mentioned this possibility in an earlier post… pondering how to make a groundMesh… have a “sideOrientation” parameter. I use groundMesh for making waveyMesh… cuz… it can be subdivided/tessellated (divided into cells)… a necessary thing for waveyStuff, and not found on your average BJS planes. :slight_smile:

So now I’m scared again… thinking about how to make a blue waveyMesh… with reversed indices order from green waveyMesh. Reversing the orders of indices… making all backside facets… be frontside. hmm. I suppose the darned normals need to be re-aimed (inversed? negated?), too, huh? Crap! I hope it’s automated/Perl 1-liner). heh

mesh.convertToBacksidedMesh() ?? :slight_smile: hmm. There’s got to be something simple I’m missing. Some kind of flag on groundMesh… to make it be back-sided. (Wingy grabs his binoculars and a canteen of Nescafe, and hits the documentation woodland trails). Knowledge hike! :slight_smile:

Update: I found some kind of critter hole along the trail, here. https://doc.babylonjs.com/api/classes/babylon.groundmesh#overridematerialsideorientation hmm. override material side orientation. That’ll work… but I’m still scared. Maybe a couple more Bugs Bunny cartoons, first.

1 Like
11

Ok, Bugs said “Do some tests, Wingy, and stay on the bunny trail.”

https://www.babylonjs-playground.com/#1AVEYO#82

Line 17 … ground2.flipFaces(true); COOOOL! Single parameter is “flip normals too?”

Hell yeah, flip them puppies. (true) Nice tool-method, eh?

And, after mathematics re-identical-izing of wave algo’s… things are looking pretty nice… except… the friggin blue-banner adt is backwards. Did I need ANOTHER parameter in flipFaces()… one that allows “flip UV’s too?”

ADT x-invert, right? ADT vANG, yes?

https://www.babylonjs-playground.com/#1AVEYO#84

There we go… version 1. Single banner this time, 2 mesh, 2 adts, 2 buttonControls with custom event anims… just that simple. heh.

Line 18… ground2.flipFaces(true);
Lines 57-58… uAng and vAng the crap out-of the blue-side adt. Fun!

Everything looks ok, I guess. At certain camera angles, I see the blue banner “protrude” onto the green side… but I never see the green banner protrude onto the blue side. Help welcome regarding that… and regarding every other aspect. (thx) Gap between banner sides… set at line 31.

1 Like
12

Had a play around with using a ribbon rather than a ground since a ribbon can be double sided.

Some weirdness about the mesh material mapping and the warping as you view from different point.

Fun though. Happy play time.

Play 1, one ribbon so both sides same color Babylon.js Playground

Play 2, check events still work https://www.babylonjs-playground.com/#KHJ2SC#1

Play 3, different sides different colors, advantage over ground no change to orientation of ribbon https://www.babylonjs-playground.com/#KHJ2SC#2

1 Like
13

That’s excellent, John… THANKS! https://www.babylonjs-playground.com/#KHJ2SC#3 ( I just tamed the y-wave a bit). It looks and works… perfect. NICE!

Yep, ribbon instead of groundMesh - good idea. I didn’t even think of that option. Nice wave generator, too, JK! You’re just the best.

John, are you going pull this banner… behind that cool airplane model you showed us? I think ya should. Put the icing on this cake/thread/pg-series, once and for all… mission accomplished. :slight_smile:

I’ll start planning the airport. I’m thinkin’… airport should be on the west side of Lake Babylon… near the demented experimenter’s commune (scene explosion land)… and thus near all the emergency services and hospital, too.

South side of lake… actual township of Lake Babylon. North side of lake… Coreville… deep coder lands. East side… families and nice homes… many with jetboats and float planes and personal passenger drones.

Center of Lake… Lake Babylon drone and heli pad and marina and recreational / data-streaming artificial Gilligan’s Island center. It’s the home of Lake Babylon TV, Radio, and Laser/Pyro/Water-cannon shows. (a major communications hub/sharing-center, in more than one way).

Ahh, life in Lake Babylon… is sweeeeet. Airspace-wise, it is VERY busy, aeronautically and digitally and laser-ly. Can ya picture it? Can ya render it? I would be glad to look-at fake maps of Lake Babylon area, as described by me. (I’m the self-appointed city planner). :wink:

Do you like making maps of imaginary places? How about Lake Babylon?

Want to be a REAL hero? Cartoon Maps & Caricature Maps — MapCo Marketing I love cartoon maps… but… they are for AFTER a bunch of us forum members… “flesh” Lake Babylon with models/buildings/homes. Once that “scene” (world-server) is grown, then… a piece of software… makes one of them cartoon maps… by deriving it from a real BJS scene. scene.makeCartoonMap(renderTargetTexture) with .addComedy = true flag. heh. Not gon do?

sigh. Cartoon-maps… hard to auto-gen, me thinks. Maybe hand-made only. DK is a cartoonist, right? Good deal. :slight_smile:

I’ll work on the Jeppesen charts for Lake Babylon airport. Somebody else can design the airways around the drone/heli center-of-lake marina (Gil’s, short for Gilligan’s Island). :slight_smile:

Ahh… imagining… ain’t it fun? Virtual Lake Babylon… it’s coming… but OH SO SLOWLY. Who’s got budget?

14
3 Likes
15

hahah. Nice. Love the random “little bit of airplane roll”… adds so much realism to it.

Waves going correct direction? REALLY-attached to corners of banner… LinesMesh tow cables (constant updating, rocking back and forth with banner corner movements)?

C’mon! (ahem) (just kidding). :slight_smile:

Aren’t I gracious and non-demanding? nod. heh.

Need streamed airport radio? Listening to: CYWG Del/Gnd/Twr/App/Dep | Winnipeg, Manitoba, Canada | LiveATC.net

1 Like
16

Yet another version of john’s flyer… https://www.babylonjs-playground.com/#KHJ2SC#8

I reversed plane to match banner wave directions, and added some basic tow points/cables. (yawn)

Tow point 3 (line 122 area) is still parented to the ribbon, but should be parented to the plane. The tow line drifts-away-from the back of the plane, at times. :slight_smile: Minor issues here and there.

Aside: I need to learn how to drive that .map() thing that all the pros are using. That puppy looks powerful. :slight_smile: I bet that was covered in chapter 6 of JS-For-Kids book. I never read it that far. hah

Here’s another: https://www.babylonjs-playground.com/#KHJ2SC#9 tp3 (towlines attach point on plane)… is made global in line 12, and installed on plane in lines 32-34 area.

It is still drifting away-from back of plane… at certain places in the orbit. Do I have a non-concentric orbit path? hhmm. “concentricity”… what a weird term. Perhaps an issue with using .getAbsolutePosition() vs. .position… in the line drawing updater (lines 145-148).

Also… you know… the BIG tp1 and tp2 issues are still here. Ideally, we want tp1 and tp2 (tow points on the ribbon banner)… to be attached to the actual MOVING corners of the banner… and not just a simple parenting of the tp’s to the banner. We want… banner corner tracking… for max realism.

There is a portion of line-path that is drawn between tp1 and tp2 (a vertical line on the banner). It can be removed, of course… but I kept it there… for now, to help SEE stuff. In real life sky banners, I suspect there IS a rigid bar on the leading edge of tow-banners… to keep them from collapsing vertically… mid-flight. (losing vertical fan-out). kbye

2 Likes
17

https://www.babylonjs-playground.com/#KHJ2SC#11

Just a little “play” with tp1 and tp2 tow-line attach points on the banner… trying to get them to move WITH the waves.

John’s map code in lines 178, 179, 180… gruesome. It’s like advanced Algebra written in Swahilli… to me. BUT, lines 181 and 182 DO get the two tow-points… moving side-to-side.

For me, that’s a miracle in itself. hehe. Out of phase, yet, so I am not connected to the correct points within the correct 800-vector3-array… of 20. (phew)

Yep, that’s what I said… 20 arrays of 800 vector3’s each. At least that is what it APPEARS to be “grown”. This means… what? The waves are “pre-grown” and not “live”, right?

Or maybe… they COULD be pre-grown (but not now)? (perhaps ONLY ANIMATE inside renderloop, and maybe no need to “generate” inside renderLoop?) Weird. Lots to learn about map yet, for mr. wingleberry.

I KNEW that map thing was going to be ugly. It’s a “populating machine”… that thing. It builds blueberry pies… by positioning TWENTY… 18-degree slices of pie… next to each other in a pie pan (that might be named basePaths.) :slight_smile:

1 Like
18

Yeah. this is what I was dreaming-of. We’ll need this kind of airspace (and visualization) around Lake Babylon and its airport(s). Related to my older “vtol project” too.

Doncha love aviation? Flying is SO COOL… the heart of any “wingnut”.

Oh, yeah, the banners? https://www.babylonjs-playground.com/#KHJ2SC#12 I’ve gotten SOME improvement to the lines/banner connect points (working with JohnK’s ribbon-based demo)… but not really very good. Probably not important.

Lake Babylon Founder’s Day is coming soon, and we have around 100 sponsors who want their clickable banners flown around Lake Babylon. We don’t have airspace established, or Jeppeson charts, or even a basic road/topo map of the Greater Lake Babylon town/areas. :slight_smile:

Didn’t this guy in the video… do a nice job of explaining airspace and using 3d modeling? Wouldn’t it be cool… if we could dynamically generate similar airspace models in webGL… for ANY Jeppeson chart (like that seen in the video) (and use the same layers/transparencies to “tour” them)?

Any Jeppeson chart… we can renderAirspaceIn3d()… then tour with the arcCam. Nice. Someone get that built, eh?

We’re on the road to automated aircraft landings… fixed-wing or rotary-wing. Safer… as air traffic increases. yuh yuh yuh. Yum. It all starts with fake map and a fake J-chart… or a fake town/area… Lake Babylon.

If anyone goes map-genning, remember the heli-pad(s) on the “island” in the center of actual Lake Babylon. It needs airspace for heli’s/drones/vtols, too. It’s ALSO a little airport… closed during laser/water-cannon shows, though… which are launched/performed from there. :slight_smile:

We prefer normal airport be on the west or northwest corner of the lake… away from actual town on the south side (noise abatement) and allowing an over-the-laike approach for airliners… headwind into the predominently west winds (landing onto westerly headings/runways). (city planners say this is the best system) :wink:

I’ve been having a little problem handling all the personal messages of high-interest… that I receive each hour… about this project. The forum-wide excitement and participatory spirit… has been truly overwhelming. heh. (a few mercy-pettings from friendly acquaintances) It’s all good.