Differences

This shows you the differences between two versions of the page.

--- shader:start [2025/05/21 13:49] – [Circle] mh
+++ shader:start [2025/06/02 21:23] (current) – external edit 127.0.0.1
@@ Line 4: / Line 4: @@
 ===== Coding Shaders =====
+Shaders take a coordinate for each pixel on it's canvas and outputs an rgba value for that coordinate.
 ==== Normalized input Coordinates ====
-Generally the ''vec2 uv'' is used to describe a normalized input coordinates by dividing the coordinate by the current resolution :
+Generally the **''vec2 uv''** is used to describe a normalized input coordinates by dividing the coordinate by the current resolution :
-Different compilers use different syntax to describe the resolution.
+Different compilers use different syntax to describe the resolution. Here we'll use Shadertoy's standard.
 <code glsl>
@@ Line 55: / Line 57: @@
     float d = length(uv);
     float r = .3
-    float c = 1.-smoothstep(r, r-.02, d);
+    float c = smoothstep(r, r-.02, d);
     // Output to screen
@@ Line 64: / Line 66: @@
 <code glsl>
-float drawCircle(vec2 uv, float r, float blur) {
+float drawCircle(vec2 uv, vec2 p, float r, float b) {
-    float d = length(uv);
+//p for Position, r for Radius, b for edge Blur
-    float c = 1.-smoothstep(r, r-0.02, d);
+    float d = length(uv-p); //This draws to the
+    float c = smoothstep(r, r-b, d);
     return c;
 }
+</code>
+In the main function, draw multiple items by adding or subtracting to the color variable (the one being output in the end).
+Drawing multiple circles for example :
+<code glsl>
+    float b = 0.01; // Blur of edges of circles
+    float c = drawCircle(uv, vec2(0.), 0.4, b);
+    c -= drawCircle(uv, vec2(-.13, 0.12), 0.08, b);
+    c -= drawCircle(uv, vec2(.13, 0.12), 0.08, b);
+</code>
+<WRAP info>
+**Note :** when adding or removing regions in this manner, the color value for each RGB component of each pixel **can go** below 0.0 and above 1.0.
+Shaders will automatically clamp the output between 0.0 and 1.0 but during the calculation of the color, the real value must be taken into account.
+This behavior can lead to unexpected behaviors and colors in certain regions where multiple subtractions/additions have been applied.</WRAP>
+==== Rectangle ====
+To draw a rectangle we can use a function that draws bands using **''smoothstep''** and then multiply it twice to draw a band horizontally and another band vertically.
+The band function would look like this
+<code glsl>
+float drawBand(float t, float start, float end, float blur){
+    float step1 = smoothstep(start-blur, start+blur, t);
+    float step2 = smoothstep(end+blur, end-blur, t); //This one is inverted because it's on the other side, going from 1 to 0.
+    return step1*step2;
+}
+</code>
+Then get a rectangle by calling this function twice on the x and y :
+<code glsl>
+    float mask = 0.;
+    float b = .01;
+    mask = drawBand(uv.x, -.2, .2, b);
+    mask *= drawBand(uv.y, -.2, .2, b);
+</code>
+==== Adding Color ====
+Add color by using a **''vec3 col''** (usually named this way) and creating masks (grayscale, with full black where color won't draw and full white where color draws).
+Simply multiply color by the mask.
+For the circle example above for example, it would look something like this :
+<code glsl>
+   vec3 col = vec3(1., 1., 0.); //Initialize color to full yellow.
+    float b = 0.01; // Blur of edges of circles
+    float mask = drawCircle(uv, vec2(0.), 0.4, b);
+    mask -= drawCircle(uv, vec2(-.13, 0.12), 0.08, b);
+    mask -= drawCircle(uv, vec2(.13, 0.12), 0.08, b);
+    col *= mask;
 </code>
 ===== ISF =====