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

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

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

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

circle.position.set(400, 300);

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.

Have a good day.

##### Share on other sites

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.

##### Share on other sites
• 2 weeks later...

Thank you so much for your clear response.

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

×   Pasted as rich text.   Paste as plain text instead

Only 75 emoji are allowed.

×   Your previous content has been restored.   Clear editor

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