GLSL | PXL&INK

Obsidian: [[11-01-01-HLSL]] [[09-01-01-U_Shaders]] [[15-01-01-Shading]] Obsidian: [[11-01-01-HLSL]] [[09-01-01-U_Shaders]] [[15-01-01-Shading]]

the book of shaders

GLSL w Houdym https://serano-vfx-lab.hatenablog.com/entry/2020/05/11/160807

Data types


float	1.0 - use with `.` precision mediump float; (lowp / highp)
vec2 , vec3 , vec4	v.x = v.r = v.s = v.[0], xyzw, rgba, stpq
mat2 , mat3 , mat4
sampler2D
samplerCube
Uniforms	Values that stay the same for all vertices of a single draw call. (like bridges between the CPU <> GPU)
Attributes	Data pulled from buffers
Textures	Data from pixels/texels

Key Words

vec4 gl_FragColor - The final pixel color is assigned to the reserved global variable Shader Language has a single main function that returns a color assigned to the reserved global variable
vec4 gl_FragCoord - default input with coordinates

Macros

Start with #. Pre-compilation happens right before compiling and copies all the calls to #defines and check #ifdef (is defined) and #ifndef (is not defined) conditionals.

#ifdef GL_ES
precision mediump float;
#endif

#define PI 3.14159265359

Swizzle

vec3 ColorA, ColorB;
ColorA.rg = vec2(1.0);  // 1. > R,G
ColorA[2] = 0.0;        // 0. > B
ColorB = ColorA.rbg;   // swap rbg > rgb

Functions

sin(x), cos(x), tan(x), asin(x), acos(x), atan(x) - math
pow(), exp(x,exponent), log(), sqrt(x)
mod(x,0.6) - x modulo of 0.6, fract(x) - fraction part, ceil(x) - int greater or equal, floor(x) - int less than or equal to x
sign(x) - extract the sign, abs(x) - absolute value
clamp(x,0.0,1.0), min(0.0,x) lesser of, max(0.0,x), mix(colorA, colorB, blend)

step(x,treshold)- bool with threshold, smoothstep(0.2,0.6,x) - interpolate the value between the defined range

rotate(uv, degrees)

float dist = distance(uv, vec2(0)); - dist
float stepDist = step(0.5, dist) - treshold, gradient
float smoothDist = smoothStep() -

Write Function

in - read-only,
out - write-only,
inout - read-write.

int newFunction(in vec4 aVec4, out vec3 aVec3, inout int aInt){
}

Return red color:

vec4 red(){
    return vec4(1.0,0.0,0.0,1.0);
}

Simple operations

vec4 color = vec4(vUV.s, 0.0,0.0,1.0); - gradient on Uv
vec4 color = vec4(vec3(1.0,0.0,1.0),1.0); - combine vec3 and float
max(abs(uv.x), abs(uv.y)) - draw square

use coordinates to plot color

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;

void main() {
	vec2 st = gl_FragCoord.xy/u_resolution;
	gl_FragColor = vec4(st.x,st.y,0.0,1.0);
}

Branching if

Expensive, calculating both branches.

http://theorangeduck.com/page/avoiding-shader-conditionals

Touch designer:

https://docs.derivative.ca/Write_a_GLSL_Material

(tab / 2 clikc on empty) OP Create dialog > TOP > GLSL
‘P’ - on viewer node to assign params

Touch designer Compute shader

layout (local_size_x = 8, local_size_y = 8) in;
void main(){
  vec4 color;
  // color = texelFetch(sTD2DInputs[0], ivec2(gl_GlobalInvocationID.xy), 0);
  col = vec4(1.0);
  imageStore(mTDComputeOutputs[0], ivec2(gl_GlobalInvocationID.xy), TDOutputSwizzle(color));
}

Touch designer

out vec4 fragColor;

void main()
{
  // vec4 color = texture(sTD2DInputs[0], vUV.st);
  vec4 color = vec4(1.0);
  fragColor = TDOutputSwizzle(color);
}

The book of shaders

#ifdef GL_ES
precision mediump float;
#endif

uniform float u_time;

void main() {
	gl_FragColor = vec4(abs(sin(u_time)),0.0,0.0,1.0);
}

Shadertoy

void mainImage(out vec4 fragColor, in vec2 fragCoord)
{
    vec2 uv = fragCoord/iResolution.xy;
    vec3 col = 0.5 + 0.5*cos(iTime+uv.xyx+vec3(0,2,4));
    fragColor = vec4(col,1.0);   
}

.

https://www.iquilezles.org/www/index.htm - functions
https://www.youtube.com/channel/UCdmAhiG8HQDlz8uyekw4ENw

https://www.khronos.org/registry/OpenGL/specs/gl/GLSLangSpec.3.30.pdf
https://www.khronos.org/files/opengl44-quick-reference-card.pdf