Jump to content

Draw circle and fill with transparent image.


Brijesh
 Share

Recommended Posts

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.

 

1493046244_tumblr_circle_gray.png.79f7d573481c04e7f7a1cdbee3488b60.png

 

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.

Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

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!

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...