Three.js WebGL Draw a circle custom fill and border color from shader

Question

I'm using Three.js with the WebGLRenderer. I'm trying to figure out or see an example for how to draw circles using CircleGeometry and be able to control their fill and border color from a vertex or fragment shader. Is this even possible without using an image for the texture? Sorry if this is really simple, I'm still trying to wrap my head around Three.js and WebGL so any help is appreciated.

Abstract Algorithm Abstract Algorithm · Accepted Answer · 2013-08-25T13:30:02

Geometry presentation of the circle is imprefect because roundness depends on the number of vertices that make up that circle and it's quite difficult to change parameters.
Texture presentation has limitation when zooming in and out, obviously.
The best choice: shader. Create square surface and write fragment shader for it that will generate the circle image. That's easy to modify because in fragment shader you're only checking fragment's distance from center of the circle and you can easily change colors and stroke params. Also, you have only 4 vertices, which is really low and great if you have many circle-like objects.

Hope this helps.

EDIT:

uniform vec3 innerCol;
uniform vec3 strokeCol;
uniform float radius;
uniform float stroke;

varying vec2 vUV;

void main() {
    float border = (radius - stroke/2.)/(stroke/2.+radius);
    float d = distance(vUV, vec2(.5, .5));

    if(d<=border) gl_FragColor = vec4(innerCol, 1.);
    else if(d>border && d<1.) gl_FragColor = vec4(strokeCol, 1.);
    else discard;
}

This is fragment shader, I am not sure if it's 100% correct but you should get the point from it and see what's going on.

Three.js WebGL Draw a circle custom fill and border color from shader

1 Answers