Updated web examples to latest raylib

19 files changed, 616 insertions, 26 deletions

diff --git a/examples/web/shaders/resources/mask.png b/examples/web/shaders/resources/mask.png
new file mode 100644
index 0000000..06a2597
--- /dev/null
+++ b/examples/web/shaders/resources/mask.png
diff --git a/examples/web/shaders/resources/plasma.png b/examples/web/shaders/resources/plasma.png
new file mode 100644
index 0000000..01c2d88
--- /dev/null
+++ b/examples/web/shaders/resources/plasma.png
diff --git a/examples/web/shaders/resources/shaders/glsl100/basic_lighting.fs b/examples/web/shaders/resources/shaders/glsl100/basic_lighting.fs
new file mode 100644
index 0000000..50b41f0
--- /dev/null
+++ b/examples/web/shaders/resources/shaders/glsl100/basic_lighting.fs
@@ -0,0 +1,82 @@
+#version 330
+
+// Input vertex attributes (from vertex shader)
+in vec3 fragPosition;
+in vec2 fragTexCoord;
+in vec4 fragColor;
+in vec3 fragNormal;
+
+// Input uniform values
+uniform sampler2D texture0;
+uniform vec4 colDiffuse;
+
+// Output fragment color
+out vec4 finalColor;
+
+// 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;
+
+void main()
+{
+    // Texel color fetching from texture sampler
+    vec4 texelColor = texture(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); // 16 refers to shine
+            specular += specCo;
+        }
+    }
+
+    finalColor = (texelColor*((colDiffuse + vec4(specular, 1.0))*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/glsl100/basic_lighting.vs b/examples/web/shaders/resources/shaders/glsl100/basic_lighting.vs
new file mode 100644
index 0000000..509954d
--- /dev/null
+++ b/examples/web/shaders/resources/shaders/glsl100/basic_lighting.vs
@@ -0,0 +1,33 @@
+#version 330
+
+// Input vertex attributes
+in vec3 vertexPosition;
+in vec2 vertexTexCoord;
+in vec3 vertexNormal;
+in vec4 vertexColor;
+
+// Input uniform values
+uniform mat4 mvp;
+uniform mat4 matModel;
+
+// 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(matModel*vec4(vertexPosition, 1.0f));
+    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/glsl100/cubes_panning.fs b/examples/web/shaders/resources/shaders/glsl100/cubes_panning.fs
index cd96e22..108f057 100644
--- a/examples/web/shaders/resources/shaders/glsl100/cubes_panning.fs
+++ b/examples/web/shaders/resources/shaders/glsl100/cubes_panning.fs
@@ -7,8 +7,7 @@ varying vec2 fragTexCoord;
 varying vec4 fragColor;
 
 // Custom variables
-#define PI 3.14159265358979323846
-
+const float PI = 3.14159265358979323846;
 uniform float uTime;
 
 float divisions = 5.0;
@@ -20,9 +19,9 @@ vec2 VectorRotateTime(vec2 v, float speed)
     float localTime = fract(time);  // The time domain this works on is 1 sec.
     
     if ((localTime >= 0.0) && (localTime < 0.25)) angle = 0.0;
-    else if ((localTime >= 0.25) && (localTime < 0.50)) angle = PI/4*sin(2*PI*localTime - PI/2);
+    else if ((localTime >= 0.25) && (localTime < 0.50)) angle = PI/4.0*sin(2.0*PI*localTime - PI/2.0);
     else if ((localTime >= 0.50) && (localTime < 0.75)) angle = PI*0.25;
-    else if ((localTime >= 0.75) && (localTime < 1.00)) angle = PI/4*sin(2*PI*localTime);
+    else if ((localTime >= 0.75) && (localTime < 1.00)) angle = PI/4.0*sin(2.0*PI*localTime);
     
     // Rotate vector by angle
     v -= 0.5;
diff --git a/examples/web/shaders/resources/shaders/glsl100/eratosthenes.fs b/examples/web/shaders/resources/shaders/glsl100/eratosthenes.fs
index 0d598ca..ba6de89 100644
--- a/examples/web/shaders/resources/shaders/glsl100/eratosthenes.fs
+++ b/examples/web/shaders/resources/shaders/glsl100/eratosthenes.fs
@@ -37,22 +37,24 @@ vec4 Colorizer(float counter, float maxSize)
 
 void main()
 {
-	vec4 color = vec4(1.0);
-	float scale = 1000.0; // Makes 100x100 square grid. Change this variable to make a smaller or larger grid.
-	int value = int(scale*floor(fragTexCoord.y*scale) + floor(fragTexCoord.x*scale));  // Group pixels into boxes representing integer values
-
-    if ((value == 0) || (value == 1) || (value == 2)) gl_FragColor = vec4(1.0);
-    else
+    vec4 color = vec4(1.0);
+    float scale = 1000.0; // Makes 100x100 square grid. Change this variable to make a smaller or larger grid.
+    float value = scale*floor(fragTexCoord.y*scale) + floor(fragTexCoord.x*scale);  // Group pixels into boxes representing integer values
+    int valuei = int(value);
+    
+    //if ((valuei == 0) || (valuei == 1) || (valuei == 2)) gl_FragColor = vec4(1.0);
+    //else
     {
-        for (int i = 2; (i < max(2, sqrt(value) + 1)); i++) 
+        //for (int i = 2; (i < int(max(2.0, sqrt(value) + 1.0))); i++)
+        // NOTE: On GLSL 100 for loops are restricted and loop condition must be a constant
+        // Tested on RPI, it seems loops are limited around 60 iteractions
+        for (int i = 2; i < 48; i++)
         {
-            if ((value - i*floor(value/i)) == 0) 
+            if ((value - float(i)*floor(value/float(i))) <= 0.0)
             {
-                color = Colorizer(float(i), scale);
+                gl_FragColor = Colorizer(float(i), scale);
                 //break;    // Uncomment to color by the largest factor instead
             }
         }
-
-        gl_FragColor = color;
     }
 }
diff --git a/examples/web/shaders/resources/shaders/glsl100/fog.fs b/examples/web/shaders/resources/shaders/glsl100/fog.fs
new file mode 100644
index 0000000..57ed148
--- /dev/null
+++ b/examples/web/shaders/resources/shaders/glsl100/fog.fs
@@ -0,0 +1,99 @@
+#version 330
+
+// Input vertex attributes (from vertex shader)
+in vec2 fragTexCoord;
+in vec4 fragColor;
+in vec3 fragPosition;
+in vec3 fragNormal;
+
+// Input uniform values
+uniform sampler2D texture0;
+uniform vec4 colDiffuse;
+
+// Output fragment color
+out vec4 finalColor;
+
+// 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 = texture(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);//16 =shine
+            specular += specCo;
+
+        }
+    }
+
+    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);
+
+    finalColor = mix(fogColor, finalColor, fogFactor);
+}
diff --git a/examples/web/shaders/resources/shaders/glsl100/fog.vs b/examples/web/shaders/resources/shaders/glsl100/fog.vs
new file mode 100644
index 0000000..00779cf
--- /dev/null
+++ b/examples/web/shaders/resources/shaders/glsl100/fog.vs
@@ -0,0 +1,32 @@
+#version 330
+
+// Input vertex attributes
+in vec3 vertexPosition;
+in vec2 vertexTexCoord;
+in vec3 vertexNormal;
+in vec4 vertexColor;
+
+// Input uniform values
+uniform mat4 mvp;
+uniform mat4 matModel;
+
+// Output vertex attributes (to fragment shader)
+out vec2 fragTexCoord;
+out vec4 fragColor;
+out vec3 fragPosition;
+out vec3 fragNormal;
+
+// NOTE: Add here your custom variables
+
+void main()
+{
+    // Send vertex attributes to fragment shader
+    fragTexCoord = vertexTexCoord;
+    fragColor = vertexColor;
+    fragPosition = vec3(matModel*vec4(vertexPosition, 1.0f));
+    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/glsl100/julia_set.fs b/examples/web/shaders/resources/shaders/glsl100/julia_set.fs
index bc9ecd6..bce25db 100644
--- a/examples/web/shaders/resources/shaders/glsl100/julia_set.fs
+++ b/examples/web/shaders/resources/shaders/glsl100/julia_set.fs
@@ -11,7 +11,9 @@ uniform vec2 c;                 // c.x = real, c.y = imaginary component. Equati
 uniform vec2 offset;            // Offset of the scale.
 uniform float zoom;             // Zoom of the scale.
 
-const int MAX_ITERATIONS = 255; // Max iterations to do.
+// NOTE: Maximum number of shader for-loop iterations depend on GPU,
+// for example, on RasperryPi for this examply only supports up to 60
+const int MAX_ITERATIONS = 48;  // Max iterations to do
 
 // Square a complex number
 vec2 ComplexSquare(vec2 z)
@@ -55,23 +57,22 @@ void main()
     // NOTE: fragTexCoord already comes as normalized screen coordinates but offset must be normalized before scaling and zoom
     vec2 z = vec2((fragTexCoord.x + offset.x/screenDims.x)*2.5/zoom, (fragTexCoord.y + offset.y/screenDims.y)*1.5/zoom);
 
-    int iterations = 0;
-    for (int i = 0; i < MAX_ITERATIONS; i++)
+    int iter = 0;
+    for (int iterations = 0; iterations < 60; iterations++)
     {
-        iterations = i;
-        
         z = ComplexSquare(z) + c;  // Iterate function
-        
         if (dot(z, z) > 4.0) break;
+
+        iter = iterations;
     }
-    
+
     // Another few iterations decreases errors in the smoothing calculation.
     // See http://linas.org/art-gallery/escape/escape.html for more information.
     z = ComplexSquare(z) + c;
     z = ComplexSquare(z) + c;
     
     // This last part smooths the color (again see link above).
-    float smoothVal = float(iterations) + 1.0 - (log(log(length(z)))/log(2.0));
+    float smoothVal = float(iter) + 1.0 - (log(log(length(z)))/log(2.0));
     
     // Normalize the value so it is between 0 and 1.
     float norm = smoothVal/float(MAX_ITERATIONS);
diff --git a/examples/web/shaders/resources/shaders/glsl100/mask.fs b/examples/web/shaders/resources/shaders/glsl100/mask.fs
new file mode 100644
index 0000000..a062790
--- /dev/null
+++ b/examples/web/shaders/resources/shaders/glsl100/mask.fs
@@ -0,0 +1,21 @@
+#version 330
+
+// Input vertex attributes (from vertex shader)
+in vec2 fragTexCoord;
+
+// Input uniform values
+uniform sampler2D texture0;
+uniform sampler2D mask;
+uniform int frame;
+
+// Output fragment color
+out vec4 finalColor;
+
+void main()
+{
+    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));
+
+    finalColor = texelColor * maskColour;
+}
diff --git a/examples/web/shaders/resources/shaders/glsl100/mask.vs b/examples/web/shaders/resources/shaders/glsl100/mask.vs
new file mode 100644
index 0000000..66a1516
--- /dev/null
+++ b/examples/web/shaders/resources/shaders/glsl100/mask.vs
@@ -0,0 +1,21 @@
+#version 330
+
+// Input vertex attributes
+in vec3 vertexPosition;
+in vec2 vertexTexCoord;
+
+// Input uniform values
+uniform mat4 mvp;
+uniform mat4 matModel;
+
+// Output vertex attributes (to fragment shader)
+out vec2 fragTexCoord;
+
+void main()
+{
+    // Send vertex attributes to fragment shader
+    fragTexCoord = vertexTexCoord;
+
+    // Calculate final vertex position
+    gl_Position = mvp*vec4(vertexPosition, 1.0);
+}
diff --git a/examples/web/shaders/resources/shaders/glsl100/palette_switch.fs b/examples/web/shaders/resources/shaders/glsl100/palette_switch.fs
index c2273d5..e5b038d 100644
--- a/examples/web/shaders/resources/shaders/glsl100/palette_switch.fs
+++ b/examples/web/shaders/resources/shaders/glsl100/palette_switch.fs
@@ -15,15 +15,27 @@ uniform ivec3 palette[colors];
 void main()
 {
     // Texel color fetching from texture sampler
-    vec4 texelColor = texture2D(texture0, fragTexCoord) * fragColor;
+    vec4 texelColor = texture2D(texture0, fragTexCoord)*fragColor;
 
     // Convert the (normalized) texel color RED component (GB would work, too)
     // to the palette index by scaling up from [0, 1] to [0, 255].
     int index = int(texelColor.r*255.0);
-    ivec3 color = palette[index];
+    
+    ivec3 color = ivec3(0);
+    
+    // NOTE: On GLSL 100 we are not allowed to index a uniform array by a variable value,
+    // a constantmust be used, so this logic...
+    if (index == 0) color = palette[0];
+    else if (index == 1) color = palette[1];
+    else if (index == 2) color = palette[2];
+    else if (index == 3) color = palette[3];
+    else if (index == 4) color = palette[4];
+    else if (index == 5) color = palette[5];
+    else if (index == 6) color = palette[6];
+    else if (index == 7) color = palette[7];
 
     // Calculate final fragment color. Note that the palette color components
     // are defined in the range [0, 255] and need to be normalized to [0, 1]
     // for OpenGL to work.
-    gl_FragColor = vec4(color/255, texelColor.a);
+    gl_FragColor = vec4(float(color.x)/255.0, float(color.y)/255.0, float(color.z)/255.0, texelColor.a);
 }
