Recommended Posts



 And the tan(fov/2) is the sizing? 
-> From the billboard output plane of the aspect ratio in the fake camera field of view... almost got it. Nope not it...
        shader.setFloat('time', time);
        shader.setVector3('camOffset', output.position.clone().add(falseCamera.position));
        shader.setVector3('camTarget', falseCamera.getFrontPosition(1));

How does it stripe material, and move in opposite direction (based on time)... 

Finally just reads the _fs and _vs. It's all there! : )

Thank you for the intro to WebGL shaders. : )



Share this post

Link to post
Share on other sites

:) Well wasn't that a fun little tangent.  When I invited anyone to talk about anything here in TWC... WHAT WAS I THINKING?!?!  heh.  (just kidding)

There's our first needle.    Animate by activating line 292.

As you can see, the blue meter face (ring) or its stackpanel (panel) are a little mis-centered or something.  Not sure why, yet.  I'm using this image in 288 x 240 px size, and the image needs to be rotated -45 degrees.  So, those factors could be involved (likely).  Setting image.left = "4px" improves things... somewhat.

This version has ALL of its mousePointer things removed. No clicking, here.

The needle is a standard GUI Image control... not part of the custom ring control.

This made me think about... What IS the needle?  Is it a mesh?  Is it a GUI control?  Is it ANOTHER canvas of the custom control, and the needle is drawn on that 2nd canvas, so the needle is completely dynamic and self-contained on the custom control?

IF a person decides it is a mesh needle, then... the ring control (meterControl) is best suited "for mesh" (as a texture on a plane, for example) and not for full-screen GUI's.

IF the needle were drawn on a 2nd canvas BY the custom control... then it will likely look more like a thin triangle... and never like a real sewing needle.

It is STARTING to "feel" like... ring with marks-making engine... is a control of its own.  No needle (meterControl), no knob (dialControl)... just the blue-circle-maker with a powerful graduation-marks drawing func.  LATER, it can be used WITH the knobControl, or the needleControl... to make a meterControl or a dialControl (compound GUI controls).

We're thinking... "primitives" here.  Let's go back to calling the blue circle with its marks... the ring control.  By keeping the ringControl as a control of its own, it can more-easily be used for both texture-ADT and full-screen ADT.  The programmer can determine if they want to use an imageControl for a needle, like I did... or an image control for a knob, or use the add-on (overlayed) GUI knobControl or needleControl.  Or, use a mesh for needle or knob.

More versatility, eh?  *nod*.

dialControl = knobControl + ringControl.

meterControl = needleControl + ringControl.

Modular!  Cooooool... maybe.  Anyone remember XBL ... xml binding language?  We used it to bind XUL GUI things to other GUI things.  I think we might be able to do the same bindings... using observers/notifiers.  RingControl should be able to observe knobControl (communication across multiple parts of a single combo-control).  But more importantly, dialControl.onValueChange can notify meterControl.setValue.  Turning the dial, moves the meter needle.  (Communications between multiple combo-controls.)  Perfect!

Later... dial/knob control... needs to be ready for rotary switch option. (oh no!)  And... we might need an oscilloscope portal... with green display cycling thru all 11 of our Animation easing functions (pretty waveform ramps displayed across our oscilloscope screen).  Cool!  I fig that's a custom/shader material, perhaps.  :)

On a related topic, see the way this meter has the bottom of its circle... blocked by an area of black semi-circle?  Here is another method of blocking the 'meter movement'... on a square meter.  One more method... knurling the clear plastic meter crystal... to hide the meter movement.  Let's call these "blockades"... meter masks.  We'll surely talk more about meter masks/encasements... soon.  Meter masks are possibly a necessity, used to keep direct sunlight from reaching the thermal-sensitive coil spring used in the meter movement (speculating).

Party on.  Comments welcome, as always.

Share this post

Link to post
Share on other sites

Yep, that's a type of meterControl, for sure.  Thanks for the complete sentence.  ;)

Ooh, a meterControl AND dialControl, all in the same picture!  Rad!  :) Square meter, though... maybe a little too modern.

Also steam gauge, also water gauge, also scale dial, also Simpson 260 VOM, also clock/watch, also roulette wheel, also dart board, also protractor, also rifle scope reticle, also... umm... I'm spent.  heh

The highly-versatile world-famous BabylonJS GUI RingControl... YOUR one-stop way of "getting around".  :)  Get it?  That's good humor! 

