Borders for the Rendering Canvas

Demos and projects
21

Hi again. Well, I’ve been putting mesh borders on the canvas… and that’s fun and all.

So, i decided to branch-out. @i73 and I were fooling-around with a GUI panel… so I decided to try to particle-border THAT.

First, I had to put it in a master rectangle… make it easily moved-around within the adt. Then… I needed to change to a “For-Mesh” GUI… because otherwise… it is real difficult to “find” the border of a GUI rectangle… in worldSpace coordinates.

Generally speaking, (and likely incorrectly-stated)… the edges of a GUI rectangle are in screenSpace… X/Y only… and you need to… umm… “project” them into worldSpace coords?

It all sounded too complicated for me, so… make a plane… and make the GUI for the plane. THEN… parent some thin “plane-strips” (border edging) along the edges of that main plane… and spray particles from those thin edge-strip-mesh… in precise directions, within precise emitBoxes.

All sorts of tweaks and demented functionality came onboard. Border strips were parented to the main plane, and the positioning and span-lengths were hand-tweaked… because the sizes and positions made NO SENSE. They still don’t. Edge strips should be same span-length as edges of main plane… just like the edges of a picture frame. But noooo… it’s all a mess… but I WILL learn why.

Top border strip is 18 wide… but the main gui plane… is 30 wide. Go fig. Main plane is 25 height, but left border is 4.7 high. What the heck!? Where am I. Hand tweaked. erf. hmm.

Anyway, here it is… a gui rectangle with a sparkly particles (sparticles) border. Kind of fun. I hope @i73 doesn’t mind that we borrowed his GUI panel.

https://playground.babylonjs.com/#36UHXZ#46

Make some versions yourself, I’d love to see them. Improvements and Wingnut-teaching… quite welcomed. (thx)

PS: Does anyone know how to switch between particles BEHIND guiPlane… and IN-FRONT-OF? I used to know how to do that, I thought… using the forceDepthWrite stuff. But I went stupid, somehow, and can only get particles behind. (I realize the particles can’t be both behind AND before… at the same time. Front or back, but not both.)

It doesn’t matter on this demo, because custom direction1/2 values keep particles from crossing guiPlane completely, front or back. But if I could get them in front, I would likely remove masterRect thickness, and maybe move the particle sprayer strips… inward a bit… see what that looks like.

4 Likes
22

sombody here live in USA challange iranian people :slight_smile: ( i love him )

https://www.babylonjs-playground.com/#2617NN#3
https://www.babylonjs-playground.com/#2617NN#2

7 Likes
23

VERY nice! YUM! Thx Naz!

Can we get camera to pan/tilt? (thx for assist on that - anyone)

https://www.babylonjs-playground.com/#2617NN#4

(Maybe someday we realize that ownership of Earth lands is illegal/wrong, and we remove borders, so everyone is “Earth people”, eh? No more “us” and “them”, and instead, we are ALL “us”. Then we have a new world with many new friends that we all care-about.)

1 Like
24

Hi again. I wanted to change the title of this thread to “Borders for the Rendering Canvas” (removing the first word - “Mesh”)… but I have no post-editing “pencil icon” for that first post. Go fig. hmm.

Anyway, I decided to try a BabylonJS “layer” as a border, using a simple transparant-background (alpha) picture-frame picture. Unfortunately, there are not many “ornate” picture-frame pictures available in CORS-reach of the playground… but I did find one… not so ornate, though.

https://www.babylonjs-playground.com/#DJF437#32

Nevermind the target rings in the scene… just some test mesh. This PG uses a skybox, too, as you can see. Line 36 - layer.isBackground cannot be set true… here.

I can foresee a time when transparent-backgrounded picture frames like these… become commonplace and popular… especially among… yep, you guessed it… WebGL Girls. :wink: Most girls like pretty (viewport) borders… end of discussion. It’s a scientifically verified fact. heh.

The border used in THIS demo… is SO basic… that a full-screen advancedDynamicTexture (gui 2d) could do the same… using two large, round-cornered, bordered rectangle controls. (and no Layer or picture URL).

Speaking of dynamicTextures… has anyone tried to use one… as a layer source? (I think GUI 2d does exactly that, actually.)

Currently, it appears that BabylonJS Layers… are designed to accept URL’s. But what if… a layer could accept a dynamicTexture as a source, too? Or maybe… an AdvancedDynamicTexture (ADT) is already a mix of a dynamicTexture and a (utility) layer. ADT’s have isBackground-like properties very similar to a BJS Layer. ADT’s DO have a layer.

Perhaps… what I am seeking, here… is a new GUI 2d control… called a “borderControl”. hmm.

All in all, if anyone would like to attempt generating a dynamicTexture-based “picture frame” such as the above example… I’d love to see it. A TRUE GOD of dynamicTextures… might use fractals as the pattern along the borders of the viewport. That would be pretty… and could be “grown” dynamically… with a bit of JS-power applied to the dynamicTexture’s imageBuffer (a big array of Color4 values, one for each pixel of the dynamicTexture).

But painting the borders of a DT… with math-derived fractal patterns… will take some gen-time… maybe up to 20 secs… depending upon complexity of fractal patterns. So, we might have to wait a few seconds after RUN… for such a thing to complete being JS-drawn.

