Updated Web examples to raylib 3.5

26 files changed, 476 insertions, 26 deletions

diff --git a/examples/web/shaders/resources/fudesumi.png b/examples/web/shaders/resources/fudesumi.png
index 9d9038f..1bf4ab7 100644
--- a/examples/web/shaders/resources/fudesumi.png
+++ b/examples/web/shaders/resources/fudesumi.png
diff --git a/examples/web/shaders/resources/mask.png b/examples/web/shaders/resources/mask.png
index 06a2597..6fb5ded 100644
--- a/examples/web/shaders/resources/mask.png
+++ b/examples/web/shaders/resources/mask.png
diff --git a/examples/web/shaders/resources/models/LICENSE b/examples/web/shaders/resources/models/LICENSE
new file mode 100644
index 0000000..39cdd61
--- /dev/null
+++ b/examples/web/shaders/resources/models/LICENSE
@@ -0,0 +1,4 @@
+Medieval City models and textures have been created by Alberto Cano, 
+and licensed as Creative Commons Attribution-NonCommercial 4.0.
+
+Check for details: https://creativecommons.org/licenses/by-nc/4.0/legalcode
diff --git a/examples/web/shaders/resources/models/barracks_diffuse.png b/examples/web/shaders/resources/models/barracks_diffuse.png
index 25a3658..ee81621 100644
--- a/examples/web/shaders/resources/models/barracks_diffuse.png
+++ b/examples/web/shaders/resources/models/barracks_diffuse.png
diff --git a/examples/web/shaders/resources/models/church_diffuse.png b/examples/web/shaders/resources/models/church_diffuse.png
index 7399846..73b9fb7 100644
--- a/examples/web/shaders/resources/models/church_diffuse.png
+++ b/examples/web/shaders/resources/models/church_diffuse.png
diff --git a/examples/web/shaders/resources/models/watermill_diffuse.png b/examples/web/shaders/resources/models/watermill_diffuse.png
index 7064956..a44d7c6 100644
--- a/examples/web/shaders/resources/models/watermill_diffuse.png
+++ b/examples/web/shaders/resources/models/watermill_diffuse.png
diff --git a/examples/web/shaders/resources/raysan.png b/examples/web/shaders/resources/raysan.png
new file mode 100644
index 0000000..36e13ba
--- /dev/null
+++ b/examples/web/shaders/resources/raysan.png
diff --git a/examples/web/shaders/resources/shaders/glsl100/base.fs b/examples/web/shaders/resources/shaders/glsl100/base.fs
index b004ba0..c112642 100644
--- a/examples/web/shaders/resources/shaders/glsl100/base.fs
+++ b/examples/web/shaders/resources/shaders/glsl100/base.fs
@@ -11,7 +11,6 @@ uniform sampler2D texture0;
 uniform vec4 colDiffuse;
 
 // NOTE: Add here your custom variables
