Improved shaders_postprocessing example

docs/examples/web/core/core_3d_camera_first_person.c

@@ -34,7 +34,6 @@ Color colors[MAX_COLUMNS];
 //Vector3 playerPosition;
 Vector3 playerPosition = { 4.0f, 2.0f, 4.0f };      // Define player position
 
-
 //----------------------------------------------------------------------------------
 // Module Functions Declaration
 //----------------------------------------------------------------------------------

docs/examples/web/core/core_vr_simulator.c

@@ -85,6 +85,9 @@ void UpdateDrawFrame(void)
     UpdateCamera(&camera);          // Update camera (simulator mode)
 
     if (IsKeyPressed(KEY_SPACE)) ToggleVrMode();    // Toggle VR mode
+    
+    // Lock mouse cursor if mouse click on canvas
+    if (IsMouseButtonPressed(MOUSE_LEFT_BUTTON)) DisableCursor();
     //----------------------------------------------------------------------------------
 
     // Draw

docs/examples/web/makefile

@@ -563,8 +563,7 @@ shaders/shaders_postprocessing: shaders/shaders_postprocessing.c
 	$(CC) -o $@$(EXT) $< $(CFLAGS) $(INCLUDES) $(LFLAGS) $(LIBS) -D$(PLATFORM) $(WINFLAGS) $(WEB_SHELL) -s TOTAL_MEMORY=67108864 \
     --preload-file shaders/resources/model/dwarf.obj@resources/model/dwarf.obj \
     --preload-file shaders/resources/model/dwarf_diffuse.png@resources/model/dwarf_diffuse.png \
-    --preload-file shaders/resources/shaders/glsl100/base.vs@resources/shaders/glsl100/base.vs \
-    --preload-file shaders/resources/shaders/glsl100/bloom.fs@resources/shaders/glsl100/bloom.fs
+    --preload-file shaders/resources/shaders/glsl100@resources/shaders/glsl100
 
 # compile [audio] example - sound loading and playing (WAV and OGG)
 audio/audio_sound_loading: audio/audio_sound_loading.c

docs/examples/web/shaders/resources/shaders/glsl100/base.fs

@@ -0,0 +1,24 @@
+#version 100
+
+precision mediump float;
+
+// Input vertex attributes (from vertex shader)
+varying vec2 fragTexCoord;
+varying vec4 fragColor;
+
+// Input uniform values
+uniform sampler2D texture0;
+uniform vec4 colDiffuse;
+
+// NOTE: Add here your custom variables
+uniform vec2 resolution = vec2(800, 450);
+
+void main()
+{
+    // Texel color fetching from texture sampler
+    vec4 texelColor = texture2D(texture0, fragTexCoord);
+    
+    // NOTE: Implement here your fragment shader code
+    
+    gl_FragColor = texelColor*colDiffuse;
+}

docs/examples/web/shaders/resources/shaders/glsl100/blur.fs

@@ -0,0 +1,34 @@
+#version 100
+
+precision mediump float;
+
+// Input vertex attributes (from vertex shader)
+varying vec2 fragTexCoord;
+varying vec4 fragColor;
+
+// Input uniform values
+uniform sampler2D texture0;
+uniform vec4 colDiffuse;
+
+// NOTE: Add here your custom variables
+
+// NOTE: Render size values must be passed from code
+const float renderWidth = 800.0;
+const float renderHeight = 450.0;
+
+vec3 offset = vec3(0.0, 1.3846153846, 3.2307692308);
+vec3 weight = vec3(0.2270270270, 0.3162162162, 0.0702702703);
+
+void main() 
+{ 
+    // Texel color fetching from texture sampler
+    vec3 tc = texture2D(texture0, fragTexCoord).rgb*weight.x;
+    
+    tc += texture2D(texture0, fragTexCoord + vec2(offset.y)/renderWidth, 0.0).rgb*weight.y;
+    tc += texture2D(texture0, fragTexCoord - vec2(offset.y)/renderWidth, 0.0).rgb*weight.y;
+    
+    tc += texture2D(texture0, fragTexCoord + vec2(offset.z)/renderWidth, 0.0).rgb*weight.z;
+    tc += texture2D(texture0, fragTexCoord - vec2(offset.z)/renderWidth, 0.0).rgb*weight.z;
+
+    gl_FragColor = vec4(tc, 1.0);
+}

docs/examples/web/shaders/resources/shaders/glsl100/cross_hatching.fs

@@ -0,0 +1,47 @@
+# version 100
+
+precision mediump float;
+
+// Input vertex attributes (from vertex shader)
+varying vec2 fragTexCoord;
+varying vec4 fragColor;
+
+// Input uniform values
+uniform sampler2D texture0;
+uniform vec4 colDiffuse;
+
+// NOTE: Add here your custom variables
+
+float hatchOffsetY = 5.0;
+float lumThreshold01 = 0.9;
+float lumThreshold02 = 0.7;
+float lumThreshold03 = 0.5;
+float lumThreshold04 = 0.3;
+
+void main() 
+{
+    vec3 tc = vec3(1.0, 1.0, 1.0);
+    float lum = length(texture2D(texture0, fragTexCoord).rgb);
+
+    if (lum < lumThreshold01) 
+    {
+        if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0) tc = vec3(0.0, 0.0, 0.0);
+    }  
+
+    if (lum < lumThreshold02) 
+    {
+        if (mod(gl_FragCoord .x - gl_FragCoord .y, 10.0) == 0.0) tc = vec3(0.0, 0.0, 0.0);
+    }  
+
+    if (lum < lumThreshold03) 
+    {
+        if (mod(gl_FragCoord .x + gl_FragCoord .y - hatchOffsetY, 10.0) == 0.0) tc = vec3(0.0, 0.0, 0.0);
+    }  
+
+    if (lum < lumThreshold04) 
+    {
+        if (mod(gl_FragCoord .x - gl_FragCoord .y - hatchOffsetY, 10.0) == 0.0) tc = vec3(0.0, 0.0, 0.0);
+    }
+
+    gl_FragColor = vec4(tc, 1.0);
+}

docs/examples/web/shaders/resources/shaders/glsl100/cross_stitching.fs

@@ -0,0 +1,57 @@
+# version 100
+
+precision mediump float;
+
+// Input vertex attributes (from vertex shader)
+varying vec2 fragTexCoord;
+varying vec4 fragColor;
+
+// Input uniform values
+uniform sampler2D texture0;
+uniform vec4 colDiffuse;
+
+// NOTE: Add here your custom variables
+
+// NOTE: Render size values must be passed from code
+const float renderWidth = 800.0;
+const float renderHeight = 450.0;
+
+float stitchingSize = 6.0;
+int invert = 0;
+
+vec4 PostFX(sampler2D tex, vec2 uv)
+{
+    vec4 c = vec4(0.0);
+    float size = stitchingSize;
+    vec2 cPos = uv * vec2(renderWidth, renderHeight);
+    vec2 tlPos = floor(cPos / vec2(size, size));
+    tlPos *= size;
+
+    int remX = int(mod(cPos.x, size));
+    int remY = int(mod(cPos.y, size));
+    
+    if (remX == 0 && remY == 0) tlPos = cPos;
+    
+    vec2 blPos = tlPos;
+    blPos.y += (size - 1.0);
+    
+    if ((remX == remY) || (((int(cPos.x) - int(blPos.x)) == (int(blPos.y) - int(cPos.y)))))
+    {
+        if (invert == 1) c = vec4(0.2, 0.15, 0.05, 1.0);
+        else c = texture2D(tex, tlPos * vec2(1.0/renderWidth, 1.0/renderHeight)) * 1.4;
+    }
+    else
+    {
+        if (invert == 1) c = texture2D(tex, tlPos * vec2(1.0/renderWidth, 1.0/renderHeight)) * 1.4;
+        else c = vec4(0.0, 0.0, 0.0, 1.0);
+    }
+    
+    return c;
+}
+
+void main()
+{
+    vec3 tc = PostFX(texture0, fragTexCoord).rgb;
+
+    gl_FragColor = vec4(tc, 1.0);
+}

docs/examples/web/shaders/resources/shaders/glsl100/dream_vision.fs