Me, I would be quite happy to see someone make a simple DT border/edging pattern… maybe with simple diamond shapes… easily drawn with the power of Context2d or SVG operations and a bit of JS.

IF ANYONE… is pretty good-at drawing on dynamicTextures using JS, and can make us a DT with ANY border-edging of ANY kind… that would be great and I’d love to have one for further layer testing. Be sure to set all no-draw pixels (blank areas)… to alpha=0 (transparent). We need to see the webGL scene… thru the center of the frame/borders.

Hey, thx for the help, dynamicTexture JS-genned frame-makers. Maybe someday… we have dynamic-genned vines and leafs… along the borders. FANCY! Girls would LOVE that. Same with lace. And flowers (spirographic?). And hearts. Purrrrdy.

If you/we could math-gen an ornate/intricate lace border… onto a DT… to use as a BJS layer… man, I think we could cause a WebGL-girl stampede!

“Which webGL engine does those pretty lace viewport borders? Oh, that’s BabylonJS? Ok, I choose THAT engine, then.” :slight_smile:

Yep, I can hear them all saying that. Gen some basic or ornate border edging for me, someone/anyone, please (thx). And no, ya can’t use fancy shader code, @nasimiasl , because that stuff scares girls (and often, guys, too). :slight_smile:

If anything, we could use an entire VERY EASY TO config/program… dynamic texture border generator SYSTEM… so the girls (and guys) can turn knobs and have fun customizing their borders/frames.

In a way, I am talking about the first “programmable” GUI 2d control. It may be SO different from other controls… that it requires a base class OTHER THAN control.ts. Maybe it requires a new base class called “dynamicControl”. hmm.

In essence, it would allow us to plug-in “formulas” like a function plotter/grapher might use… and those formulas could draw pretty borders on these viewport frames. Perhaps multiple formulas could be applied… plottings atop plottings, especially when each formula plots in a different color. Nice. A “border formula” swap meet might happen, and border-formula repositories might spring-up. :slight_smile:

Animated sprite borders are another option (somewhat related to particle borders). Let’s save that for a later chapter. :slight_smile:

1 Like
25

Don’t know how but I have a “pencil-icon” next to your title and so could edit your title. You will be pleased to know I cannot edit your posts. Hope you don’t mind me making the changes for you, will put Mesh back if you want. (Does make me wonder who has the rights to alter titles and whether this is a privilege or a bug! OK it is part of Discourse you would think a contributor could change their own title though)

Like your use of layers, here is me playing with another border https://www.babylonjs-playground.com/#DJF437#33

Found it in Google images with usage rights Labeled for re-use.

EDIT Also found out that Discourse has a time limit after which you cannot edit your post.

2 Likes
26

Oooh, that’s a nice one. It fits screen well, survives canvas resizes, lookin’ good! It has an interesting/puzzling thin line at the top of the picture, though. 2 pixels tall, approx? hmm.

Thx for the edit, well done! Crazy functionality going-on. Thx for the info on the time limit thing… too. And thx for your interest in bordering the render-canvas. I’m startin’ to like you, JK. :wink: (always have, actually, and easily). You’re one of the few who can “ride along” and halfway understand these crazy ideas.

Were you a hippy… sometime during your life, JK? :slight_smile:

Here’s a PG in-code search for ‘context2d’. Those are the beginnings of… drawing on dynamicTextures with JS. Remember when you built those linesMesh and particleSystem spirograph shapes, John? (not that long ago). Yum!

I love plotting with math. I wish I had talent in that department. I can envision spirograph flowers along the borders… but… the corners are a little rough. No drawing in the corners of the canvas == least hassles.

@jerome did some fractal stuff… somewhere, too. It was used as elevation for a physics-active heightMap… but I can’t find the PG anymore. @RaananW had just gotten heightMap impostors activated, and had made a little golf sim playground, or balls-in-a-bowl stuff. Jerome made a fractal generated heightMap and threw some balls onto it. Good times… I smiled a lot.

Yuh, yuh, borders and frames… a whole world COULD open-up… in that area. A new little group of hobbyists… the Border Patrol. Err… maybe that’s not a good name. :open_mouth:

2 Likes
27

that one Test Babylon Mandelbrot ?

2 Likes
28

YEAH! (Wingy dances around like an idiot). Ohhh… it’s done with a ribbon! Well shut my mouth wide open! Not much code to make it. Darned pretty. Thx J. We can just pipe that data into Color4 dynamicTexture image… and make a grayscale or colorful image.

Yummy math code! I stuck my tongue onto that inner-most nested for-loop, and it gave me the same “tingle” as a 9-volt battery… but with a nice wintergreen flavor, too. :smiley:

1 Like
29

You need to animate it!

30

wow what a fast 2d noise. can you do one with a 3d return setup the with the same kinda distribution?

31

hmm maybe let me check ( it is hard keep fps on 60 )

That Can possible if we make 3 or 4 layers not full deep level (255 deep color )

https://www.babylonjs-playground.com/#2617NN#7

4 Likes
32

Thanks @RaananW how are you i don’t meet you a long time

33

Hey! Your demos are always quite amazing :slight_smile:

Been under the radar for quite some time, working on WebXR now. And I will do my best to be a lot more visible!

2 Likes
34

i most try buy a new device for have chance to test WebXR Great work thanks