Shaders (GLSL)

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

Random info

Shader language intro (for C++ but applies to all): http://learnopengl.com/#!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: http://www.openglsuperbible.com/ Others have used https://learnopengl.com/ and https://thebookofshaders.com/

Functions

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

Types

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.

Spritesheet problem

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.