(There's a general shortage of round things in current BJS GUI controls... so... a device that helps us make round things... pretty useful.  GUI should have equal rights and stuff... for both square AND round controls.)  heh.  Even now... during GUI measurements... rounds are treated like squares.  Sad but true.  ;)

Share this post

Link to post
Share on other sites

If you wanted to make a tachometer a dynamic texture or a shader would be pretty easy to pull off.

11 hours ago, Wingnut said:

The highly-versatile world-famous BabylonJS GUI RingControl... YOUR one-stop way of "getting around".  :)  Get it?  That's good humor! 


HA! Ringo got it!

Share this post

Link to post
Share on other sites
2 hours ago, Pryme8 said:

If you wanted to make a tachometer a dynamic texture or a shader would be pretty easy to pull off.

Hi P8/everyone.

Including the numbers?  And sometimes rotated numbers?   The '60' looks strange, there, eh?

With easy user-selectable font families and sizes?

With any number of graduations per scale-ranges, with 3+ hash-mark weights (line lengths/thicknesses)?

With full-circle, 3/4-circle, half-circle, quarter-circle graduation scales/ranges?  Sideways?   Down-hangers?

And still be user-friendly and experiment-inviting to JS hackers who don't do shaders?

hmm.  Cuz, I'll bail on this "old-school" project... if it can be done wiser with shaders (and maintain user-friendly api)

Are there any GUI controls that use shaderMat/customMat, now?  I don't think so.

Perhaps start with Adam's colorPicker control... which has no numeric labels to fight-with.

If you can re-create the GUI ColorPicker, using shaders instead of context2d canvas drawing, I'll become a believer.  :)

Or were you talking about a tachometer face that is NOT a GUI control?  More specific to tachometer task, less universal/re-usable for other meters/dials?

That would seem more shader-possible, imho.  I don't know shader coding very well, and maybe shaders IS the way to go, even for universal/easy-user-modded round-meter-face drawing.  Here, I'm trying to use GUI control functionality and "rules".  *shrug*  But I'm listening/watching.  :)  ALL mad-scientist claims/experiments are certainly welcomed/encouraged wholeheartedly.  I LOVE big-dreaming.  :)

Share this post

Link to post
Share on other sites

its a little glitchy on the tac line length, and I have not added numbers yet.... but yeah here is a start.

Im sure there is a better way to clip out the ticks on the bottom as well then what I did, but referencing its polar coords vs mixing it out.

Share this post

Link to post
Share on other sites

@aFalcon, if you follow along by the time you get done with section 3 you will have a access to a new JS object that will help quite a bit with shader development and debugging.

I have not had any of the articles proofed or edited so that is like raw from my brain, excuses if there are typos or if its convoluted.

Share this post

Link to post
Share on other sites

Wingy, check this out... how to make translucent thick dashed lines in a circle?

Related to GUIMeter, but along lines of COMBINATION-LOCK....

UPDATE: had trouble getting line:width, thick translucent line would have been cool. Hello ribbon or tube, or...?


Share this post

Link to post
Share on other sites

Hi gang!

I'm working on a little teaching aid for layerMasks.  (need to teach myself, first)  :)

I'm hoping to change the camera.layerMask... with button presses.  Each button will show a different layer, that way.  (in theory)

But, I can't seem to get my menu buttons to be clickable (onPointerDownObservable).  No clicks seen.  hmm.

The observers are "added late" in lines 164-194.

Who has good eyes?  Can anyone see where I'm screwing-up?  Help welcome.  (thx)

I also don't know if all 8 bits are used for layerMasks, or just MSN.  (most-significant nybble)  (left 4 bits)

LayerMask docs are a little unclear, on that.  (more likely, Wingy's brain is a little unclear)  :)

Share this post

Link to post
Share on other sites

Thankya, DK!  YAY!!
Yep, I had my hierarchy all messed-up.  One of the children was dressed-up like an adult, and one of the adults was acting childish.  🔀

Coooool.  contentrect was supposed to be added first, and then contentpanel added to IT.  I had it backwards (and a little bit sideways).  PARTY!!!

The 7th button... 10000000... masks the GUI, too.  Difficult to push buttons after clicking that.  :) hmm.   (ok, ok, you CAN still click buttons even when the GUI is not seen).

I suppose I'll need to determine why that happens, huh? 

