continued_at_new_forum The Wingnut Chronicles

[JackFalcon]

!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

....add(falseCamera.position))?

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

MOD:  https://www.babylonjs-playground.com/#C0PXB0#6

 

[Wingnut]

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)

https://www.babylonjs-playground.com/#91I2RE#83

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.

[JackFalcon]

Also "tachometer"...

https://en.wikipedia.org/wiki/Tachometer

[Wingnut]

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

http://2.bp.blogspot.com/-92QXGUoR5fI/TdVV7hGk1-I/AAAAAAAADxM/I9I6_UbJ8ZU/s1600/Heathkit%2BGD-1u.jpg

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. 

[Pryme8]

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!

[Wingnut]

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. 

[Pryme8]

https://www.babylonjs-playground.com/#KZ928Y#3

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.

[Wingnut]

Hey, that's pretty danged COOOOOL!  Excellent.  hmm.

[Wingnut attaches a BJS ShaderMaster pin... onto P8's lapel and shakes his hand vigorously] 

[JackFalcon]

...diving-in.

great stuff @Pryme8

How do you do it?

Workflow tips? Or, how do you reduce problem into functions? Etc. Please, need more info! : )

The single complete and grammatical sentence (above) dedicated to @Wingnut...

Trying! 

[Pryme8]

http://pryme8.com/procedural-investigations-in-webgl-introduction/
https://thebookofshaders.com/

Ill bee adding more sections to my articles, that will describe doing stuff like this.
 

[JackFalcon]

~ afalcon will read...

[Arte]

You Guys Rock! 

Thank you for all your efforts and dedication. 

[Pryme8]

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

[Pryme8]

https://www.babylonjs-playground.com/#3RVPH9#4
...
https://www.babylonjs-playground.com/#3RVPH9#6
 

Ray-marched version, which if was rendered out on a hud as a small object would prolly make no impact on performance but is like 1000 times cooler then a 2d one.

[JackFalcon]

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

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

https://codepen.io/yuanchuan/pen/KyJvmo

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

~GUILOCK1(http://www.babylonjs-playground.com/#XX54TW#3)

[JackFalcon]

@Pryme8 links are - radical.

Yes read/edit/review, after steam release next monthish. : )

[Wingnut]

Hi gang!

https://www.babylonjs-playground.com/#11NJQT#4

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) 

[Guest]

Here is a fix for you: https://www.babylonjs-playground.com/#11NJQT#8

(just commenting line #128 because the rectangle was on top of buttons and thus capturing the input)

[Wingnut]

Thankya, DK!  YAY!!  https://www.babylonjs-playground.com/#11NJQT#11
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)

[Guest]

this is because  it must be : advancedTexture.layer.layerMask = 0x11111111; (and not advancedTexture.layerMask)

[Wingnut]

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! 

[Wingnut]

Hi again.

Speaking of ER panos (equi-rectangular)... http://www.babylonjs-playground.com/#27FN5R#24

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:  http://doc.babylonjs.com/playground/?code=equirectangular

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

[Guest]

Well equirectangular is expected to project to a sphere:

http://www.babylonjs-playground.com/#27FN5R#25

 

I don't know why we have so much cube using it but it should not have worked with cube

[Wingnut]

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

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

https://www.babylonjs-playground.com/#XCPP9Y#546

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

[Wingnut]

https://www.babylonjs-playground.com/#PF5SYT#4

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. 

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