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.