-uniform vec2 resolution = vec2(800, 450);
 
 void main()
 {
diff --git a/examples/web/shaders/resources/shaders/glsl100/base_lighting_instanced.vs b/examples/web/shaders/resources/shaders/glsl100/base_lighting_instanced.vs
new file mode 100644
index 0000000..5e5430b
--- /dev/null
+++ b/examples/web/shaders/resources/shaders/glsl100/base_lighting_instanced.vs
@@ -0,0 +1,36 @@
+#version 330
+
+// Input vertex attributes
+in vec3 vertexPosition;
+in vec2 vertexTexCoord;
+in vec3 vertexNormal;
+in vec4 vertexColor;
+
+layout (location = 12) in mat4 instance;
+
+// Input uniform values
+uniform mat4 mvp;
+
+// Output vertex attributes (to fragment shader)
+out vec3 fragPosition;
+out vec2 fragTexCoord;
+out vec4 fragColor;
+out vec3 fragNormal;
+
+// NOTE: Add here your custom variables
+
+void main()
+{
+    // Send vertex attributes to fragment shader
+    fragPosition = vec3(instance * vec4(vertexPosition, 1.0));
+    fragTexCoord = vertexTexCoord;
+    fragColor = vertexColor;
+
+    mat3 normalMatrix = transpose(inverse(mat3(instance)));
+    fragNormal = normalize(normalMatrix * vertexNormal);
+
+    mat4 mvpi = mvp * instance;
+
+    // Calculate final vertex position
+    gl_Position = mvpi * vec4(vertexPosition, 1.0);
+}
diff --git a/examples/web/shaders/resources/shaders/glsl100/color_mix.fs b/examples/web/shaders/resources/shaders/glsl100/color_mix.fs
new file mode 100644
index 0000000..0074e6a
--- /dev/null
+++ b/examples/web/shaders/resources/shaders/glsl100/color_mix.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 sampler2D texture1;
+uniform vec4 colDiffuse;
+
+void main()
+{
+    // Texel color fetching from texture sampler
+    vec4 texelColor0 = texture2D(texture0, fragTexCoord);
+    vec4 texelColor1 = texture2D(texture1, fragTexCoord);
+    
+    float x = fract(fragTexCoord.s);
+    float out = smoothstep(0.4, 0.6, x);
+    
+    gl_FragColor = mix(texelColor0, texelColor1, out);
+}
\ No newline at end of file
diff --git a/examples/web/shaders/resources/shaders/glsl100/raymarching.fs b/examples/web/shaders/resources/shaders/glsl100/raymarching.fs
index 4ae7129..c823e01 100644
--- a/examples/web/shaders/resources/shaders/glsl100/raymarching.fs
+++ b/examples/web/shaders/resources/shaders/glsl100/raymarching.fs
@@ -8,8 +8,6 @@ varying vec4 fragColor;
 
 uniform vec3 viewEye;
 uniform vec3 viewCenter; 
-uniform vec3 viewUp;
-uniform float deltaTime;
 uniform float runTime;
 uniform vec2 resolution;
 
@@ -428,4 +426,4 @@ void main()
 #endif
 
     gl_FragColor = vec4( tot, 1.0 );
-}
\ No newline at end of file
+}
diff --git a/examples/web/shaders/resources/shaders/glsl100/spotlight.fs b/examples/web/shaders/resources/shaders/glsl100/spotlight.fs
new file mode 100644
index 0000000..c120261
--- /dev/null
+++ b/examples/web/shaders/resources/shaders/glsl100/spotlight.fs
@@ -0,0 +1,77 @@
+#version 100
+
+precision mediump float;
+
+#define MAX_SPOTS   3
+
+struct Spot {
+    vec2 pos;		// window coords of spot
+    float inner;	// inner fully transparent centre radius
+    float radius;	// alpha fades out to this radius
+};
+
+uniform Spot spots[MAX_SPOTS];  // Spotlight positions array
+uniform float screenWidth;      // Width of the screen
+
+void main()
+{
+	float alpha = 1.0;
+    
+	// Get the position of the current fragment (screen coordinates!)
+	vec2 pos = vec2(gl_FragCoord.x, gl_FragCoord.y);
+	
+	// Find out which spotlight is nearest
+	float d = 65000.0;  // some high value
+	int fi = -1;        // found index
+
+    for (int i = 0; i < MAX_SPOTS; i++)
+    {
+		for (int j = 0; j < MAX_SPOTS; j++)
+		{
+			float dj = distance(pos, spots[j].pos) - spots[j].radius + spots[i].radius;
+            
+			if (d > dj) 
+			{
+				d = dj;
+				fi = i;
+			}
+		}
+    }
+    
+    // d now equals distance to nearest spot...
+    // allowing for the different radii of all spotlights
+    if (fi == 0) 
+    {
+		if (d > spots[0].radius) alpha = 1.0;
+		else
+		{
+			if (d < spots[0].inner) alpha = 0.0;
+			else alpha = (d - spots[0].inner)/(spots[0].radius - spots[0].inner);
+		}
+	}
+    else if (fi == 1) 
+    {
+		if (d > spots[1].radius) alpha = 1.0;
+		else
+		{
+			if (d < spots[1].inner) alpha = 0.0;
+			else alpha = (d - spots[1].inner)/(spots[1].radius - spots[1].inner);
+		}
+	}
+    else if (fi == 2) 
+    {
+		if (d > spots[2].radius) alpha = 1.0;
+		else
+		{
+			if (d < spots[2].inner) alpha = 0.0;
+			else alpha = (d - spots[2].inner)/(spots[2].radius - spots[2].inner);
+		}
+	}
+	
+	// Right hand side of screen is dimly lit, 
+    // could make the threshold value user definable
+	if ((pos.x > screenWidth/2.0) && (alpha > 0.9)) alpha = 0.9;
+
+	// could make the black out colour user definable...
+    gl_FragColor = vec4(0, 0, 0, alpha);
+}
diff --git a/examples/web/shaders/resources/shaders/glsl120/base_lighting.vs b/examples/web/shaders/resources/shaders/glsl120/base_lighting.vs
new file mode 100644
index 0000000..678c60e
--- /dev/null
+++ b/examples/web/shaders/resources/shaders/glsl120/base_lighting.vs
@@ -0,0 +1,59 @@
+#version 120
+
+// Input vertex attributes
+attribute vec3 vertexPosition;
+attribute vec2 vertexTexCoord;
+attribute vec3 vertexNormal;
+attribute vec4 vertexColor;
+
+// Input uniform values
+uniform mat4 mvp;
+uniform mat4 matModel;
+
+// Output vertex attributes (to fragment shader)
+varying vec3 fragPosition;
+varying vec2 fragTexCoord;
+varying vec4 fragColor;
+varying vec3 fragNormal;
+
+// NOTE: Add here your custom variables
+
+// https://github.com/glslify/glsl-inverse
+mat3 inverse(mat3 m)
+{
+  float a00 = m[0][0], a01 = m[0][1], a02 = m[0][2];
+  float a10 = m[1][0], a11 = m[1][1], a12 = m[1][2];
+  float a20 = m[2][0], a21 = m[2][1], a22 = m[2][2];
+
+  float b01 = a22*a11 - a12*a21;
+  float b11 = -a22*a10 + a12*a20;
+  float b21 = a21*a10 - a11*a20;
+
+  float det = a00*b01 + a01*b11 + a02*b21;
+
+  return mat3(b01, (-a22*a01 + a02*a21), (a12*a01 - a02*a11),
+              b11, (a22*a00 - a02*a20), (-a12*a00 + a02*a10),
+              b21, (-a21*a00 + a01*a20), (a11*a00 - a01*a10))/det;
+}
+
+// https://github.com/glslify/glsl-transpose
+mat3 transpose(mat3 m)
+{
+  return mat3(m[0][0], m[1][0], m[2][0],
+              m[0][1], m[1][1], m[2][1],
+              m[0][2], m[1][2], m[2][2]);
+}
+
+void main()
+{
+    // Send vertex attributes to fragment shader
+    fragPosition = vec3(matModel*vec4(vertexPosition, 1.0));
+    fragTexCoord = vertexTexCoord;
+    fragColor = vertexColor;
+    
+    mat3 normalMatrix = transpose(inverse(mat3(matModel)));
+    fragNormal = normalize(normalMatrix*vertexNormal);
+
+    // Calculate final vertex position
+    gl_Position = mvp*vec4(vertexPosition, 1.0);
+}
diff --git a/examples/web/shaders/resources/shaders/glsl120/fog.fs b/examples/web/shaders/resources/shaders/glsl120/fog.fs
new file mode 100644
index 0000000..fcd6ef9
--- /dev/null
+++ b/examples/web/shaders/resources/shaders/glsl120/fog.fs
@@ -0,0 +1,92 @@
+#version 120
+
+// Input vertex attributes (from vertex shader)
+varying vec3 fragPosition;
+varying vec2 fragTexCoord;
+varying vec4 fragColor;
+varying vec3 fragNormal;
+
+// Input uniform values
+uniform sampler2D texture0;
+uniform vec4 colDiffuse;
+
+// NOTE: Add here your custom variables
+
+#define     MAX_LIGHTS              4
+#define     LIGHT_DIRECTIONAL       0
+#define     LIGHT_POINT             1
+
+struct MaterialProperty {
+    vec3 color;
+    int useSampler;
+    sampler2D sampler;
+};
+
+struct Light {
+    int enabled;
+    int type;
+    vec3 position;
+    vec3 target;
+    vec4 color;
+};
+
+// Input lighting values
+uniform Light lights[MAX_LIGHTS];
+uniform vec4 ambient;
+uniform vec3 viewPos;
+uniform float fogDensity;
+
+void main()
+{
+    // Texel color fetching from texture sampler
+    vec4 texelColor = texture2D(texture0, fragTexCoord);
+    vec3 lightDot = vec3(0.0);
+    vec3 normal = normalize(fragNormal);
+    vec3 viewD = normalize(viewPos - fragPosition);
+    vec3 specular = vec3(0.0);
+
+    // NOTE: Implement here your fragment shader code
+
+    for (int i = 0; i < MAX_LIGHTS; i++)
+    {
+        if (lights[i].enabled == 1)
+        {
+            vec3 light = vec3(0.0);
+            
+            if (lights[i].type == LIGHT_DIRECTIONAL) light = -normalize(lights[i].target - lights[i].position);
+            if (lights[i].type == LIGHT_POINT) light = normalize(lights[i].position - fragPosition);
+
+            float NdotL = max(dot(normal, light), 0.0);
+            lightDot += lights[i].color.rgb*NdotL;
+
+            float specCo = 0.0;
+            if (NdotL > 0.0) specCo = pow(max(0.0, dot(viewD, reflect(-(light), normal))), 16.0); // Shine: 16.0
+            specular += specCo;
+        }
+    }
+
+    vec4 finalColor = (texelColor*((colDiffuse + vec4(specular,1))*vec4(lightDot, 1.0)));
+    finalColor += texelColor*(ambient/10.0);
+    
+    // Gamma correction
+    finalColor = pow(finalColor, vec4(1.0/2.2));
+    
+    // Fog calculation
+    float dist = length(viewPos - fragPosition);
+
+    // these could be parameters...
+    const vec4 fogColor = vec4(0.5, 0.5, 0.5, 1.0);
+    //const float fogDensity = 0.16;
+
+    // Exponential fog
+    float fogFactor = 1.0/exp((dist*fogDensity)*(dist*fogDensity));
+
+    // Linear fog (less nice)
+    //const float fogStart = 2.0;
+    //const float fogEnd = 10.0;
+    //float fogFactor = (fogEnd - dist)/(fogEnd - fogStart);
+
+    fogFactor = clamp(fogFactor, 0.0, 1.0);
+
+    gl_FragColor = mix(fogColor, finalColor, fogFactor);
+}
diff --git a/examples/web/shaders/resources/shaders/glsl330/base_lighting.vs b/examples/web/shaders/resources/shaders/glsl330/base_lighting.vs
index 509954d..f1b75d7 100644
--- a/examples/web/shaders/resources/shaders/glsl330/base_lighting.vs
+++ b/examples/web/shaders/resources/shaders/glsl330/base_lighting.vs
@@ -21,7 +21,7 @@ out vec3 fragNormal;
 void main()
 {
     // Send vertex attributes to fragment shader
-    fragPosition = vec3(matModel*vec4(vertexPosition, 1.0f));
+    fragPosition = vec3(matModel*vec4(vertexPosition, 1.0));
     fragTexCoord = vertexTexCoord;
     fragColor = vertexColor;
     
diff --git a/examples/web/shaders/resources/shaders/glsl330/base_lighting_instanced.vs b/examples/web/shaders/resources/shaders/glsl330/base_lighting_instanced.vs
new file mode 100644
index 0000000..5e5430b
--- /dev/null
+++ b/examples/web/shaders/resources/shaders/glsl330/base_lighting_instanced.vs
@@ -0,0 +1,36 @@
+#version 330
+
+// Input vertex attributes
+in vec3 vertexPosition;
+in vec2 vertexTexCoord;
+in vec3 vertexNormal;
+in vec4 vertexColor;
+
+layout (location = 12) in mat4 instance;
+
+// Input uniform values
+uniform mat4 mvp;
+
+// Output vertex attributes (to fragment shader)
+out vec3 fragPosition;
+out vec2 fragTexCoord;
+out vec4 fragColor;
+out vec3 fragNormal;
+
+// NOTE: Add here your custom variables
+
+void main()
+{
+    // Send vertex attributes to fragment shader
+    fragPosition = vec3(instance * vec4(vertexPosition, 1.0));
+    fragTexCoord = vertexTexCoord;
+    fragColor = vertexColor;
+
+    mat3 normalMatrix = transpose(inverse(mat3(instance)));
+    fragNormal = normalize(normalMatrix * vertexNormal);
+
+    mat4 mvpi = mvp * instance;
+
+    // Calculate final vertex position
+    gl_Position = mvpi * vec4(vertexPosition, 1.0);
+}
diff --git a/examples/web/shaders/resources/shaders/glsl330/color_mix.fs b/examples/web/shaders/resources/shaders/glsl330/color_mix.fs
new file mode 100644
index 0000000..11515b0
--- /dev/null
+++ b/examples/web/shaders/resources/shaders/glsl330/color_mix.fs
@@ -0,0 +1,25 @@
+#version 330
+
+// Input vertex attributes (from vertex shader)
+in vec3 vertexPos;
+in vec2 fragTexCoord;
+in vec4 fragColor;
+
+// Input uniform values
+uniform sampler2D texture0;
+uniform sampler2D texture1;
+uniform vec4 colDiffuse;
+
+out vec4 finalColor;
+
+void main()
+{
+    // Texel color fetching from texture sampler
+    vec4 texelColor0 = texture(texture0, fragTexCoord);
+    vec4 texelColor1 = texture(texture1, fragTexCoord);
+
+    float x = fract(fragTexCoord.s);
+    float out = smoothstep(0.4, 0.6, x);
+    
+    finalColor = mix(texelColor0, texelColor1, out);
+}
\ No newline at end of file
diff --git a/examples/web/shaders/resources/shaders/glsl330/eratosthenes.fs b/examples/web/shaders/resources/shaders/glsl330/eratosthenes.fs
index a6390b7..92d2d25 100644
--- a/examples/web/shaders/resources/shaders/glsl330/eratosthenes.fs
+++ b/examples/web/shaders/resources/shaders/glsl330/eratosthenes.fs
@@ -47,7 +47,7 @@ void main()
     {
         for (int i = 2; (i < max(2, sqrt(value) + 1)); i++) 
         {
-            if ((value - i*floor(value/i)) == 0) 
+            if ((value - i*floor(float(value)/float(i))) == 0)
             {
                 color = Colorizer(float(i), scale);
                 //break;    // Uncomment to color by the largest factor instead
diff --git a/examples/web/shaders/resources/shaders/glsl330/fog.fs b/examples/web/shaders/resources/shaders/glsl330/fog.fs
index 57ed148..2160f31 100644
--- a/examples/web/shaders/resources/shaders/glsl330/fog.fs
+++ b/examples/web/shaders/resources/shaders/glsl330/fog.fs
@@ -55,25 +55,21 @@ void main()
         if (lights[i].enabled == 1)
         {
             vec3 light = vec3(0.0);
-            if (lights[i].type == LIGHT_DIRECTIONAL) {
-                light = -normalize(lights[i].target - lights[i].position);
-            }
-            if (lights[i].type == LIGHT_POINT) {
-                light = normalize(lights[i].position - fragPosition);
-            }
+            
+            if (lights[i].type == LIGHT_DIRECTIONAL) light = -normalize(lights[i].target - lights[i].position);
+            if (lights[i].type == LIGHT_POINT) light = normalize(lights[i].position - fragPosition);
+
             float NdotL = max(dot(normal, light), 0.0);
-            lightDot += lights[i].color.rgb * NdotL;
+            lightDot += lights[i].color.rgb*NdotL;
 
             float specCo = 0.0;
-            if(NdotL > 0.0)
-                specCo = pow(max(0.0, dot(viewD, reflect(-(light), normal))), 16);//16 =shine
+            if (NdotL > 0.0) specCo = pow(max(0.0, dot(viewD, reflect(-(light), normal))), 16.0); // Shine: 16.0
             specular += specCo;
-
         }
     }
 
-    finalColor =  (texelColor * ((colDiffuse+vec4(specular,1)) * vec4(lightDot, 1.0)));
-    finalColor += texelColor * (ambient/10.0);
+    finalColor = (texelColor*((colDiffuse + vec4(specular,1))*vec4(lightDot, 1.0)));
+    finalColor += texelColor*(ambient/10.0);
     
     // Gamma correction
     finalColor = pow(finalColor, vec4(1.0/2.2));
diff --git a/examples/web/shaders/resources/shaders/glsl330/lighting.fs b/examples/web/shaders/resources/shaders/glsl330/lighting.fs
index 50b41f0..6877c1c 100644
--- a/examples/web/shaders/resources/shaders/glsl330/lighting.fs
+++ b/examples/web/shaders/resources/shaders/glsl330/lighting.fs
@@ -69,13 +69,13 @@ void main()
             lightDot += lights[i].color.rgb*NdotL;
 
             float specCo = 0.0;
-            if (NdotL > 0.0) specCo = pow(max(0.0, dot(viewD, reflect(-(light), normal))), 16); // 16 refers to shine
+            if (NdotL > 0.0) specCo = pow(max(0.0, dot(viewD, reflect(-(light), normal))), 16.0); // 16 refers to shine
             specular += specCo;
         }
     }
 
     finalColor = (texelColor*((colDiffuse + vec4(specular, 1.0))*vec4(lightDot, 1.0)));
-    finalColor += texelColor*(ambient/10.0);
+    finalColor += texelColor*(ambient/10.0)*colDiffuse;
     
     // Gamma correction
     finalColor = pow(finalColor, vec4(1.0/2.2));
diff --git a/examples/web/shaders/resources/shaders/glsl330/mask.fs b/examples/web/shaders/resources/shaders/glsl330/mask.fs
index a062790..a93bed0 100644
--- a/examples/web/shaders/resources/shaders/glsl330/mask.fs
+++ b/examples/web/shaders/resources/shaders/glsl330/mask.fs
@@ -2,6 +2,7 @@
 
 // Input vertex attributes (from vertex shader)
 in vec2 fragTexCoord;
+in vec4 fragColor;
 
 // Input uniform values
 uniform sampler2D texture0;
@@ -13,9 +14,9 @@ out vec4 finalColor;
 
 void main()
 {
-    vec4 maskColour = texture(mask, fragTexCoord+vec2(sin(-frame/150.0)/10.0,cos(-frame/170.0)/10.0));
+    vec4 maskColour = texture(mask, fragTexCoord + vec2(sin(-frame/150.0)/10.0, cos(-frame/170.0)/10.0));
     if (maskColour.r < 0.25) discard;
-    vec4 texelColor = texture(texture0, fragTexCoord+vec2(sin(frame/90.0)/8.0,cos(frame/60.0)/8.0));
+    vec4 texelColor = texture(texture0, fragTexCoord + vec2(sin(frame/90.0)/8.0, cos(frame/60.0)/8.0));
 
-    finalColor = texelColor * maskColour;
+    finalColor = texelColor*maskColour;
 }
diff --git a/examples/web/shaders/resources/shaders/glsl330/raymarching.fs b/examples/web/shaders/resources/shaders/glsl330/raymarching.fs
index 7c9fbcb..3cec58a 100644
--- a/examples/web/shaders/resources/shaders/glsl330/raymarching.fs
+++ b/examples/web/shaders/resources/shaders/glsl330/raymarching.fs
@@ -9,8 +9,6 @@ out vec4 finalColor;
 
 uniform vec3 viewEye;
 uniform vec3 viewCenter; 
-uniform vec3 viewUp;
-uniform float deltaTime;
 uniform float runTime;
 uniform vec2 resolution;
 
@@ -429,4 +427,4 @@ void main()
 #endif
 
     finalColor = vec4( tot, 1.0 );
-}
\ No newline at end of file
+}
diff --git a/examples/web/shaders/resources/shaders/glsl330/reload.fs b/examples/web/shaders/resources/shaders/glsl330/reload.fs
new file mode 100644
index 0000000..9891a4b
--- /dev/null
+++ b/examples/web/shaders/resources/shaders/glsl330/reload.fs
@@ -0,0 +1,40 @@
+#version 330
+
+// Input vertex attributes (from vertex shader)
+in vec2 fragTexCoord;           // Texture coordinates (sampler2D)
+in vec4 fragColor;              // Tint color
+
+// Output fragment color
+out vec4 finalColor;            // Output fragment color
+
+// Uniform inputs
+uniform vec2 resolution;        // Viewport resolution (in pixels)
+uniform vec2 mouse;             // Mouse pixel xy coordinates
+uniform float time;             // Total run time (in secods)
+
+// Draw circle
+vec4 DrawCircle(vec2 fragCoord, vec2 position, float radius, vec3 color)
+{
+	float d = length(position - fragCoord) - radius;
+	float t = clamp(d, 0.0, 1.0);
+	return vec4(color, 1.0 - t);
+}
+
+void main()
+{
+	vec2 fragCoord = gl_FragCoord.xy;
+	vec2 position = vec2(mouse.x, resolution.y - mouse.y);
+	float radius = 40.0;
+
+    // Draw background layer
+    vec4 colorA = vec4(0.2,0.2,0.8, 1.0);
+    vec4 colorB = vec4(1.0,0.7,0.2, 1.0);
+	vec4 layer1 = mix(colorA, colorB, abs(sin(time*0.1)));
+
+	// Draw circle layer
+	vec3 color = vec3(0.9, 0.16, 0.21);
+	vec4 layer2 = DrawCircle(fragCoord, position, radius, color);
+	
+	// Blend the two layers
+	finalColor = mix(layer1, layer2, layer2.a);
+}
diff --git a/examples/web/shaders/resources/shaders/glsl330/spotlight.fs b/examples/web/shaders/resources/shaders/glsl330/spotlight.fs
new file mode 100644
index 0000000..97a4377
--- /dev/null
+++ b/examples/web/shaders/resources/shaders/glsl330/spotlight.fs
@@ -0,0 +1,65 @@
+#version 330
+
+// Input vertex attributes (from vertex shader)
+in vec2 fragTexCoord;
+in vec4 fragColor;
+
+// Output fragment color
+out vec4 finalColor;
+
+// NOTE: Add here your custom variables
+
+#define MAX_SPOTS   3
+
+struct Spot {
+    vec2 pos;		// window coords of spot
+    float inner;	// inner fully transparent centre radius
+    float radius;	// alpha fades out to this radius
+};
+
+uniform Spot spots[MAX_SPOTS];      // Spotlight positions array
+uniform float screenWidth;          // Width of the screen
+
+void main()
+{
+	float alpha = 1.0;
+    
+	// Get the position of the current fragment (screen coordinates!)
+	vec2 pos = vec2(gl_FragCoord.x, gl_FragCoord.y);
+	
+	// Find out which spotlight is nearest
+	float d = 65000;  // some high value
+	int fi = -1;      // found index
+
+    for (int i = 0; i < MAX_SPOTS; i++)
+    {
+		for (int j = 0; j < MAX_SPOTS; j++)
+		{
+			float dj = distance(pos, spots[j].pos) - spots[j].radius + spots[i].radius;
+            
+			if (d > dj) 
+			{
+				d = dj;
+				fi = i;
+			}
+		}
+    }
+    
+    // d now equals distance to nearest spot...
+    // allowing for the different radii of all spotlights
+    if (fi != -1)
+    {
+		if (d > spots[fi].radius) alpha = 1.0;
+		else
+		{
+			if (d < spots[fi].inner) alpha = 0.0;
+			else alpha = (d - spots[fi].inner) / (spots[fi].radius - spots[fi].inner);
+		}
+	}
+	
+	// Right hand side of screen is dimly lit, 
+    // could make the threshold value user definable
+	if ((pos.x > screenWidth/2.0) && (alpha > 0.9)) alpha = 0.9;
+
+    finalColor = vec4(0, 0, 0, alpha);
+}
diff --git a/examples/web/shaders/resources/space.png b/examples/web/shaders/resources/space.png
index 4112973..5d016e4 100644
--- a/examples/web/shaders/resources/space.png
+++ b/examples/web/shaders/resources/space.png
diff --git a/examples/web/shaders/resources/texel_checker.png b/examples/web/shaders/resources/texel_checker.png
index 0e03e3e..d413fc5 100644
--- a/examples/web/shaders/resources/texel_checker.png
+++ b/examples/web/shaders/resources/texel_checker.png