@@ -0,0 +1,37 @@
+#version 100
+
+precision mediump float;
+
+// Input vertex attributes (from vertex shader)
+varying vec2 fragTexCoord;
+varying vec4 fragColor;
+
+// Input uniform values
+uniform sampler2D texture0;
+uniform vec4 colDiffuse;
+
+// NOTE: Add here your custom variables
+
+void main()
+{
+    vec4 color = texture2D(texture0, fragTexCoord);
+
+    color += texture2D(texture0, fragTexCoord + 0.001);
+    color += texture2D(texture0, fragTexCoord + 0.003);
+    color += texture2D(texture0, fragTexCoord + 0.005);
+    color += texture2D(texture0, fragTexCoord + 0.007);
+    color += texture2D(texture0, fragTexCoord + 0.009);
+    color += texture2D(texture0, fragTexCoord + 0.011);
+
+    color += texture2D(texture0, fragTexCoord - 0.001);
+    color += texture2D(texture0, fragTexCoord - 0.003);
+    color += texture2D(texture0, fragTexCoord - 0.005);
+    color += texture2D(texture0, fragTexCoord - 0.007);
+    color += texture2D(texture0, fragTexCoord - 0.009);
+    color += texture2D(texture0, fragTexCoord - 0.011);
+
+    color.rgb = vec3((color.r + color.g + color.b)/3.0);
+    color = color/9.5;
+
+    gl_FragColor = color;
+}			

docs/examples/web/shaders/resources/shaders/glsl100/fisheye.fs

@@ -0,0 +1,43 @@
+#version 100
+
+precision mediump float;
+
+// Input vertex attributes (from vertex shader)
+varying vec2 fragTexCoord;
+varying vec4 fragColor;
+
+// Input uniform values
+uniform sampler2D texture0;
+uniform vec4 colDiffuse;
+
+// NOTE: Add here your custom variables
+
+const float PI = 3.1415926535;
+
+void main()
+{
+    float aperture = 178.0;
+    float apertureHalf = 0.5 * aperture * (PI / 180.0);
+    float maxFactor = sin(apertureHalf);
+
+    vec2 uv = vec2(0.0);
+    vec2 xy = 2.0 * fragTexCoord.xy - 1.0;
+    float d = length(xy);
+    
+    if (d < (2.0 - maxFactor))
+    {
+        d = length(xy * maxFactor);
+        float z = sqrt(1.0 - d * d);
+        float r = atan(d, z) / PI;
+        float phi = atan(xy.y, xy.x);
+
+        uv.x = r * cos(phi) + 0.5;
+        uv.y = r * sin(phi) + 0.5;
+    }
+    else
+    {
+        uv = fragTexCoord.xy;
+    }
+
+    gl_FragColor = texture2D(texture0, uv);
+}

docs/examples/web/shaders/resources/shaders/glsl100/pixelizer.fs

@@ -13,11 +13,11 @@ uniform vec4 colDiffuse;
 // NOTE: Add here your custom variables 
 
 // NOTE: Render size values must be passed from code
-const float renderWidth = 800;
-const float renderHeight = 450;
+const float renderWidth = 800.0;
+const float renderHeight = 450.0;
 
