CODEWITHSUNDEEP
three.js
user3995789
user3995789

Reputation: 3460

How to make a rounded corner 2d Sprite with plane geometry shader always facing the camera in threejs webgl geometry space

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!

Upvotes: 3

Views: 1891

Answers (1)

prisoner849
prisoner849

Reputation: 17596

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.

Upvotes: 1

Related Questions