help for newbies

README.md

@@ -9,7 +9,30 @@ Learn basics of fragment shader
 
 ## Prerequisites
 - Install [glslviewer](https://github.com/patriciogonzalezvivo/glslViewer)
-
+- Install VScode
+- Install Glsl-canvas [glsl-canvas](https://marketplace.visualstudio.com/items?itemName=circledev.glsl-canvas)
+
+
+## VSCode config
+Open the workspace frag.code-workspace 
+update this file to change the channels/textures used by Glsl-canvas to render in viewer
+
+	{
+		"folders": [
+			{
+				"path": "."
+			}
+		],
+		"settings": {
+			"glsl-canvas.textures": {
+				"0": "./girl.jpg",
+				"2": "https://rawgit.com/actarian/plausible-brdf-shader/master/textures/noise/cloud-1.png",
+				"1": "https://rawgit.com/actarian/plausible-brdf-shader/master/textures/noise/cloud-2.jpg",        
+			}
+		}
+	}
+
+![](screenshot.jpg)
 ## Hello world
 Show red pixels
 

blend_burn.frag

@@ -1,3 +1,7 @@
+#ifdef GL_ES
+precision mediump float;
+#endif
+
 uniform vec2 u_resolution;
 uniform sampler2D u_tex0;
 uniform sampler2D u_tex1;

blend_mask.frag

@@ -1,3 +1,8 @@
+#ifdef GL_ES
+precision mediump float;
+#endif
+
+
 uniform vec2 u_resolution;
 uniform sampler2D u_tex0;
 uniform sampler2D u_tex1;

blend_multiply.frag

@@ -1,3 +1,7 @@
+#ifdef GL_ES
+precision mediump float;
+#endif
+
 uniform vec2 u_resolution;
 uniform sampler2D u_tex0;
 uniform sampler2D u_tex1;

blend_normal.frag

@@ -1,3 +1,8 @@
+#ifdef GL_ES
+precision mediump float;
+#endif
+
+
 uniform vec2 u_resolution;
 uniform sampler2D u_tex0;
 uniform sampler2D u_tex1;

blend_overlay.frag

@@ -1,3 +1,7 @@
+#ifdef GL_ES
+precision mediump float;
+#endif
+
 uniform vec2 u_resolution;
 uniform sampler2D u_tex0;
 uniform sampler2D u_tex1;

blend_screen.frag

@@ -1,3 +1,7 @@
+#ifdef GL_ES
+precision mediump float;
+#endif
+
 uniform vec2 u_resolution;
 uniform sampler2D u_tex0;
 uniform sampler2D u_tex1;

blur_bokeh.frag

@@ -1,3 +1,8 @@
+#ifdef GL_ES
+precision mediump float;
+#endif
+
+
 uniform vec2 u_resolution;
 uniform sampler2D u_tex0;
 

blur_linmotion.frag

@@ -1,3 +1,7 @@
+#ifdef GL_ES
+precision mediump float;
+#endif
+
 uniform vec2 u_resolution;
 uniform sampler2D u_tex0;
 

blur_rotation.frag

@@ -1,3 +1,7 @@
+#ifdef GL_ES
+precision mediump float;
+#endif
+
 uniform vec2 u_resolution;
 uniform sampler2D u_tex0;
 uniform float u_rotationDegree;             // degree. minus value allowed.
@@ -34,13 +38,15 @@ void main() {
 
     int ROTATION_UNIT_COUNT = int(radians(abs(rotationDegree)) / ROTATION_UNIT_ANGLE);
 
+    const int MAX_ITERATIONS = 100;
+
     if(rotationSign != 0.0 && ROTATION_UNIT_COUNT > 1) {
         color = color / float(ROTATION_UNIT_COUNT);
 
-        for(int i=1; i<ROTATION_UNIT_COUNT; ++i) {
+        for(int i = 1; i < MAX_ITERATIONS; i++){
             vec2 uvR = uvRotational + rotationSign * vec2(0.0, ROTATION_UNIT_ANGLE * float(i));
             vec4 c = texture2D(u_tex0, fromRotational(uvR));
-            color = color + c / float(ROTATION_UNIT_COUNT);
+            color = color + c / float(ROTATION_UNIT_COUNT); 
         }
     }
 

circle.frag

@@ -1,3 +1,7 @@
+#ifdef GL_ES
+precision mediump float;
+#endif
+
 uniform vec2 u_resolution;
 
 const vec2 CENTER = vec2(0.5, 0.5);

circle_aspectratio.frag

@@ -1,3 +1,7 @@
+#ifdef GL_ES
+precision mediump float;
+#endif
+
 uniform vec2 u_resolution;
 
 const vec2 CENTER = vec2(0.5, 0.5);

dynamic_uv.frag

@@ -1,3 +1,6 @@
+#ifdef GL_ES
+precision mediump float;
+#endif
 uniform vec2 u_resolution;
 uniform sampler2D u_tex0;
 uniform sampler2D u_tex1;

frag.code-workspace

@@ -0,0 +1,14 @@
+{
+	"folders": [
+		{
+			"path": "."
+		}
+	],
+	"settings": {
+		"glsl-canvas.textures": {
+			"0": "./girl.jpg",
+			"2": "https://rawgit.com/actarian/plausible-brdf-shader/master/textures/noise/cloud-1.png",
+			"1": "https://rawgit.com/actarian/plausible-brdf-shader/master/textures/noise/cloud-2.jpg",        
+		}
+	}
+}

fragment.glsl

@@ -0,0 +1,24 @@
+#ifdef GL_ES
+precision mediump float;
+#endif
+
+uniform vec2 u_resolution; // screen size
+
+// gl_FragCoord -> location for current proccessing
+// この gl_FragCoordはスレッドごとに異なる値を持っているためuniform変数とは呼ばず、代わりにvarying変数と呼びます。
+
+void main() {
+
+    vec2 location = gl_FragCoord.xy;
+
+    if (location.x < 5.0 && location.y < 5.0) {
+        gl_FragColor = vec4(1,1,1,1);
+        return;
+    }
+
+    if (location.x > (u_resolution.x * 0.5)) {
+        gl_FragColor = vec4(0.1,0.3,0.4,1);
+    } else {
+        gl_FragColor = vec4(0.2,0.3,0.4,1);
+    }
+}

hello.glsl

@@ -0,0 +1,14 @@
+#ifdef GL_ES
+precision mediump float;
+/*
+precision mediump float; は、全ての浮動小数点型の変数に中レベルの精度を指定しています。より低い精度（precision lowp float;）や高い精度（precision highp float;）を選ぶこともできます。
+*/
+#endif
+
+vec4 red() {
+	return vec4(0.2,0.0,0.4,1.0);
+}
+
+void main() {
+	gl_FragColor = red();
+}

hellored.frag

@@ -1,3 +1,7 @@
+#ifdef GL_ES
+precision mediump float;
+#endif
+
 void main() {
     gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
 }

image_distrotion.glsl

@@ -0,0 +1,21 @@
+#ifdef GL_ES
+precision mediump float;
+#endif
+
+uniform sampler2D u_texture_0;
+uniform sampler2D u_texture_1;
+uniform sampler2D u_texture_2;
+uniform sampler2D u_texture_3;
+uniform vec2 u_resolution;
+uniform float u_time;
+
+void main() {
+
+  vec2 uv = gl_FragCoord.xy / u_resolution;
+  uv.x += abs(pow(sin(u_time), 100.0) * 0.13) * sin(u_time * sin(uv.y) * 0.003);
+  uv.y += abs(pow(sin(u_time), 2.0) * 0.03) * sin(u_time * sin(uv.x) * 0.003);
+  vec4 color = texture2D(u_texture_0, uv);
+  color.r *= 1.2;
+  gl_FragColor = color;  
+}
+

img_fill.frag

@@ -1,3 +1,7 @@
+#ifdef GL_ES
+precision mediump float;
+#endif
+
 uniform vec2 u_resolution;
 uniform sampler2D u_tex0;
 

img_posterization.frag

@@ -1,3 +1,7 @@
+#ifdef GL_ES
+precision mediump float;
+#endif
+
 uniform vec2 u_resolution;
 uniform sampler2D u_tex0;
 

img_vflip.frag

@@ -1,3 +1,7 @@
+#ifdef GL_ES
+precision mediump float;
+#endif
+
 uniform vec2 u_resolution;
 uniform sampler2D u_tex0;
 

non_linear.frag

@@ -1,3 +1,7 @@
+#ifdef GL_ES
+precision mediump float;
+#endif
+
 uniform vec2 u_resolution;
 uniform sampler2D u_tex0;
 

plot.glsl

@@ -0,0 +1,28 @@
+#ifdef GL_ES
+precision mediump float;
+#endif
+
+uniform vec2 u_resolution;
+uniform vec2 u_mouse;
+uniform float u_time;
+
+// Plot a line on Y using a value between 0.0-1.0
+float plot(vec2 st, float pct){
+  return smoothstep(pct - 0.02, pct, st.y) -
+         smoothstep(pct, pct + 0.02, st.y);
+}
+
+void main() {
+
+	vec2 progress = gl_FragCoord.xy / u_resolution;
+
+  float y = progress.x * progress.x;
+
+  vec3 color = vec3(y);
+
+  // Plot a line
+  float pct = plot(progress, y);
+  color = (1.0 - pct) * color + pct * vec3(0.0, 1.0, 0.0);
+
+	gl_FragColor = vec4(color,1.0);
+}

saturation.glsl

@@ -0,0 +1,21 @@
+#ifdef GL_ES
+precision mediump float;
+#endif
+
+uniform sampler2D u_texture_0;
+uniform vec2 u_resolution;
+
+ // Values from "Graphics Shaders: Theory and Practice" by Bailey and Cunningham
+const mediump vec3 luminanceWeighting = vec3(0.22125, 0.7154, 0.0721);
+const lowp float saturation = 1.0;
+
+void main() {
+
+  vec2 uv = gl_FragCoord.xy / u_resolution;  
+
+  lowp vec4 textureColor = texture2D(u_texture_0, uv);
+  lowp float luminance = dot(textureColor.rgb, luminanceWeighting);
+  lowp vec3 greyScaleColor = vec3(luminance);
+
+	gl_FragColor = vec4(mix(greyScaleColor, textureColor.rgb, saturation), textureColor.w);
+}

smooth.glsl

@@ -0,0 +1,16 @@
+#ifdef GL_ES
+precision highp float;
+#endif
+
+uniform vec2 u_resolution;
+uniform float u_time;
+
+void main() {
+
+  float y = smoothstep(0.0, u_resolution.y, gl_FragCoord.xy.y);
+  float x = smoothstep(0.0, u_resolution.x, gl_FragCoord.xy.x);
+
+  vec3 color = vec3(y * abs(sin(u_time) * 0.2), x * abs(cos(u_time)), y * abs(sin(u_time)));
+
+  gl_FragColor = vec4(color, 1.0);
+}

smoothstep.glsl

@@ -0,0 +1,14 @@
+#ifdef GL_ES
+precision mediump float;
+#endif
+
+uniform vec2 u_resolution;
+
+void main() {
+
+  float a = smoothstep(0.0, u_resolution.y, gl_FragCoord.xy.y);
+
+  vec3 color = vec3(a, 0.5, 0.5);
+
+  gl_FragColor = vec4(color, 1.0);
+}

step.glsl

@@ -0,0 +1,14 @@
+#ifdef GL_ES
+precision mediump float;
+#endif
+
+uniform vec2 u_resolution;
+
+void main() {
+
+  float a = step(u_resolution.y * 0.5, gl_FragCoord.xy.y);
+
+  vec3 color = vec3(a, 0.5, 0.5);
+
+  gl_FragColor = vec4(color, 1.0);
+}

two_by_two.frag

@@ -1,3 +1,7 @@
+#ifdef GL_ES
+precision highp float;
+#endif
+
 uniform vec2 u_resolution;
 uniform sampler2D u_tex0;
 uniform sampler2D u_tex1;

uniform.glsl

@@ -0,0 +1,19 @@
+#ifdef GL_ES
+precision mediump float;
+#endif
+
+uniform float u_time;
+
+vec4 red() {
+    return vec4(abs(sin(u_time) * 0.1),0.1,0.2,1.0);
+	// return vec4(
+    //     abs(sin(u_time)),
+    //     abs(tan(u_time)),
+    //     abs(cos(u_time)),
+    //     1.0
+    //     );
+}
+
+void main() {
+	gl_FragColor = red();
+}