3

How can I draw a rectangle texture as a 2d sprite with rounded corners, like this:

   _____
  /     \
  |     |
  \_____/

I figured, i need to use a mask texture and a shader to make a circle mask but I can't apply shadermaterial to a 2d sprite!

gman
  • 100,619
  • 31
  • 269
  • 393
user3995789
  • 3,452
  • 1
  • 19
  • 35
  • 1
    rounded corner cube: https://threejs.org/examples/webgl_modifier_subdivision.html then facing the camera: mesh.lookAt( camera.position ); – Radio Dec 01 '16 at 18:27
  • 1
    @Radio this sprite moves in 3d world, and it gets smaller because of the perspective, I want it to look as in orthogonal projection and stay the same like an hud element. – user3995789 Dec 02 '16 at 07:48

1 Answers1

1

You can create a texture with drawing on a canvas or draw a texture you want in any image editor, then apply it to a sprite. If you want the sprite to have the same size, independent on distance, then look this answer. Both my answers have jsfiddle examples.

Community
  • 1
  • 1
prisoner849
  • 16,894
  • 4
  • 34
  • 68
  • why do i use threejs if i am gonna draw on canvas?, just make it part of the library it lacks extensive documentation anyway – user3995789 Dec 03 '16 at 07:43
  • 1
    Maybe this [shadertoy example](https://www.shadertoy.com/view/4tlSzr) will give you an idea to achieve what you want. But totally IMHO, the less computations (and on a GPU too), the better. – prisoner849 Dec 03 '16 at 08:35