Differences

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

--- shader:start [2025/05/21 14:22] – [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. Here we'll use Shadertoy's standard.
@@ 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 86: / Line 88: @@
 </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 ====