Skip to content

Shaders (GLSL)

Created: 2016-04-15 11:06:07 -0700 Modified: 2019-06-07 12:01:26 -0700

Shader language intro (for C++ but applies to all):!Getting-started/Shaders

Lucalo123: ye you should and try not to make a shader call every iteration

Lucalo123: shader language has time variables and such too

Lucalo123: usually you initialize all the colors / textures etc before runtime

Lucalo123: and use uniforms to change values

rebinding a texture = separate draw call, changing a shader or its uniform = a separate draw call

3:25 AustinSpafford: @Adam13531 Copying the “!learnshaders” command from Jessica’s channel: Jessica used the 5th editon of this book: Others have used and

fract will give you the value of a number after the decimal point, e.g. “fract(1.123)” ==> “0.123”.

Attribute vs. uniform vs. varying (reference):

  • Uniforms are global and cannot be modified by shaders. They are passed in by the application.
  • Attributes are per-vertex (as opposed to global like uniforms) and are only used by the vertex shader.
  • Varying are used for interpolated data between vertex and fragment shaders. The vertex shader sets this, then the fragment shader reads it.

When I was working in Pixi JS, I wanted to colorize sprites based on a combination of base sprite and mask sprite. The issue is that both of these sprites came from spritesheets, so their UV coordinates were based on the spritesheet. What I needed to do (and didn’t actually figure out how thanks to Pixi JS’s API) was specify aMaskTextureCoord:

// vertex shader

attribute vec2 aMaskTextureCoord;

varying vec2 vMaskTextureCoord;

void main(void){

gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);

vTextureCoord = aTextureCoord;

// This will be interpolated in the fragment shader automatically

vMaskTextureCoord = aMaskTextureCoord;

vColor = vec4(aColor.rgb * aColor.a, aColor.a);


Then, in the fragment shader, I would’ve been able to take in the “varying vec2 vMaskTextureCoord;” and use that to figure out what color a particular pixel was.