Creating circle using shaders

[Clément Faure]

Hello everyone,

I have struggled all day long to create a simple filled circle using Shaders.

I succeed creating triangle and square thanks to Pixi example.

My approach is the following one : Creating a square and hide some pixels using discard in fragment.

const geometry = new PIXI.Geometry().addAttribute("aVertexPosition", [100, 100, -100, 100, -100, -100, 100, -100, 200, 200], 2).addIndex([0, 1, 2, 0, 2, 3]);

const shader = PIXI.Shader.from(`
   precision mediump float;

   attribute vec2 aVertexPosition;

   uniform mat3 translationMatrix;
   uniform mat3 projectionMatrix;
 
 
   void main() {
    gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);
   }
`,
`
precision mediump float;
 
 uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
 
   
   void main() {
  
   
   	vec2 coord = gl_FragCoord.xy;

	// vec2 st = gl_FragCoord.xy/u_resolution;
    // float pct = 0.0;
    // a. The DISTANCE from the pixel to the center
    // pct = distance(st,vec2(0.5,0.5));
	// if (pct > RADIUS) discard;

	gl_FragColor = vec4(coord.x, coord.y, 1, 1);
   }
`);

const circle = new PIXI.Mesh(geometry, shader);

circle.position.set(400, 300);

app.stage.addChild(circle);

 

Issues : 

- In my example, i'm just trying to display my square with differents colored depending on position => Why the square is still white ? coord.x seems to be very high (around 100000000000) leading the color to be always vec4(1, 1, 1, 1).

- When calculating the distance, what is the center of the circle ?

 

If someone already face this issue, a little help would be really appreciated.

 

Thank you in advance.

Have a good day.

[ivan.popelyshev]

take shader from

https://pixijs.io/examples/#/mesh-and-shaders/triangle-textured.js

as a base

remove texture

distance(vec2(0.5), vUvs) will give you from 0 to 0.5 for circle, and more than 0.5 for outer part

If you want good smoothing - oh , that's more difficult, multiple options to get width of pixel in UV normalized coord:

1. use fwidth() , but you have to enable derivatives for that and add "ifdef". or switch to webgl2 and es300 shader format - it just works there.

2. calculate scale in vertex shader, pass it to varying

Now, you only need a function that calculates alpha based on distance - well, hope you are good with math.

I would like to see example of that basic thing in pixi examples, because , honestly, my demos with graphics-smooth shader are too big

If you want bigger help with that thing - you have to wait when im available for hour or two.

[Clément Faure]

Thank you so much for your clear response.