Help with a shader that is a circle with a border

[danechitoaie]

Hi,
I’m new to Three.js and by following some tutorials and examples I was able to create a 3d sphere and apply a texture to it.
Now I’m trying to place some markers on the sphere and stuck on this with no idea what to do and how to do it.

Basically what I am trying to achieve is a circle like this

with a black solid thick border around it that I want to place on the globe.

For this I believe I need to create a mesh with a CircleBufferGeometry and then apply the right fragment shader to it that will make it look like that (red gradient with black border) but I have no idea how to do that.

I have found the following https://www.abubujs.org/learning/tutorials/?help=draw-circle but I don’t know how to translate this to Three.js and how to add the border.

[Mugen87]

Have you considered to just create a transparent texture and map it to a plane geometry? In this way, you don’t have to write a custom shader and you have a lot of design possibilities to properly author the texture.

Basic code: Edit fiddle - JSFiddle - Code Playground

[danechitoaie]

That could work well. But the texture looks stretched. Any idea what I need to to so it maintains it’s scale and looks right?

[tfoller]

You can make a marker out of two circle geometries, the smaller circle above the bigger, it will look like a circle with a border.

fiddle