-uniform float pixelWidth = 5.0f;
-uniform float pixelHeight = 5.0f;
+float pixelWidth = 5.0;
+float pixelHeight = 5.0;
 
 void main() 
 { 

docs/examples/web/shaders/resources/shaders/glsl100/posterization.fs

@@ -0,0 +1,29 @@
+#version 100
+
+precision mediump float;
+
+// Input vertex attributes (from vertex shader)
+varying vec2 fragTexCoord;
+varying vec4 fragColor;
+
+// Input uniform values
+uniform sampler2D texture0;
+uniform vec4 colDiffuse;
+
+// NOTE: Add here your custom variables
+
+float gamma = 0.6;
+float numColors = 8.0;
+
+void main() 
+{ 
+    vec3 color = texture2D(texture0, fragTexCoord.xy).rgb;
+    
+    color = pow(color, vec3(gamma, gamma, gamma));
+    color = color*numColors;
+    color = floor(color);
+    color = color/numColors;
+    color = pow(color, vec3(1.0/gamma));
+    
+    gl_FragColor = vec4(color, 1.0);
+}

docs/examples/web/shaders/resources/shaders/glsl100/predator.fs

@@ -0,0 +1,31 @@
+#version 100
+
+precision mediump float;
+
+// Input vertex attributes (from vertex shader)
+varying vec2 fragTexCoord;
+varying vec4 fragColor;
+
+// Input uniform values
+uniform sampler2D texture0;
+uniform vec4 colDiffuse;
+
+// NOTE: Add here your custom variables
+
+void main() 
+{
+    vec3 color = texture2D(texture0, fragTexCoord).rgb;
+    vec3 colors[3];
+    colors[0] = vec3(0.0, 0.0, 1.0);
+    colors[1] = vec3(1.0, 1.0, 0.0);
+    colors[2] = vec3(1.0, 0.0, 0.0);
+    
+    float lum = (color.r + color.g + color.b)/3.0;
+
+    vec3 tc = vec3(0.0, 0.0, 0.0);
+    
+    if (lum < 0.5) tc = mix(colors[0], colors[1], lum/0.5);
+    else tc = mix(colors[1], colors[2], (lum - 0.5)/0.5);
+
+    gl_FragColor = vec4(tc, 1.0);
+}

docs/examples/web/shaders/resources/shaders/glsl100/scanlines.fs

@@ -0,0 +1,44 @@
+#version 100
+
+precision mediump float;
+
+// Input vertex attributes (from vertex shader)
+varying vec2 fragTexCoord;
+varying vec4 fragColor;
+
+// Input uniform values
+uniform sampler2D texture0;
+uniform vec4 colDiffuse;
+
+// NOTE: Add here your custom variables
+
+float offset = 0.0;
+float frequency = 450.0/3.0;
+
+uniform float time;
+
+void main()
+{
+/*
+    // Scanlines method 1
+    float tval = 0; //time
+    vec2 uv = 0.5 + (fragTexCoord - 0.5)*(0.9 + 0.01*sin(0.5*tval));
+
+    vec4 color = texture2D(texture0, fragTexCoord);
+
+    color = clamp(color*0.5 + 0.5*color*color*1.2, 0.0, 1.0);
+    color *= 0.5 + 0.5*16.0*uv.x*uv.y*(1.0 - uv.x)*(1.0 - uv.y);
+    color *= vec4(0.8, 1.0, 0.7, 1);
+    color *= 0.9 + 0.1*sin(10.0*tval + uv.y*1000.0);
+    color *= 0.97 + 0.03*sin(110.0*tval);
+
+    fragColor = color;
+*/
+    // Scanlines method 2
+    float globalPos = (fragTexCoord.y + offset) * frequency;
+    float wavePos = cos((fract(globalPos) - 0.5)*3.14);
+    
+    vec4 color = texture2D(texture0, fragTexCoord);
+
+    gl_FragColor = mix(vec4(0.0, 0.3, 0.0, 0.0), color, wavePos);
+}

docs/examples/web/shaders/resources/shaders/glsl100/sobel.fs

@@ -0,0 +1,40 @@
+#version 100
+
+precision mediump float;
+
+// Input vertex attributes (from vertex shader)
+varying vec2 fragTexCoord;
+varying vec4 fragColor;
+
+// Input uniform values
+uniform sampler2D texture0;
+uniform vec4 colDiffuse;
+
+// NOTE: Add here your custom variables
+vec2 resolution = vec2(800.0, 450.0);
+
+void main() 
+{
+	float x = 1.0/resolution.x;
+	float y = 1.0/resolution.y;
+    
+	vec4 horizEdge = vec4(0.0);
+	horizEdge -= texture2D(texture0, vec2(fragTexCoord.x - x, fragTexCoord.y - y))*1.0;
+	horizEdge -= texture2D(texture0, vec2(fragTexCoord.x - x, fragTexCoord.y    ))*2.0;
+	horizEdge -= texture2D(texture0, vec2(fragTexCoord.x - x, fragTexCoord.y + y))*1.0;
+	horizEdge += texture2D(texture0, vec2(fragTexCoord.x + x, fragTexCoord.y - y))*1.0;
+	horizEdge += texture2D(texture0, vec2(fragTexCoord.x + x, fragTexCoord.y    ))*2.0;
+	horizEdge += texture2D(texture0, vec2(fragTexCoord.x + x, fragTexCoord.y + y))*1.0;
+    
+	vec4 vertEdge = vec4(0.0);
+	vertEdge -= texture2D(texture0, vec2(fragTexCoord.x - x, fragTexCoord.y - y))*1.0;
+	vertEdge -= texture2D(texture0, vec2(fragTexCoord.x    , fragTexCoord.y - y))*2.0;
+	vertEdge -= texture2D(texture0, vec2(fragTexCoord.x + x, fragTexCoord.y - y))*1.0;
+	vertEdge += texture2D(texture0, vec2(fragTexCoord.x - x, fragTexCoord.y + y))*1.0;
+	vertEdge += texture2D(texture0, vec2(fragTexCoord.x    , fragTexCoord.y + y))*2.0;
+	vertEdge += texture2D(texture0, vec2(fragTexCoord.x + x, fragTexCoord.y + y))*1.0;
+    
+	vec3 edge = sqrt((horizEdge.rgb*horizEdge.rgb) + (vertEdge.rgb*vertEdge.rgb));
+	
+	gl_FragColor = vec4(edge, texture2D(texture0, fragTexCoord).a);
+}

docs/examples/web/shaders/resources/shaders/glsl100/swirl.fs

@@ -12,8 +12,9 @@ uniform vec4 colDiffuse;
 
 // NOTE: Add here your custom variables
 
-const float renderWidth = 800.0;      // HARDCODED for example!
-const float renderHeight = 480.0;     // Use uniforms instead...
+// NOTE: Render size values should be passed from code
+const float renderWidth = 800;
+const float renderHeight = 450;
 
 float radius = 250.0;
 float angle = 0.8;

docs/examples/web/shaders/resources/shaders/glsl330/base.vs

@@ -1,26 +0,0 @@
-#version 330
-
-// Input vertex attributes
-in vec3 vertexPosition;
-in vec2 vertexTexCoord;
-in vec3 vertexNormal;
-in vec4 vertexColor;
-
-// Input uniform values
-uniform mat4 mvpMatrix;
-
-// Output vertex attributes (to fragment shader)
-out vec2 fragTexCoord;
-out vec4 fragColor;
-
-// NOTE: Add here your custom variables 
-
-void main()
-{
-    // Send vertex attributes to fragment shader
-    fragTexCoord = vertexTexCoord;
-    fragColor = vertexColor;
-    
-    // Calculate final vertex position
-    gl_Position = mvpMatrix*vec4(vertexPosition, 1.0);
-}

docs/examples/web/shaders/resources/shaders/glsl330/bloom.fs

@@ -1,40 +0,0 @@
-#version 330
-
-// Input vertex attributes (from vertex shader)
-in vec2 fragTexCoord;
-in vec4 fragColor;
-
-// Input uniform values
-uniform sampler2D texture0;
-uniform vec4 colDiffuse;
-
-// Output fragment color
-out vec4 finalColor;
-
-// NOTE: Add here your custom variables
-
-const vec2 size = vec2(800, 450);   // render size
-const float samples = 5.0;          // pixels per axis; higher = bigger glow, worse performance
-const float quality = 2.5; 	        // lower = smaller glow, better quality
-
-void main()
-{
-    vec4 sum = vec4(0);
-    vec2 sizeFactor = vec2(1)/size*quality;
-
-    // Texel color fetching from texture sampler
-    vec4 source = texture(texture0, fragTexCoord);
-
-    const int range = 2;            // should be = (samples - 1)/2;
-
-    for (int x = -range; x <= range; x++)
-    {
-        for (int y = -range; y <= range; y++)
-        {
-            sum += texture(texture0, fragTexCoord + vec2(x, y)*sizeFactor);
-        }
-    }
-
-    // Calculate final fragment color
-    finalColor = ((sum/(samples*samples)) + source)*colDiffuse;
-}

docs/examples/web/shaders/resources/shaders/glsl330/depth.fs

@@ -1,27 +0,0 @@
-#version 330
-
-// Input vertex attributes (from vertex shader)
-in vec2 fragTexCoord;
-in vec4 fragColor;
-
-// Input uniform values
-uniform sampler2D texture0;     // Depth texture
-uniform vec4 fragTintColor;
-
-// Output fragment color
-out vec4 finalColor;
-
-// NOTE: Add here your custom variables
-
-void main()
-{
-    float zNear = 0.01; // camera z near
-    float zFar = 10.0;  // camera z far
-    float z = texture(texture0, fragTexCoord).x;
-
-    // Linearize depth value
-    float depth = (2.0*zNear)/(zFar + zNear - z*(zFar - zNear));
-    
-    // Calculate final fragment color
-    finalColor = vec4(depth, depth, depth, 1.0f);
-}

docs/examples/web/shaders/resources/shaders/glsl330/distortion.fs

@@ -1,56 +0,0 @@
-#version 330
-
-// Input vertex attributes (from vertex shader)
-in vec2 fragTexCoord;
-
-// Input uniform values
-uniform sampler2D texture0;
-
-// Output fragment color
-out vec4 finalColor;
-
-// NOTE: Default parameters for Oculus Rift DK2 device
-const vec2 LeftLensCenter = vec2(0.2863248, 0.5);
-const vec2 RightLensCenter = vec2(0.7136753, 0.5);
-const vec2 LeftScreenCenter = vec2(0.25, 0.5);
-const vec2 RightScreenCenter = vec2(0.75, 0.5);
-const vec2 Scale = vec2(0.25, 0.45);
-const vec2 ScaleIn = vec2(4.0, 2.5);
-const vec4 HmdWarpParam = vec4(1.0, 0.22, 0.24, 0.0);
-const vec4 ChromaAbParam = vec4(0.996, -0.004, 1.014, 0.0);
-
-void main()
-{
-    // The following two variables need to be set per eye
-    vec2 LensCenter = fragTexCoord.x < 0.5 ? LeftLensCenter : RightLensCenter;
-    vec2 ScreenCenter = fragTexCoord.x < 0.5 ? LeftScreenCenter : RightScreenCenter;
-    
-    // Scales input texture coordinates for distortion: vec2 HmdWarp(vec2 fragTexCoord, vec2 LensCenter)
-    vec2 theta = (fragTexCoord - LensCenter)*ScaleIn;   // Scales to [-1, 1]
-    float rSq = theta.x*theta.x + theta.y*theta.y;
-    vec2 theta1 = theta*(HmdWarpParam.x + HmdWarpParam.y*rSq + HmdWarpParam.z*rSq*rSq + HmdWarpParam.w*rSq*rSq*rSq);
-    //vec2 tc = LensCenter + Scale*theta1;
-    
-    // Detect whether blue texture coordinates are out of range since these will scaled out the furthest
-    vec2 thetaBlue = theta1*(ChromaAbParam.z + ChromaAbParam.w*rSq);
-    vec2 tcBlue = LensCenter + Scale*thetaBlue;
-
-    if (any(bvec2(clamp(tcBlue, ScreenCenter - vec2(0.25, 0.5), ScreenCenter + vec2(0.25, 0.5)) - tcBlue))) finalColor = vec4(0.0, 0.0, 0.0, 1.0);
-    else
-    {
-        // Do blue texture lookup
-        float blue = texture(texture0, tcBlue).b;
-
-        // Do green lookup (no scaling)
-        vec2 tcGreen = LensCenter + Scale*theta1;
-        float green = texture(texture0, tcGreen).g;
-
-        // Do red scale and lookup
-        vec2 thetaRed = theta1*(ChromaAbParam.x + ChromaAbParam.y*rSq);
-        vec2 tcRed = LensCenter + Scale*thetaRed;
-        float red = texture(texture0, tcRed).r;
-
-        finalColor = vec4(red, green, blue, 1.0);
-    }
-}
-

docs/examples/web/shaders/resources/shaders/glsl330/grayscale.fs

@@ -1,26 +0,0 @@
-#version 330
-
-// Input vertex attributes (from vertex shader)
-in vec2 fragTexCoord;
-in vec4 fragColor;
-
-// Input uniform values
-uniform sampler2D texture0;
-uniform vec4 colDiffuse;
-
-// Output fragment color
-out vec4 finalColor;
-
-// NOTE: Add here your custom variables
-
-void main()
-{
-    // Texel color fetching from texture sampler
-    vec4 texelColor = texture(texture0, fragTexCoord)*colDiffuse*fragColor;
-    
-    // Convert texel color to grayscale using NTSC conversion weights
-    float gray = dot(texelColor.rgb, vec3(0.299, 0.587, 0.114));
-    
-    // Calculate final fragment color
-    finalColor = vec4(gray, gray, gray, texelColor.a);
-}

docs/examples/web/shaders/resources/shaders/glsl330/swirl.fs

@@ -1,46 +0,0 @@
-#version 330
-
-// Input vertex attributes (from vertex shader)
-in vec2 fragTexCoord;
-in vec4 fragColor;
-
-// Input uniform values
-uniform sampler2D texture0;
-uniform vec4 colDiffuse;
-
-// Output fragment color
-out vec4 finalColor;
-
-// NOTE: Add here your custom variables
-
-const float renderWidth = 800.0;      // HARDCODED for example!
-const float renderHeight = 480.0;     // Use uniforms instead...
-
-float radius = 250.0;
-float angle = 0.8;
-
-uniform vec2 center = vec2(200.0, 200.0);
-
-void main()
-{
-    vec2 texSize = vec2(renderWidth, renderHeight);
-    vec2 tc = fragTexCoord*texSize;
-    tc -= center;
-    
-    float dist = length(tc);
-
-    if (dist < radius) 
-    {
-        float percent = (radius - dist)/radius;
-        float theta = percent*percent*angle*8.0;
-        float s = sin(theta);
-        float c = cos(theta);
-        
-        tc = vec2(dot(tc, vec2(c, -s)), dot(tc, vec2(s, c)));
-    }
-
-    tc += center;
-    vec4 color = texture2D(texture0, tc/texSize)*colDiffuse*fragColor;;
-
-    finalColor = vec4(color.rgb, 1.0);;
-}

docs/examples/web/shaders/shaders_postprocessing.c

@@ -22,6 +22,48 @@
     #include <emscripten/emscripten.h>
 #endif
 
+#if defined(PLATFORM_DESKTOP)
+    #define GLSL_VERSION            330
+    #define DEFAULT_VERTEX_SHADER   "resources/shaders/glsl330/base.vs"
+#else   // PLATFORM_RPI, PLATFORM_ANDROID, PLATFORM_WEB
+    #define GLSL_VERSION            100
+    #define DEFAULT_VERTEX_SHADER   "resources/shaders/glsl100/base.vs"
+#endif
+
+#define MAX_POSTPRO_SHADERS         12
+
+typedef enum {
+    FX_GRAYSCALE = 0,
+    FX_POSTERIZATION,
+    FX_DREAM_VISION,
+    FX_PIXELIZER,
+    FX_CROSS_HATCHING,
+    FX_CROSS_STITCHING,
+    FX_PREDATOR_VIEW,
+    FX_SCANLINES,
+    FX_FISHEYE,
+    FX_SOBEL,
+    FX_BLOOM,
+    FX_BLUR,
+    //FX_FXAA
+} PostproShader;
+
+static const char *postproShaderText[] = {
+    "GRAYSCALE",
+    "POSTERIZATION",
+    "DREAM_VISION",
+    "PIXELIZER",
+    "CROSS_HATCHING",
+    "CROSS_STITCHING",
+    "PREDATOR_VIEW",
+    "SCANLINES",
+    "FISHEYE",
+    "SOBEL",
+    "BLOOM",
+    "BLUR",
+    //"FXAA"
+};
+
 //----------------------------------------------------------------------------------
 // Global Variables Definition
 //----------------------------------------------------------------------------------
@@ -33,9 +75,11 @@ Camera camera = {{ 3.0f, 3.0f, 3.0f }, { 0.0f, 1.5f, 0.0f }, { 0.0f, 1.0f, 0.0f
 
 Model dwarf;         // OBJ model
 Texture2D texture;   // Model texture
-Shader shader;       // Postpro shader
 
-Vector3 position = { 0.0f, 0.0f, 0.0f };  // Set model position
+Shader shaders[MAX_POSTPRO_SHADERS];        // Postpro shaders
+int currentShader = FX_GRAYSCALE;           // Current shader selected
+
+Vector3 position = { 0.0f, 0.0f, 0.0f };    // Set model position
 
 RenderTexture2D target;
 
@@ -58,8 +102,21 @@ int main()
     texture = LoadTexture("resources/model/dwarf_diffuse.png");   // Load model texture
     dwarf.material.texDiffuse = texture;                          // Set dwarf model diffuse texture
 
-    shader = LoadShader("resources/shaders/glsl100/base.vs",
-						"resources/shaders/glsl100/bloom.fs");    // Load postpro shader
+    // Load all postpro shaders
+    // NOTE 1: All postpro shader use the base vertex shader (DEFAULT_VERTEX_SHADER)
+    // NOTE 2: We load the correct shader depending on GLSL version
+    shaders[FX_GRAYSCALE] = LoadShader(DEFAULT_VERTEX_SHADER, FormatText("resources/shaders/glsl%i/grayscale.fs", GLSL_VERSION));
+    shaders[FX_POSTERIZATION] = LoadShader(DEFAULT_VERTEX_SHADER, FormatText("resources/shaders/glsl%i/posterization.fs", GLSL_VERSION));
+    shaders[FX_DREAM_VISION] = LoadShader(DEFAULT_VERTEX_SHADER, FormatText("resources/shaders/glsl%i/dream_vision.fs", GLSL_VERSION));
+    shaders[FX_PIXELIZER] = LoadShader(DEFAULT_VERTEX_SHADER, FormatText("resources/shaders/glsl%i/pixelizer.fs", GLSL_VERSION));
+    shaders[FX_CROSS_HATCHING] = LoadShader(DEFAULT_VERTEX_SHADER, FormatText("resources/shaders/glsl%i/cross_hatching.fs", GLSL_VERSION));
+    shaders[FX_CROSS_STITCHING] = LoadShader(DEFAULT_VERTEX_SHADER, FormatText("resources/shaders/glsl%i/cross_stitching.fs", GLSL_VERSION));
+    shaders[FX_PREDATOR_VIEW] = LoadShader(DEFAULT_VERTEX_SHADER, FormatText("resources/shaders/glsl%i/predator.fs", GLSL_VERSION));
+    shaders[FX_SCANLINES] = LoadShader(DEFAULT_VERTEX_SHADER, FormatText("resources/shaders/glsl%i/scanlines.fs", GLSL_VERSION));
+    shaders[FX_FISHEYE] = LoadShader(DEFAULT_VERTEX_SHADER, FormatText("resources/shaders/glsl%i/fisheye.fs", GLSL_VERSION));
+    shaders[FX_SOBEL] = LoadShader(DEFAULT_VERTEX_SHADER, FormatText("resources/shaders/glsl%i/sobel.fs", GLSL_VERSION));
+    shaders[FX_BLOOM] = LoadShader(DEFAULT_VERTEX_SHADER, FormatText("resources/shaders/glsl%i/bloom.fs", GLSL_VERSION));
+    shaders[FX_BLUR] = LoadShader(DEFAULT_VERTEX_SHADER, FormatText("resources/shaders/glsl%i/blur.fs", GLSL_VERSION));
 
     // Create a RenderTexture2D to be used for render to texture
     target = LoadRenderTexture(screenWidth, screenHeight);
@@ -82,7 +139,10 @@ int main()
 
     // De-Initialization
     //--------------------------------------------------------------------------------------
-    UnloadShader(shader);       // Unload shader
+    
+    // Unload all postpro shaders
+    for (int i = 0; i < MAX_POSTPRO_SHADERS; i++) UnloadShader(shaders[i]);
+    
     UnloadTexture(texture);     // Unload texture
     UnloadModel(dwarf);         // Unload model
 
@@ -100,6 +160,12 @@ void UpdateDrawFrame(void)
     // Update
     //----------------------------------------------------------------------------------
     UpdateCamera(&camera);              // Update internal camera and our camera
+    
+    if (IsKeyPressed(KEY_RIGHT)) currentShader++;
+    else if (IsKeyPressed(KEY_LEFT)) currentShader--;
+    
+    if (currentShader >= MAX_POSTPRO_SHADERS) currentShader = 0;
+    else if (currentShader < 0) currentShader = MAX_POSTPRO_SHADERS - 1;
     //----------------------------------------------------------------------------------
 
     // Draw
@@ -117,21 +183,26 @@ void UpdateDrawFrame(void)
                 DrawGrid(10, 1.0f);     // Draw a grid
 
             End3dMode();
-      
-            DrawText("HELLO POSTPROCESSING!", 70, 190, 50, RED);
             
         EndTextureMode();           // End drawing to texture (now we have a texture available for next passes)
         
-        BeginShaderMode(shader);
+        // Render previously generated texture using selected postpro shader
+        BeginShaderMode(shaders[currentShader]);
         
             // NOTE: Render texture must be y-flipped due to default OpenGL coordinates (left-bottom)
             DrawTextureRec(target.texture, (Rectangle){ 0, 0, target.texture.width, -target.texture.height }, (Vector2){ 0, 0 }, WHITE);
             
         EndShaderMode();
         
+        DrawRectangle(0, 9, 580, 30, Fade(LIGHTGRAY, 0.7f));
+        
         DrawText("(c) Dwarf 3D model by David Moreno", screenWidth - 200, screenHeight - 20, 10, DARKGRAY);
-
-        DrawFPS(10, 10);
+        
+        DrawText("CURRENT POSTPRO SHADER:", 10, 15, 20, BLACK);
+        DrawText(postproShaderText[currentShader], 330, 15, 20, RED);
+        DrawText("< >", 540, 10, 30, DARKBLUE);
+        
+        DrawFPS(700, 15);
 
     EndDrawing();
     //----------------------------------------------------------------------------------

docs/examples/web/shaders/shaders_postprocessing.data

@@ -60389,6 +60389,29 @@ _
 €Å®ü3€ÓV«ÉêšZÿΔÌ_˜|F^
 "þÿG
|:ƒÀé+€ÕÁ ½ôí%Ïàóñº<00>ÿ2Ó?ƒÁ`°˜‹XVWÕ;ß.ñÙxýî|*ƒÀÜRÃ់׊Վ»ÃôÏ`0,NŸùO¦:C>!ƒÁ`
ðW¥ƒÁ`
ðWÆÿX`!À`0ƒÁ`0X0ƒÁ`
À`0ƒƒÁ`0ƒÁ`0X0ƒÁ`
À`0ƒƒÁ`0ƒÁ`0X0ƒÁ`
À`0ƒƒÁ`0õø
)S/{ž³uáIEND®B`‚#version 100
 
+precision mediump float;
+
+// Input vertex attributes (from vertex shader)
+varying vec2 fragTexCoord;
+varying vec4 fragColor;
+
+// Input uniform values
+uniform sampler2D texture0;
+uniform vec4 colDiffuse;
+
+// NOTE: Add here your custom variables
+uniform vec2 resolution = vec2(800, 450);
+
+void main()
+{
+    // Texel color fetching from texture sampler
+    vec4 texelColor = texture2D(texture0, fragTexCoord);
+    
+    // NOTE: Implement here your fragment shader code
+    
+    gl_FragColor = texelColor*colDiffuse;
+}#version 100
+
 // Input vertex attributes
 attribute vec3 vertexPosition;
 attribute vec2 vertexTexCoord;
@@ -60450,4 +60473,511 @@ void main()
 
     // Calculate final fragment color
     gl_FragColor = ((sum/(samples*samples)) + source)*colDiffuse;
+}#version 100
+
+precision mediump float;
+
+// Input vertex attributes (from vertex shader)
+varying vec2 fragTexCoord;
+varying vec4 fragColor;
+
+// Input uniform values
+uniform sampler2D texture0;
+uniform vec4 colDiffuse;
+
+// NOTE: Add here your custom variables
+
+// NOTE: Render size values must be passed from code
+const float renderWidth = 800.0;
+const float renderHeight = 450.0;
+
+vec3 offset = vec3(0.0, 1.3846153846, 3.2307692308);
+vec3 weight = vec3(0.2270270270, 0.3162162162, 0.0702702703);
+
+void main() 
+{ 
+    // Texel color fetching from texture sampler
+    vec3 tc = texture2D(texture0, fragTexCoord).rgb*weight.x;
+    
+    tc += texture2D(texture0, fragTexCoord + vec2(offset.y)/renderWidth, 0.0).rgb*weight.y;
+    tc += texture2D(texture0, fragTexCoord - vec2(offset.y)/renderWidth, 0.0).rgb*weight.y;
+    
+    tc += texture2D(texture0, fragTexCoord + vec2(offset.z)/renderWidth, 0.0).rgb*weight.z;
+    tc += texture2D(texture0, fragTexCoord - vec2(offset.z)/renderWidth, 0.0).rgb*weight.z;
+
+    gl_FragColor = vec4(tc, 1.0);
+}# version 100
+
+precision mediump float;
+
+// Input vertex attributes (from vertex shader)
+varying vec2 fragTexCoord;
+varying vec4 fragColor;
+
+// Input uniform values
+uniform sampler2D texture0;
+uniform vec4 colDiffuse;
+
+// NOTE: Add here your custom variables
+
+float hatchOffsetY = 5.0;
+float lumThreshold01 = 0.9;
+float lumThreshold02 = 0.7;
+float lumThreshold03 = 0.5;
+float lumThreshold04 = 0.3;
+
+void main() 
+{
+    vec3 tc = vec3(1.0, 1.0, 1.0);
+    float lum = length(texture2D(texture0, fragTexCoord).rgb);
+
+    if (lum < lumThreshold01) 
+    {
+        if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0) tc = vec3(0.0, 0.0, 0.0);
+    }  
+
+    if (lum < lumThreshold02) 
+    {
+        if (mod(gl_FragCoord .x - gl_FragCoord .y, 10.0) == 0.0) tc = vec3(0.0, 0.0, 0.0);
+    }  
+
+    if (lum < lumThreshold03) 
+    {
+        if (mod(gl_FragCoord .x + gl_FragCoord .y - hatchOffsetY, 10.0) == 0.0) tc = vec3(0.0, 0.0, 0.0);
+    }  
+
+    if (lum < lumThreshold04) 
+    {
+        if (mod(gl_FragCoord .x - gl_FragCoord .y - hatchOffsetY, 10.0) == 0.0) tc = vec3(0.0, 0.0, 0.0);
+    }
+
+    gl_FragColor = vec4(tc, 1.0);
+}# version 100
+
+precision mediump float;
+
+// Input vertex attributes (from vertex shader)
+varying vec2 fragTexCoord;
+varying vec4 fragColor;
+
+// Input uniform values
+uniform sampler2D texture0;
+uniform vec4 colDiffuse;
+
+// NOTE: Add here your custom variables
+
+// NOTE: Render size values must be passed from code
+const float renderWidth = 800.0;
+const float renderHeight = 450.0;
+
+float stitchingSize = 6.0;
+int invert = 0;
+
+vec4 PostFX(sampler2D tex, vec2 uv)
+{
+    vec4 c = vec4(0.0);
+    float size = stitchingSize;
+    vec2 cPos = uv * vec2(renderWidth, renderHeight);
+    vec2 tlPos = floor(cPos / vec2(size, size));
+    tlPos *= size;
+
+    int remX = int(mod(cPos.x, size));
+    int remY = int(mod(cPos.y, size));
+    
+    if (remX == 0 && remY == 0) tlPos = cPos;
+    
+    vec2 blPos = tlPos;
+    blPos.y += (size - 1.0);
+    
+    if ((remX == remY) || (((int(cPos.x) - int(blPos.x)) == (int(blPos.y) - int(cPos.y)))))
+    {
+        if (invert == 1) c = vec4(0.2, 0.15, 0.05, 1.0);
+        else c = texture2D(tex, tlPos * vec2(1.0/renderWidth, 1.0/renderHeight)) * 1.4;
+    }
+    else
+    {
+        if (invert == 1) c = texture2D(tex, tlPos * vec2(1.0/renderWidth, 1.0/renderHeight)) * 1.4;
+        else c = vec4(0.0, 0.0, 0.0, 1.0);
+    }
+    
+    return c;
+}
+
+void main()
+{
+    vec3 tc = PostFX(texture0, fragTexCoord).rgb;
+
+    gl_FragColor = vec4(tc, 1.0);
+}#version 100
+
+precision mediump float;
+
+// Input vertex attributes (from vertex shader)
+varying vec2 fragTexCoord;
+
+// Input uniform values
+uniform sampler2D texture0;
+
+// NOTE: Default parameters for Oculus Rift DK2 device
+const vec2 LeftLensCenter = vec2(0.2863248, 0.5);
+const vec2 RightLensCenter = vec2(0.7136753, 0.5);
+const vec2 LeftScreenCenter = vec2(0.25, 0.5);
+const vec2 RightScreenCenter = vec2(0.75, 0.5);
+const vec2 Scale = vec2(0.25, 0.45);
+const vec2 ScaleIn = vec2(4.0, 2.5);
+const vec4 HmdWarpParam = vec4(1.0, 0.22, 0.24, 0.0);
+const vec4 ChromaAbParam = vec4(0.996, -0.004, 1.014, 0.0);
+
+void main()
+{
+    // The following two variables need to be set per eye
+    vec2 LensCenter = fragTexCoord.x < 0.5 ? LeftLensCenter : RightLensCenter;
+    vec2 ScreenCenter = fragTexCoord.x < 0.5 ? LeftScreenCenter : RightScreenCenter;
+    
+    // Scales input texture coordinates for distortion: vec2 HmdWarp(vec2 fragTexCoord, vec2 LensCenter)
+    vec2 theta = (fragTexCoord - LensCenter)*ScaleIn;   // Scales to [-1, 1]
+    float rSq = theta.x*theta.x + theta.y*theta.y;
+    vec2 theta1 = theta*(HmdWarpParam.x + HmdWarpParam.y*rSq + HmdWarpParam.z*rSq*rSq + HmdWarpParam.w*rSq*rSq*rSq);
+    //vec2 tc = LensCenter + Scale*theta1;
+    
+    // Detect whether blue texture coordinates are out of range since these will scaled out the furthest
+    vec2 thetaBlue = theta1*(ChromaAbParam.z + ChromaAbParam.w*rSq);
+    vec2 tcBlue = LensCenter + Scale*thetaBlue;
+
+    if (any(bvec2(clamp(tcBlue, ScreenCenter - vec2(0.25, 0.5), ScreenCenter + vec2(0.25, 0.5)) - tcBlue))) gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
+    else
+    {
+        // Do blue texture lookup
+        float blue = texture2D(texture0, tcBlue).b;
+
+        // Do green lookup (no scaling)
+        vec2 tcGreen = LensCenter + Scale*theta1;
+        float green = texture2D(texture0, tcGreen).g;
+
+        // Do red scale and lookup
+        vec2 thetaRed = theta1*(ChromaAbParam.x + ChromaAbParam.y*rSq);
+        vec2 tcRed = LensCenter + Scale*thetaRed;
+        float red = texture2D(texture0, tcRed).r;
+
+        gl_FragColor = vec4(red, green, blue, 1.0);
+    }
+}
+#version 100
+
+precision mediump float;
+
+// Input vertex attributes (from vertex shader)
+varying vec2 fragTexCoord;
+varying vec4 fragColor;
+
+// Input uniform values
+uniform sampler2D texture0;
+uniform vec4 colDiffuse;
+
+// NOTE: Add here your custom variables
+
+void main()
+{
+    vec4 color = texture2D(texture0, fragTexCoord);
+
+    color += texture2D(texture0, fragTexCoord + 0.001);
+    color += texture2D(texture0, fragTexCoord + 0.003);
+    color += texture2D(texture0, fragTexCoord + 0.005);
+    color += texture2D(texture0, fragTexCoord + 0.007);
+    color += texture2D(texture0, fragTexCoord + 0.009);
+    color += texture2D(texture0, fragTexCoord + 0.011);
+
+    color += texture2D(texture0, fragTexCoord - 0.001);
+    color += texture2D(texture0, fragTexCoord - 0.003);
+    color += texture2D(texture0, fragTexCoord - 0.005);
+    color += texture2D(texture0, fragTexCoord - 0.007);
+    color += texture2D(texture0, fragTexCoord - 0.009);
+    color += texture2D(texture0, fragTexCoord - 0.011);
+
+    color.rgb = vec3((color.r + color.g + color.b)/3.0);
+    color = color/9.5;
+
+    gl_FragColor = color;
+}			#version 100
+
+precision mediump float;
+
+// Input vertex attributes (from vertex shader)
+varying vec2 fragTexCoord;
+varying vec4 fragColor;
+
+// Input uniform values
+uniform sampler2D texture0;
+uniform vec4 colDiffuse;
+
+// NOTE: Add here your custom variables
+
+const float PI = 3.1415926535;
+
+void main()
+{
+    float aperture = 178.0;
+    float apertureHalf = 0.5 * aperture * (PI / 180.0);
+    float maxFactor = sin(apertureHalf);
+
+    vec2 uv = vec2(0.0);
+    vec2 xy = 2.0 * fragTexCoord.xy - 1.0;
+    float d = length(xy);
+    
+    if (d < (2.0 - maxFactor))
+    {
+        d = length(xy * maxFactor);
+        float z = sqrt(1.0 - d * d);
+        float r = atan(d, z) / PI;
+        float phi = atan(xy.y, xy.x);
+
+        uv.x = r * cos(phi) + 0.5;
+        uv.y = r * sin(phi) + 0.5;
+    }
+    else
+    {
+        uv = fragTexCoord.xy;
+    }
+
+    gl_FragColor = texture2D(texture0, uv);
+}#version 100
+
+precision mediump float;
+
+// Input vertex attributes (from vertex shader)
+varying vec2 fragTexCoord;
+varying vec4 fragColor;
+
+// Input uniform values
+uniform sampler2D texture0;
+uniform vec4 colDiffuse;
+
+// NOTE: Add here your custom variables
+
+void main()
+{
+    // Texel color fetching from texture sampler
+    vec4 texelColor = texture2D(texture0, fragTexCoord)*colDiffuse*fragColor;
+    
+    // Convert texel color to grayscale using NTSC conversion weights
+    float gray = dot(texelColor.rgb, vec3(0.299, 0.587, 0.114));
+    
+    // Calculate final fragment color
+    gl_FragColor = vec4(gray, gray, gray, texelColor.a);
+}#version 100
+
+precision mediump float;
+
+// Input vertex attributes (from vertex shader)
+varying vec2 fragTexCoord;
+varying vec4 fragColor;
+
+// Input uniform values
+uniform sampler2D texture0;
+uniform vec4 colDiffuse;
+
+// NOTE: Add here your custom variables 
+
+// NOTE: Render size values must be passed from code
+const float renderWidth = 800.0;
+const float renderHeight = 450.0;
+
+const float pixelWidth = 5.0;
+const float pixelHeight = 5.0;
+
+void main() 
+{ 
+    float dx = pixelWidth*(1.0/renderWidth);
+    float dy = pixelHeight*(1.0/renderHeight);
+    
+    vec2 coord = vec2(dx*floor(fragTexCoord.x/dx), dy*floor(fragTexCoord.y/dy));
+    
+    vec3 tc = texture2D(texture0, coord).rgb;
+
+    gl_FragColor = vec4(tc, 1.0);
+}#version 100
+
+precision mediump float;
+
+// Input vertex attributes (from vertex shader)
+varying vec2 fragTexCoord;
+varying vec4 fragColor;
+
+// Input uniform values
+uniform sampler2D texture0;
+uniform vec4 colDiffuse;
+
+// NOTE: Add here your custom variables
+
+float gamma = 0.6;
+float numColors = 8.0;
+
+void main() 
+{ 
+    vec3 color = texture2D(texture0, fragTexCoord.xy).rgb;
+    
+    color = pow(color, vec3(gamma, gamma, gamma));
+    color = color*numColors;
+    color = floor(color);
+    color = color/numColors;
+    color = pow(color, vec3(1.0/gamma));
+    
+    gl_FragColor = vec4(color, 1.0);
+}#version 100
+
+precision mediump float;
+
+// Input vertex attributes (from vertex shader)
+varying vec2 fragTexCoord;
+varying vec4 fragColor;
+
+// Input uniform values
+uniform sampler2D texture0;
+uniform vec4 colDiffuse;
+
+// NOTE: Add here your custom variables
+
+void main() 
+{
+    vec3 color = texture2D(texture0, fragTexCoord).rgb;
+    vec3 colors[3];
+    colors[0] = vec3(0.0, 0.0, 1.0);
+    colors[1] = vec3(1.0, 1.0, 0.0);
+    colors[2] = vec3(1.0, 0.0, 0.0);
+    
+    float lum = (color.r + color.g + color.b)/3.0;
+
+    vec3 tc = vec3(0.0, 0.0, 0.0);
+    
+    if (lum < 0.5) tc = mix(colors[0], colors[1], lum/0.5);
+    else tc = mix(colors[1], colors[2], (lum - 0.5)/0.5);
+
+    gl_FragColor = vec4(tc, 1.0);
+}#version 100
+
+precision mediump float;
+
+// Input vertex attributes (from vertex shader)
+varying vec2 fragTexCoord;
+varying vec4 fragColor;
+
+// Input uniform values
+uniform sampler2D texture0;
+uniform vec4 colDiffuse;
+
+// NOTE: Add here your custom variables
+
+float offset = 0.0;
+float frequency = 450.0/3.0;
+
+uniform float time;
+
+void main()
+{
+/*
+    // Scanlines method 1
+    float tval = 0; //time
+    vec2 uv = 0.5 + (fragTexCoord - 0.5)*(0.9 + 0.01*sin(0.5*tval));
+
+    vec4 color = texture2D(texture0, fragTexCoord);
+
+    color = clamp(color*0.5 + 0.5*color*color*1.2, 0.0, 1.0);
+    color *= 0.5 + 0.5*16.0*uv.x*uv.y*(1.0 - uv.x)*(1.0 - uv.y);
+    color *= vec4(0.8, 1.0, 0.7, 1);
+    color *= 0.9 + 0.1*sin(10.0*tval + uv.y*1000.0);
+    color *= 0.97 + 0.03*sin(110.0*tval);
+
+    fragColor = color;
+*/
+    // Scanlines method 2
+    float globalPos = (fragTexCoord.y + offset) * frequency;
+    float wavePos = cos((fract(globalPos) - 0.5)*3.14);
+    
+    vec4 color = texture2D(texture0, fragTexCoord);
+
+    gl_FragColor = mix(vec4(0.0, 0.3, 0.0, 0.0), color, wavePos);
+}#version 100
+
+precision mediump float;
+
+// Input vertex attributes (from vertex shader)
+varying vec2 fragTexCoord;
+varying vec4 fragColor;
+
+// Input uniform values
+uniform sampler2D texture0;
+uniform vec4 colDiffuse;
+
+// NOTE: Add here your custom variables
+vec2 resolution = vec2(800.0, 450.0);
+
+void main() 
+{
+	float x = 1.0/resolution.x;
+	float y = 1.0/resolution.y;
+    
+	vec4 horizEdge = vec4(0.0);
+	horizEdge -= texture2D(texture0, vec2(fragTexCoord.x - x, fragTexCoord.y - y))*1.0;
+	horizEdge -= texture2D(texture0, vec2(fragTexCoord.x - x, fragTexCoord.y    ))*2.0;
+	horizEdge -= texture2D(texture0, vec2(fragTexCoord.x - x, fragTexCoord.y + y))*1.0;
+	horizEdge += texture2D(texture0, vec2(fragTexCoord.x + x, fragTexCoord.y - y))*1.0;
+	horizEdge += texture2D(texture0, vec2(fragTexCoord.x + x, fragTexCoord.y    ))*2.0;
+	horizEdge += texture2D(texture0, vec2(fragTexCoord.x + x, fragTexCoord.y + y))*1.0;
+    
+	vec4 vertEdge = vec4(0.0);
+	vertEdge -= texture2D(texture0, vec2(fragTexCoord.x - x, fragTexCoord.y - y))*1.0;
+	vertEdge -= texture2D(texture0, vec2(fragTexCoord.x    , fragTexCoord.y - y))*2.0;
+	vertEdge -= texture2D(texture0, vec2(fragTexCoord.x + x, fragTexCoord.y - y))*1.0;
+	vertEdge += texture2D(texture0, vec2(fragTexCoord.x - x, fragTexCoord.y + y))*1.0;
+	vertEdge += texture2D(texture0, vec2(fragTexCoord.x    , fragTexCoord.y + y))*2.0;
+	vertEdge += texture2D(texture0, vec2(fragTexCoord.x + x, fragTexCoord.y + y))*1.0;
+    
+	vec3 edge = sqrt((horizEdge.rgb*horizEdge.rgb) + (vertEdge.rgb*vertEdge.rgb));
+	
+	gl_FragColor = vec4(edge, texture2D(texture0, fragTexCoord).a);
+}#version 100
+
+precision mediump float;
+
+// Input vertex attributes (from vertex shader)
+varying vec2 fragTexCoord;
+varying vec4 fragColor;
+
+// Input uniform values
+uniform sampler2D texture0;
+uniform vec4 colDiffuse;
+
+// NOTE: Add here your custom variables
+
+// NOTE: Render size values should be passed from code
+const float renderWidth = 800;
+const float renderHeight = 450;
+
+float radius = 250.0;
+float angle = 0.8;
+
+uniform vec2 center;
+
+void main()
+{
+    vec2 texSize = vec2(renderWidth, renderHeight);
+    vec2 tc = fragTexCoord*texSize;
+    tc -= center;
+    
+    float dist = length(tc);
+
+    if (dist < radius) 
+    {
+        float percent = (radius - dist)/radius;
+        float theta = percent*percent*angle*8.0;
+        float s = sin(theta);
+        float c = cos(theta);
+        
+        tc = vec2(dot(tc, vec2(c, -s)), dot(tc, vec2(s, c)));
+    }
+
+    tc += center;
+    vec4 color = texture2D(texture0, tc/texSize)*colDiffuse*fragColor;;
+
+    gl_FragColor = vec4(color.rgb, 1.0);;
 }

examples/shaders/resources/shaders/glsl100/blur.fs

@@ -13,22 +13,22 @@ uniform vec4 colDiffuse;
 // NOTE: Add here your custom variables
 
 // NOTE: Render size values must be passed from code
-const float renderWidth = 800;
-const float renderHeight = 450;
+const float renderWidth = 800.0;
+const float renderHeight = 450.0;
 
-float offset[3] = float[]( 0.0, 1.3846153846, 3.2307692308 );
-float weight[3] = float[]( 0.2270270270, 0.3162162162, 0.0702702703 );
+vec3 offset = vec3(0.0, 1.3846153846, 3.2307692308);
+vec3 weight = vec3(0.2270270270, 0.3162162162, 0.0702702703);
 
 void main() 
 { 
     // Texel color fetching from texture sampler
-    vec3 tc = texture2D(texture0, fragTexCoord).rgb*weight[0];
-
-    for (int i = 1; i < 3; i++) 
-    {
-        tc += texture2D(texture0, fragTexCoord + vec2(offset[i])/renderWidth, 0.0).rgb*weight[i];
-        tc += texture2D(texture0, fragTexCoord - vec2(offset[i])/renderWidth, 0.0).rgb*weight[i];
-    }
+    vec3 tc = texture2D(texture0, fragTexCoord).rgb*weight.x;
+    
+    tc += texture2D(texture0, fragTexCoord + vec2(offset.y)/renderWidth, 0.0).rgb*weight.y;
+    tc += texture2D(texture0, fragTexCoord - vec2(offset.y)/renderWidth, 0.0).rgb*weight.y;
+    
+    tc += texture2D(texture0, fragTexCoord + vec2(offset.z)/renderWidth, 0.0).rgb*weight.z;
+    tc += texture2D(texture0, fragTexCoord - vec2(offset.z)/renderWidth, 0.0).rgb*weight.z;
 
     gl_FragColor = vec4(tc, 1.0);
 }

examples/shaders/resources/shaders/glsl100/cross_hatching.fs

@@ -12,11 +12,11 @@ uniform vec4 colDiffuse;
 
 // NOTE: Add here your custom variables
 
-float hatchOffsetY = 5.0f;
-float lumThreshold01 = 0.9f;
-float lumThreshold02 = 0.7f;
-float lumThreshold03 = 0.5f;
-float lumThreshold04 = 0.3f;
+float hatchOffsetY = 5.0;
+float lumThreshold01 = 0.9;
+float lumThreshold02 = 0.7;
+float lumThreshold03 = 0.5;
+float lumThreshold04 = 0.3;
 
 void main() 
 {

examples/shaders/resources/shaders/glsl100/cross_stitching.fs

@@ -13,12 +13,11 @@ uniform vec4 colDiffuse;
 // NOTE: Add here your custom variables
 
 // NOTE: Render size values must be passed from code
-const float renderWidth = 800;
-const float renderHeight = 450;
+const float renderWidth = 800.0;
+const float renderHeight = 450.0;
 
-float stitchingSize = 6.0f;
-
-uniform int invert = 0;
+float stitchingSize = 6.0;
+int invert = 0;
 
 vec4 PostFX(sampler2D tex, vec2 uv)
 {

examples/shaders/resources/shaders/glsl100/fisheye.fs

@@ -16,11 +16,11 @@ const float PI = 3.1415926535;
 
 void main()
 {
-    float aperture = 178.0f;
+    float aperture = 178.0;
     float apertureHalf = 0.5 * aperture * (PI / 180.0);
     float maxFactor = sin(apertureHalf);
 
-    vec2 uv = vec2(0);
+    vec2 uv = vec2(0.0);
     vec2 xy = 2.0 * fragTexCoord.xy - 1.0;
     float d = length(xy);
     

examples/shaders/resources/shaders/glsl100/pixelizer.fs

@@ -0,0 +1,32 @@
+#version 100
+
+precision mediump float;
+
+// Input vertex attributes (from vertex shader)
+varying vec2 fragTexCoord;
+varying vec4 fragColor;
+
+// Input uniform values
+uniform sampler2D texture0;
+uniform vec4 colDiffuse;
+
+// NOTE: Add here your custom variables 
+
+// NOTE: Render size values must be passed from code
+const float renderWidth = 800.0;
+const float renderHeight = 450.0;
+
+float pixelWidth = 5.0;
+float pixelHeight = 5.0;
+
+void main() 
+{ 
+    float dx = pixelWidth*(1.0/renderWidth);
+    float dy = pixelHeight*(1.0/renderHeight);
+    
+    vec2 coord = vec2(dx*floor(fragTexCoord.x/dx), dy*floor(fragTexCoord.y/dy));
+    
+    vec3 tc = texture2D(texture0, coord).rgb;
+
+    gl_FragColor = vec4(tc, 1.0);
+}

examples/shaders/resources/shaders/glsl100/predator.fs

@@ -13,7 +13,7 @@ uniform vec4 colDiffuse;
 // NOTE: Add here your custom variables
 
 void main() 
-{ 
+{
     vec3 color = texture2D(texture0, fragTexCoord).rgb;
     vec3 colors[3];
     colors[0] = vec3(0.0, 0.0, 1.0);
@@ -21,10 +21,11 @@ void main()
     colors[2] = vec3(1.0, 0.0, 0.0);
     
     float lum = (color.r + color.g + color.b)/3.0;
+
+    vec3 tc = vec3(0.0, 0.0, 0.0);
     
-    int ix = (lum < 0.5)? 0:1;
-    
-    vec3 tc = mix(colors[ix], colors[ix+1], (lum-float(ix)*0.5)/0.5);
-    
+    if (lum < 0.5) tc = mix(colors[0], colors[1], lum/0.5);
+    else tc = mix(colors[1], colors[2], (lum - 0.5)/0.5);
+
     gl_FragColor = vec4(tc, 1.0);
 }

examples/shaders/resources/shaders/glsl100/scanlines.fs

@@ -12,8 +12,8 @@ uniform vec4 colDiffuse;
 
 // NOTE: Add here your custom variables
 
-float offset = 0;
-float frequency = 720/3.0;
+float offset = 0.0;
+float frequency = 450.0/3.0;
 
 uniform float time;
 
@@ -40,5 +40,5 @@ void main()
     
     vec4 color = texture2D(texture0, fragTexCoord);
 
-    gl_FragColor = mix(vec4(0, 0.3, 0, 0), color, wavePos);
+    gl_FragColor = mix(vec4(0.0, 0.3, 0.0, 0.0), color, wavePos);
 }

examples/shaders/resources/shaders/glsl100/sobel.fs

@@ -1,18 +1,17 @@
-#version 330
+#version 100
+
+precision mediump float;
 
 // Input vertex attributes (from vertex shader)
-in vec2 fragTexCoord;
-in vec4 fragColor;
+varying vec2 fragTexCoord;
+varying vec4 fragColor;
 
 // Input uniform values
 uniform sampler2D texture0;
 uniform vec4 colDiffuse;
 
-// Output fragment color
-out vec4 finalColor;
-
 // NOTE: Add here your custom variables
-uniform vec2 resolution = vec2(800, 450);
+vec2 resolution = vec2(800.0, 450.0);
 
 void main() 
 {

examples/shaders/shaders_postprocessing.c

@@ -18,6 +18,48 @@
 
 #include "raylib.h"
 
+#if defined(PLATFORM_DESKTOP)
+    #define GLSL_VERSION            330
+    #define DEFAULT_VERTEX_SHADER   "resources/shaders/glsl330/base.vs"
+#else   // PLATFORM_RPI, PLATFORM_ANDROID, PLATFORM_WEB
+    #define GLSL_VERSION            100
+    #define DEFAULT_VERTEX_SHADER   "resources/shaders/glsl100/base.vs"
+#endif
+
+#define MAX_POSTPRO_SHADERS         12
+
+typedef enum {
+    FX_GRAYSCALE = 0,
+    FX_POSTERIZATION,
+    FX_DREAM_VISION,
+    FX_PIXELIZER,
+    FX_CROSS_HATCHING,
+    FX_CROSS_STITCHING,
+    FX_PREDATOR_VIEW,
+    FX_SCANLINES,
+    FX_FISHEYE,
+    FX_SOBEL,
+    FX_BLOOM,
+    FX_BLUR,
+    //FX_FXAA
+} PostproShader;
+
+static const char *postproShaderText[] = {
+    "GRAYSCALE",
+    "POSTERIZATION",
+    "DREAM_VISION",
+    "PIXELIZER",
+    "CROSS_HATCHING",
+    "CROSS_STITCHING",
+    "PREDATOR_VIEW",
+    "SCANLINES",
+    "FISHEYE",
+    "SOBEL",
+    "BLOOM",
+    "BLUR",
+    //"FXAA"
+};
+
 int main()
 {
     // Initialization
@@ -38,8 +80,25 @@ int main()
 
     Vector3 position = { 0.0f, 0.0f, 0.0f };                                // Set model position
     
-    Shader shader = LoadShader("resources/shaders/glsl330/base.vs", 
-                               "resources/shaders/glsl330/bloom.fs");       // Load postpro shader
+    // Load all postpro shaders
+    // NOTE 1: All postpro shader use the base vertex shader (DEFAULT_VERTEX_SHADER)
+    // NOTE 2: We load the correct shader depending on GLSL version
+    Shader shaders[MAX_POSTPRO_SHADERS];
+    
+    shaders[FX_GRAYSCALE] = LoadShader(DEFAULT_VERTEX_SHADER, FormatText("resources/shaders/glsl%i/grayscale.fs", GLSL_VERSION));
+    shaders[FX_POSTERIZATION] = LoadShader(DEFAULT_VERTEX_SHADER, FormatText("resources/shaders/glsl%i/posterization.fs", GLSL_VERSION));
+    shaders[FX_DREAM_VISION] = LoadShader(DEFAULT_VERTEX_SHADER, FormatText("resources/shaders/glsl%i/dream_vision.fs", GLSL_VERSION));
+    shaders[FX_PIXELIZER] = LoadShader(DEFAULT_VERTEX_SHADER, FormatText("resources/shaders/glsl%i/pixelizer.fs", GLSL_VERSION));
+    shaders[FX_CROSS_HATCHING] = LoadShader(DEFAULT_VERTEX_SHADER, FormatText("resources/shaders/glsl%i/cross_hatching.fs", GLSL_VERSION));
+    shaders[FX_CROSS_STITCHING] = LoadShader(DEFAULT_VERTEX_SHADER, FormatText("resources/shaders/glsl%i/cross_stitching.fs", GLSL_VERSION));
+    shaders[FX_PREDATOR_VIEW] = LoadShader(DEFAULT_VERTEX_SHADER, FormatText("resources/shaders/glsl%i/predator.fs", GLSL_VERSION));
+    shaders[FX_SCANLINES] = LoadShader(DEFAULT_VERTEX_SHADER, FormatText("resources/shaders/glsl%i/scanlines.fs", GLSL_VERSION));
+    shaders[FX_FISHEYE] = LoadShader(DEFAULT_VERTEX_SHADER, FormatText("resources/shaders/glsl%i/fisheye.fs", GLSL_VERSION));
+    shaders[FX_SOBEL] = LoadShader(DEFAULT_VERTEX_SHADER, FormatText("resources/shaders/glsl%i/sobel.fs", GLSL_VERSION));
+    shaders[FX_BLOOM] = LoadShader(DEFAULT_VERTEX_SHADER, FormatText("resources/shaders/glsl%i/bloom.fs", GLSL_VERSION));
+    shaders[FX_BLUR] = LoadShader(DEFAULT_VERTEX_SHADER, FormatText("resources/shaders/glsl%i/blur.fs", GLSL_VERSION));
+    
+    int currentShader = FX_GRAYSCALE;
 
     // Create a RenderTexture2D to be used for render to texture
     RenderTexture2D target = LoadRenderTexture(screenWidth, screenHeight);
@@ -56,6 +115,12 @@ int main()
         // Update
         //----------------------------------------------------------------------------------
         UpdateCamera(&camera);              // Update camera
+        
+        if (IsKeyPressed(KEY_RIGHT)) currentShader++;
+        else if (IsKeyPressed(KEY_LEFT)) currentShader--;
+        
+        if (currentShader >= MAX_POSTPRO_SHADERS) currentShader = 0;
+        else if (currentShader < 0) currentShader = MAX_POSTPRO_SHADERS - 1;
         //----------------------------------------------------------------------------------
 
         // Draw
@@ -73,21 +138,26 @@ int main()
                     DrawGrid(10, 1.0f);     // Draw a grid
 
                 End3dMode();
-          
-                DrawText("HELLO POSTPROCESSING!", 70, 190, 50, RED);
                 
             EndTextureMode();           // End drawing to texture (now we have a texture available for next passes)
             
-            BeginShaderMode(shader);
+            // Render previously generated texture using selected postpro shader
+            BeginShaderMode(shaders[currentShader]);
             
                 // NOTE: Render texture must be y-flipped due to default OpenGL coordinates (left-bottom)
                 DrawTextureRec(target.texture, (Rectangle){ 0, 0, target.texture.width, -target.texture.height }, (Vector2){ 0, 0 }, WHITE);
                 
             EndShaderMode();
             
+            DrawRectangle(0, 9, 580, 30, Fade(LIGHTGRAY, 0.7f));
+            
             DrawText("(c) Dwarf 3D model by David Moreno", screenWidth - 200, screenHeight - 20, 10, DARKGRAY);
-
-            DrawFPS(10, 10);
+            
+            DrawText("CURRENT POSTPRO SHADER:", 10, 15, 20, BLACK);
+            DrawText(postproShaderText[currentShader], 330, 15, 20, RED);
+            DrawText("< >", 540, 10, 30, DARKBLUE);
+            
+            DrawFPS(700, 15);
 
         EndDrawing();
         //----------------------------------------------------------------------------------
@@ -95,7 +165,10 @@ int main()
 
     // De-Initialization
     //--------------------------------------------------------------------------------------
-    UnloadShader(shader);           // Unload shader
+    
+    // Unload all postpro shaders
+    for (int i = 0; i < MAX_POSTPRO_SHADERS; i++) UnloadShader(shaders[i]);
+    
     UnloadTexture(texture);         // Unload texture
     UnloadModel(dwarf);             // Unload model
     UnloadRenderTexture(target);    // Unload render texture