Draw circle and fill with transparent image.

[Brijesh]

I draw some shapes using different mashes. Now i want to draw a circle around this shapes and apply some image to that circle so my shapes display upon that image.

Simply say set some portion as a background of my shapes and apply some image to that background with circle shape.

 

 

Suppose rectangle is my canvas, "t" is my 3Dshape that i draw using meshes now i want to draw circle around  shape and apply some transparent image to that circle so image show like a background image.

[GameMonetize]

Hum not sure to completely get what you want here. Can you provide a playground of what you already have.

If your camera is not moving, I think you can have a plan with a DynamicTexture on it and use this texture to draw a circle

[Brijesh]

Thanks @Deltakosh for reply.

I draw Ellipse2D using ScreenSpaceCanvas2D so 50% of my problem solved.

Now i fill that Ellipse with some color :-    fill: BABYLON.Canvas2D.GetSolidColorBrushFromHex("#0000FF80"); Its working fine.

But now i want to fill that Ellipse with some image not with a color !!  I want to set some image as a background of Ellipse. Is it possible ??

 

[GameMonetize]

Can you create a repro in the Playground. This will help me understand how to do what you want to achieve :0

[Brijesh]

Hi @Deltakosh

My Playground scene is like : https://www.babylonjs-playground.com/#1MSEBT#188

Now in this scene i fill Ellipse background with

       fill: BABYLON.Canvas2D.GetGradientColorBrush(new BABYLON.Color4(0.7, 0.5, 0.9, 0), new BABYLON.Color4(0.5, .5, .5, .3));

Is it possible to fill background with some image ??

I want to set some image as a background image for sphere and within 2D Ellipse.

 

 

2DEllipse.zip

[GameMonetize]

Hello I don't think this is supported by Canvas2D.

 

This is why I suggested using DynamicTexture where you can control the drawing with a context: http://stackoverflow.com/questions/4276048/html5-canvas-fill-circle-with-image

[Wingnut]

Hi guys.  There is a work-around... using a texture (of a circular thing) with transparent background... on a sprite2d.

https://www.babylonjs-playground.com/#1MSEBT#192

You may wish to put the ellipse2d and sprite2d into same group2d, of course.  Will this work for ya, B? 

It is not a fill, but a usable work-around, perhaps.  Set an opacity value on the sprite2d... to make the image more/less transparent.

[GameMonetize]

Really smart!

[Brijesh]

Thank you so much @Deltakosh and @Wingnut for helping me...!!!!!!!!!

[Wingnut]

20 hours ago, Deltakosh said:

Really smart!

I gotzzz a great toolbox-o-tools (BJS and its sweet features)... to appear smart-with.    Thanks for your kindness, though, and thanks for doing ALL the good things you do, DK.  Five years ago, I was completely geometry-stupid, yet longing-for a FRIENDLY way to learn it.  I found it, and so much more... in BJS.

And even though JS and its non-threading... holds-back webGL a bit, that "perf struggle" makes people learn/write tighter code, and guard renderLoop from bog.  JS "instills a discipline" as it teaches us about itself, and with BJS showing us the results... in pretty or ugly 3D scenes.  That's great.

If I HAVE TO watch my bad JS code... crash and burn, why not have it crash & burn in gorgeous colors, textures, shadows, particles?!  heh.  You will not find/see a more beautiful "crash" in ANY other coding environment. 

I think 3D model portability... you know... import models into/out-of anything... is still a weakness in 3D land.  BabylonJS is WAY ahead of "the game" in that department, actually waiting-for the rest of the world to get its crap together.  I like that part.   

It's SO much fun... hanging around here... with BJS and the gang.  BJS is right up on the bleeding edge, yet has done that with amazing backward-compatibility success.  THAT... is not easy at all.  maxKudos == true;  Party on!

[GameMonetize]

Quote

JS "instills a discipline"

Can't agree more