Jump to content

Creating circle using shaders

Clément Faure

Recommended Posts

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);




- 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.

Link to comment
Share on other sites

take shader from


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.

Link to comment
Share on other sites

  • 2 weeks later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...