diff --git a/examples/web/shaders/resources/shaders/glsl330/basic_lighting.fs b/examples/web/shaders/resources/shaders/glsl330/basic_lighting.fs
new file mode 100644
index 0000000..50b41f0
--- /dev/null
+++ b/examples/web/shaders/resources/shaders/glsl330/basic_lighting.fs
@@ -0,0 +1,82 @@
+#version 330
+
+// Input vertex attributes (from vertex shader)
+in vec3 fragPosition;
+in vec2 fragTexCoord;
+in vec4 fragColor;
+in vec3 fragNormal;
+
+// Input uniform values
+uniform sampler2D texture0;
+uniform vec4 colDiffuse;
+
+// Output fragment color
+out vec4 finalColor;
+
+// 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;
+
+void main()
+{
+    // Texel color fetching from texture sampler
+    vec4 texelColor = texture(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); // 16 refers to shine
+            specular += specCo;
+        }
+    }
+
+    finalColor = (texelColor*((colDiffuse + vec4(specular, 1.0))*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/basic_lighting.vs b/examples/web/shaders/resources/shaders/glsl330/basic_lighting.vs
new file mode 100644
index 0000000..509954d
--- /dev/null
+++ b/examples/web/shaders/resources/shaders/glsl330/basic_lighting.vs
@@ -0,0 +1,33 @@
+#version 330
+
+// Input vertex attributes
+in vec3 vertexPosition;
+in vec2 vertexTexCoord;
+in vec3 vertexNormal;
+in vec4 vertexColor;
+
+// Input uniform values
+uniform mat4 mvp;
+uniform mat4 matModel;
+
+// 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(matModel*vec4(vertexPosition, 1.0f));
+    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/glsl330/fog.fs b/examples/web/shaders/resources/shaders/glsl330/fog.fs
new file mode 100644
index 0000000..57ed148
--- /dev/null
+++ b/examples/web/shaders/resources/shaders/glsl330/fog.fs
@@ -0,0 +1,99 @@
+#version 330
+
+// Input vertex attributes (from vertex shader)
+in vec2 fragTexCoord;
+in vec4 fragColor;
+in vec3 fragPosition;
+in vec3 fragNormal;
+
+// Input uniform values
+uniform sampler2D texture0;
+uniform vec4 colDiffuse;
+
+// Output fragment color
+out vec4 finalColor;
+
+// 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 = texture(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);//16 =shine
+            specular += specCo;
+
+        }
+    }
+
+    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);
+
+    finalColor = mix(fogColor, finalColor, fogFactor);
+}
diff --git a/examples/web/shaders/resources/shaders/glsl330/fog.vs b/examples/web/shaders/resources/shaders/glsl330/fog.vs
new file mode 100644
index 0000000..00779cf
--- /dev/null
+++ b/examples/web/shaders/resources/shaders/glsl330/fog.vs
@@ -0,0 +1,32 @@
+#version 330
+
+// Input vertex attributes
+in vec3 vertexPosition;
+in vec2 vertexTexCoord;
+in vec3 vertexNormal;
+in vec4 vertexColor;
+
+// Input uniform values
+uniform mat4 mvp;
+uniform mat4 matModel;
+
+// Output vertex attributes (to fragment shader)
+out vec2 fragTexCoord;
+out vec4 fragColor;
+out vec3 fragPosition;
+out vec3 fragNormal;
+
+// NOTE: Add here your custom variables
+
+void main()
+{
+    // Send vertex attributes to fragment shader
+    fragTexCoord = vertexTexCoord;
+    fragColor = vertexColor;
+    fragPosition = vec3(matModel*vec4(vertexPosition, 1.0f));
+    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/glsl330/mask.fs b/examples/web/shaders/resources/shaders/glsl330/mask.fs
new file mode 100644
index 0000000..a062790
--- /dev/null
+++ b/examples/web/shaders/resources/shaders/glsl330/mask.fs
@@ -0,0 +1,21 @@
+#version 330
+
+// Input vertex attributes (from vertex shader)
+in vec2 fragTexCoord;
+
+// Input uniform values
+uniform sampler2D texture0;
+uniform sampler2D mask;
+uniform int frame;
+
+// Output fragment color
+out vec4 finalColor;
+
+void main()
+{
+    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));
+
+    finalColor = texelColor * maskColour;
+}
diff --git a/examples/web/shaders/resources/shaders/glsl330/mask.vs b/examples/web/shaders/resources/shaders/glsl330/mask.vs
new file mode 100644
index 0000000..66a1516
--- /dev/null
+++ b/examples/web/shaders/resources/shaders/glsl330/mask.vs
@@ -0,0 +1,21 @@
+#version 330
+
+// Input vertex attributes
+in vec3 vertexPosition;
+in vec2 vertexTexCoord;
+
+// Input uniform values
+uniform mat4 mvp;
+uniform mat4 matModel;
+
+// Output vertex attributes (to fragment shader)
+out vec2 fragTexCoord;
+
+void main()
+{
+    // Send vertex attributes to fragment shader
+    fragTexCoord = vertexTexCoord;
+
+    // Calculate final vertex position
+    gl_Position = mvp*vec4(vertexPosition, 1.0);
+}
diff --git a/examples/web/shaders/resources/texel_checker.png b/examples/web/shaders/resources/texel_checker.png
new file mode 100644
index 0000000..0e03e3e
--- /dev/null
+++ b/examples/web/shaders/resources/texel_checker.png