diff --git a/README.md b/README.md index 31186fc..7511c16 100644 --- a/README.md +++ b/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 diff --git a/blend_burn.frag b/blend_burn.frag index 2d7d63e..5b5b12e 100644 --- a/blend_burn.frag +++ b/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; diff --git a/blend_mask.frag b/blend_mask.frag index ee624fb..1be1bee 100644 --- a/blend_mask.frag +++ b/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; diff --git a/blend_multiply.frag b/blend_multiply.frag index d8ae5c5..59eba15 100644 --- a/blend_multiply.frag +++ b/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; diff --git a/blend_normal.frag b/blend_normal.frag index 8870ba5..cea36cf 100644 --- a/blend_normal.frag +++ b/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; diff --git a/blend_overlay.frag b/blend_overlay.frag index d6843c1..a5b280c 100644 --- a/blend_overlay.frag +++ b/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; diff --git a/blend_screen.frag b/blend_screen.frag index ff00fe1..c5f6eba 100644 --- a/blend_screen.frag +++ b/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; diff --git a/blur_bokeh.frag b/blur_bokeh.frag index 3c734f0..18a1630 100644 --- a/blur_bokeh.frag +++ b/blur_bokeh.frag @@ -1,3 +1,8 @@ +#ifdef GL_ES +precision mediump float; +#endif + + uniform vec2 u_resolution; uniform sampler2D u_tex0; diff --git a/blur_linmotion.frag b/blur_linmotion.frag index 03bf183..4fe16c4 100644 --- a/blur_linmotion.frag +++ b/blur_linmotion.frag @@ -1,3 +1,7 @@ +#ifdef GL_ES +precision mediump float; +#endif + uniform vec2 u_resolution; uniform sampler2D u_tex0; diff --git a/blur_rotation.frag b/blur_rotation.frag index fce75f0..8cbd407 100644 --- a/blur_rotation.frag +++ b/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 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); + } +} \ No newline at end of file diff --git a/hello.glsl b/hello.glsl new file mode 100644 index 0000000..c7c6c9f --- /dev/null +++ b/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(); +} diff --git a/hellored.frag b/hellored.frag index 361b636..fa44c17 100644 --- a/hellored.frag +++ b/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); } \ No newline at end of file diff --git a/image_distrotion.glsl b/image_distrotion.glsl new file mode 100644 index 0000000..23d762c --- /dev/null +++ b/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; +} + diff --git a/img_fill.frag b/img_fill.frag index 5d6fc64..f05e4a1 100644 --- a/img_fill.frag +++ b/img_fill.frag @@ -1,3 +1,7 @@ +#ifdef GL_ES +precision mediump float; +#endif + uniform vec2 u_resolution; uniform sampler2D u_tex0; diff --git a/img_posterization.frag b/img_posterization.frag index ece49f5..ea8b565 100644 --- a/img_posterization.frag +++ b/img_posterization.frag @@ -1,3 +1,7 @@ +#ifdef GL_ES +precision mediump float; +#endif + uniform vec2 u_resolution; uniform sampler2D u_tex0; diff --git a/img_vflip.frag b/img_vflip.frag index 194fa36..32cfb37 100644 --- a/img_vflip.frag +++ b/img_vflip.frag @@ -1,3 +1,7 @@ +#ifdef GL_ES +precision mediump float; +#endif + uniform vec2 u_resolution; uniform sampler2D u_tex0; diff --git a/non_linear.frag b/non_linear.frag index f171f92..a6a4721 100644 --- a/non_linear.frag +++ b/non_linear.frag @@ -1,3 +1,7 @@ +#ifdef GL_ES +precision mediump float; +#endif + uniform vec2 u_resolution; uniform sampler2D u_tex0; diff --git a/plot.glsl b/plot.glsl new file mode 100644 index 0000000..0d6f0f3 --- /dev/null +++ b/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); +} diff --git a/saturation.glsl b/saturation.glsl new file mode 100644 index 0000000..a578733 --- /dev/null +++ b/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); +} \ No newline at end of file diff --git a/screenshot.jpg b/screenshot.jpg new file mode 100644 index 0000000..a079b42 Binary files /dev/null and b/screenshot.jpg differ diff --git a/smooth.glsl b/smooth.glsl new file mode 100644 index 0000000..ed0ad17 --- /dev/null +++ b/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); +} \ No newline at end of file diff --git a/smoothstep.glsl b/smoothstep.glsl new file mode 100644 index 0000000..f06d8af --- /dev/null +++ b/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); +} \ No newline at end of file diff --git a/step.glsl b/step.glsl new file mode 100644 index 0000000..87f55fd --- /dev/null +++ b/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); +} \ No newline at end of file diff --git a/two_by_two.frag b/two_by_two.frag index 2b3945d..56e7720 100644 --- a/two_by_two.frag +++ b/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; diff --git a/uniform.glsl b/uniform.glsl new file mode 100644 index 0000000..1d948e0 --- /dev/null +++ b/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(); +} diff --git a/vignette.glsl b/vignette.glsl new file mode 100644 index 0000000..ae1bef5 --- /dev/null +++ b/vignette.glsl @@ -0,0 +1,24 @@ +#ifdef GL_ES +precision mediump float; +#endif + +uniform sampler2D u_texture_0; + +uniform vec2 u_resolution; + +void main() { + + + // vec2 vignetteCenter = u_resolution / 2.0; + + lowp vec2 vignetteCenter = vec2(400.0, 400.0); + + vec3 vignetteColor = vec3(.3,.2,.2); + + vec2 uv = gl_FragCoord.xy / u_resolution; + vec4 sourceImageColor = texture2D(u_texture_0, uv); + float d = distance(uv, vignetteCenter); + float percent = smoothstep(0.0, 1070.0, d); + // gl_FragColor = vec4(vec3(percent, 1, 1), 1); + gl_FragColor = vec4(mix(sourceImageColor.rgb, vignetteColor, percent), sourceImageColor.a); +} \ No newline at end of file diff --git a/zoom.frag b/zoom.frag index 8bc0f3e..af98d48 100644 --- a/zoom.frag +++ b/zoom.frag @@ -1,3 +1,7 @@ +#ifdef GL_ES +precision highp float; +#endif + uniform vec2 u_resolution; uniform sampler2D u_tex0;