I hope it doesn't require Algebra.  😕  (Wingy's dog cacks-up a hairball)

Share this post

Link to post
Share on other sites

Crap!   @Dad72 taught me about existence of adt.layer about 5 months ago, and I told him that I would likely forget.  Yep, I sure did.  heh.  Thx Deltafish!

#12 PG - perfect now!  Yay! 

Hmm... a layer.  What is a layer?  (ponder ponder). 

I wonder if an ADT (Advanced Dynamic Texture) can become an equirectangular thingy...  a sky dome/pano.  hmm.  I think the controls would look seriously-stretched... like a carnival mirror.  Bet so.

But bending/stretching/warping an ADT.layer... is "counter-intuitive-to the nature-of"... a "layer", right gang?  (What did he say?) 

The reason it is called a layer... is cuz it is flat... and thus can be nicely z-indexed, alpha-tested, and alpha-blended.  Thoust shalst not bend, spindle or mutilate... a layer. That would be cruel to the BJS Layer.  :)

Besides, why would ANYONE want to make an equi-rect pano... from an ADT canvas?  That's just... demented.  Might just as well use 6 ADT's as the cubeMap textures for a skybox.  How goofy!  :)

Share this post

Link to post
Share on other sites

Hi again.

Speaking of ER panos (equi-rectangular)...

Did earlier ER panos... have that un-wanted conical "pit" at the bottom?  I don't think so.  I think that is new.

I think ALL the playground ER domes... have this issue.  Let's check:

Maybe it's a new in-scene bungee-jumping feature?

Does anyone have info about WHY there is a giant hole in the floor of my hotel room?  :)  (thx) 

I'm going to collar/leash/tie-off my dog, just to be safe.  heh

Share this post

Link to post
Share on other sites

Thanks DK!  Yeah, good question... about how so many cube versions got created.  Interesting.

Hi gang.  Another fun TWC post... and another fun playground.

It started... when i tried to learn more... about using a renderTarget(Texture)... as a source for a GUI ImageControl or ImageWithCenterTextButton (which perhaps, should be named buttonWithBackgroundImage   *shrug* - not important)  :)

Using RT's as a GUI image source... doesn't look easily-possible without big-time hacking, but that never stopped me.   :)  I'll imagine anything.

During my experiments, I learned about "pure controls"..  In the docs, it says:

There are two kinds of controls:

  • Pure controls: A pure control defines an action or an information useful for the user. It could be a TextBlock or a Button.
  • Containers: Containers are used to organize your UI. They can contain other controls or containers.

BUT... ImageButton and ImageWithCenterTextButton... are somewhat different.  Although they are pure controls, they are ALSO containers.  Both of these type of ButtonControls... allow _children, and have two children... an imageControl and a textBlockControl.  FUN!

SO, then I tried to swap the order of the children, so that the text is on the left, and the image is on the right.  THAT... didn't work.

SO, then I tried to set the _horizontalAlignment of each child, to make textBlock and Image... swap positions.  That failed, too.

SO, then I added ANOTHER ImageControl with horizontalAlignment set to the right, and that DID work... but didn't look very good.

ANYway... yep, the ImageButton and ImageWithCenterTextButton are not as "pure" as we might have once thought.  :D  They have been "hanging out" with the containers, and have learned some of the "containment ways".  :)  I thought it was all interesting... so I shared it.

Does anyone think they can make the button's image be on the right, and textBlock on the left?  Let's see what ya got.  Dazzle us.  :) Good luck.

Oh yeah, and if you can "pipe" a renderTarget(texture) to a GUI imageControl... you would become a serious hero of mine.  Seriously.  It looks like hard work.  The images used in GUI ImageControls... are DOM-ish, and you know what a royal bitch DOM images can be.  They're snooty, and prefer to ONLY be around their own type. :)

Share this post

Link to post
Share on other sites

Hey, I managed to position the image (children[1]) on the right, and the textBlock (children[0]) on the left.  Yay!

I used a chainsaw and sledge hammer.  :)   Move image to the right... easy.  Move textBlock to the left.. needed bulldozer.  :D

Line 56... resizeToFit... saved the day, somewhat.  Kludge-ish.  hmm.  I'm missing something obvious, I bet.

TextBlock position is not perfect... but better than other tries.  :)  I got some textBlock "flash", too... just after RUN click.

A bit more fun:  PG #5   textBlock "behaviors", v000.1 alpha  :)

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.