I feel like I'm misunderstanding how to work with vector/fragment shaders. My vector shader is as follows:

uniform mat4 uVMatrix;    // view (camera transformations)
uniform mat4 uMMatrix;    // model (object transformations)
uniform mat4 uPMatrix;    // projection
attribute vec4 aVertexPosition;     // passed in
attribute vec4 aVertexColor;
varying vec4 vColor;

void main() {
    gl_Position = uPMatrix * uVMatrix * uMMatrix * aVertexPosition;
    vColor = aVertexColor;    // pass the vertex's color to the fragment shader

Pretty simple. Right now I just have a simple square that I'm transforming in 3D space and drawing. I want to make a see through circle in the middle of the suqare as follows:

object to draw

This square has 4 vertices that I transform in the vector shader. Here's my fragment shader:

precision mediump float;    // how precise to be with floats
varying vec4 vColor;        // interpolated from the vertices

void main() {
    gl_FragColor = vColor;

Now, I've seen I have access to gl_FragCoord, but that coordinate is after all the vector transformations, right? How can I manipulate the pixels in the square, before all the projection transformations, etc.? I don't think I can do it in the vector shader, as there's only 4 vectors...

  • \$\begingroup\$ Are you asking about accessing the mesh's texture coordinates, rather than the transformed on-screen coordinates? \$\endgroup\$
    – DMGregory
    Sep 21, 2016 at 12:47
  • \$\begingroup\$ It presently doesn't have texture coordinates (unless I'm misunderstanding you). It's just a gradient of red to white. I want to modify the colors in the middle to be see through in a circle pattern. The problem is the coordinates I'm given are already transformed so I don't know to do it. Let's say I rotate the shape, how would I have the circle rotate with the shape \$\endgroup\$
    – robev
    Sep 21, 2016 at 13:03
  • \$\begingroup\$ What you describe is usually accomplished via texture coordinates. You pass an additional channel of data to the fragment shader, representing the vertex's position in your surface coordinate system. This could be read from uvw coordinates stored in the mesh, or calculated from the object/world/screen-space positions of the vertices. \$\endgroup\$
    – DMGregory
    Sep 21, 2016 at 13:06
  • 2
    \$\begingroup\$ It's "vertex shader", not "vector shader". \$\endgroup\$ Sep 21, 2016 at 15:16
  • \$\begingroup\$ @SurvivalMachine you're right, my bad. \$\endgroup\$
    – robev
    Sep 21, 2016 at 22:57

1 Answer 1


A simple way to achieve this would be to assign UV to your quad mesh, and then you can utilize that UV in your fragment shader to draw the circle by doing something like this (pseudocode):

color = uv.magnitude > 0.5f ? invisible : visible

This will work because the UV's are interpolated over the polygon.


You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .