Update shader examples to run on web

11 files changed, 106 insertions, 138 deletions

diff --git a/examples/web/Makefile b/examples/web/Makefile
index b251428..2514a70 100644
--- a/examples/web/Makefile
+++ b/examples/web/Makefile
@@ -905,21 +905,20 @@ shaders/shaders_eratosthenes: shaders/shaders_eratosthenes.c
 shaders/shaders_basic_lighting: shaders/shaders_basic_lighting.c
 	$(CC) -o $@$(EXT) $< $(CFLAGS) $(INCLUDE_PATHS) $(LDFLAGS) $(LDLIBS) -D$(PLATFORM) \
     --preload-file shaders/resources/texel_checker.png@resources/texel_checker.png \
-    --preload-file shaders/resources/shaders/glsl100/basic_lighting.fs@resources/shaders/glsl100/basic_lighting.fs \
-    --preload-file shaders/resources/shaders/glsl100/basic_lighting.vs@resources/shaders/glsl100/basic_lighting.vs
+    --preload-file shaders/resources/shaders/glsl100/basic_lighting.fs@resources/shaders/glsl100/lighting.fs \
+    --preload-file shaders/resources/shaders/glsl100/basic_lighting.vs@resources/shaders/glsl100/base_lighting.vs
 
 shaders/shaders_fog: shaders/shaders_fog.c
 	$(CC) -o $@$(EXT) $< $(CFLAGS) $(INCLUDE_PATHS) $(LDFLAGS) $(LDLIBS) -D$(PLATFORM) \
     --preload-file shaders/resources/texel_checker.png@resources/texel_checker.png \
     --preload-file shaders/resources/shaders/glsl100/fog.fs@resources/shaders/glsl100/fog.fs \
-    --preload-file shaders/resources/shaders/glsl100/fog.vs@resources/shaders/glsl100/fog.vs
+    --preload-file shaders/resources/shaders/glsl100/basic_lighting.vs@resources/shaders/glsl100/base_lighting.vs
 
 shaders/shaders_simple_mask: shaders/shaders_simple_mask.c
 	$(CC) -o $@$(EXT) $< $(CFLAGS) $(INCLUDE_PATHS) $(LDFLAGS) $(LDLIBS) -D$(PLATFORM) \
     --preload-file shaders/resources/plasma.png@resources/plasma.png \
     --preload-file shaders/resources/mask.png@resources/mask.png \
-    --preload-file shaders/resources/shaders/glsl100/mask.fs@resources/shaders/glsl100/mask.fs \
-    --preload-file shaders/resources/shaders/glsl100/mask.vs@resources/shaders/glsl100/mask.vs
+    --preload-file shaders/resources/shaders/glsl100/mask.fs@resources/shaders/glsl100/mask.fs
 
 # compile [audio] example - module playing (XM)
 audio/audio_module_playing: audio/audio_module_playing.c
diff --git a/examples/web/shaders/resources/shaders/glsl100/base_lighting.vs b/examples/web/shaders/resources/shaders/glsl100/base_lighting.vs
new file mode 100644
index 0000000..5245c61
--- /dev/null
+++ b/examples/web/shaders/resources/shaders/glsl100/base_lighting.vs
@@ -0,0 +1,59 @@
+#version 100
+
+// 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/glsl100/basic_lighting.vs b/examples/web/shaders/resources/shaders/glsl100/basic_lighting.vs
deleted file mode 100644
index 509954d..0000000
--- a/examples/web/shaders/resources/shaders/glsl100/basic_lighting.vs
+++ /dev/null
@@ -1,33 +0,0 @@
-#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/fog.fs b/examples/web/shaders/resources/shaders/glsl100/fog.fs
index 57ed148..eeb2150 100644
--- a/examples/web/shaders/resources/shaders/glsl100/fog.fs
+++ b/examples/web/shaders/resources/shaders/glsl100/fog.fs
@@ -1,18 +1,17 @@
-#version 330
+#version 100
+
+precision mediump float;
 
 // Input vertex attributes (from vertex shader)
-in vec2 fragTexCoord;
-in vec4 fragColor;
-in vec3 fragPosition;
-in vec3 fragNormal;
+varying vec3 fragPosition;
+varying vec2 fragTexCoord;
+varying vec4 fragColor;
+varying 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
@@ -42,7 +41,7 @@ uniform float fogDensity;
 void main()
 {
     // Texel color fetching from texture sampler
-    vec4 texelColor = texture(texture0, fragTexCoord);
+    vec4 texelColor = texture2D(texture0, fragTexCoord);
     vec3 lightDot = vec3(0.0);
     vec3 normal = normalize(fragNormal);
     vec3 viewD = normalize(viewPos - fragPosition);
@@ -55,25 +54,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);
+    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));
@@ -95,5 +90,5 @@ void main()
 
     fogFactor = clamp(fogFactor, 0.0, 1.0);
 
-    finalColor = mix(fogColor, finalColor, fogFactor);
+    gl_FragColor = mix(fogColor, finalColor, fogFactor);
 }
diff --git a/examples/web/shaders/resources/shaders/glsl100/fog.vs b/examples/web/shaders/resources/shaders/glsl100/fog.vs
deleted file mode 100644
index 00779cf..0000000
--- a/examples/web/shaders/resources/shaders/glsl100/fog.vs
+++ /dev/null
@@ -1,32 +0,0 @@
-#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/basic_lighting.fs b/examples/web/shaders/resources/shaders/glsl100/lighting.fs
index 50b41f0..5e4ff64 100644
--- a/examples/web/shaders/resources/shaders/glsl100/basic_lighting.fs
+++ b/examples/web/shaders/resources/shaders/glsl100/lighting.fs
@@ -1,18 +1,17 @@
-#version 330
+#version 100
+
+precision mediump float;
 
 // Input vertex attributes (from vertex shader)
-in vec3 fragPosition;
-in vec2 fragTexCoord;
-in vec4 fragColor;
-in vec3 fragNormal;
+varying vec3 fragPosition;
+varying vec2 fragTexCoord;
+varying vec4 fragColor;
+varying 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
@@ -41,7 +40,7 @@ uniform vec3 viewPos;
 void main()
 {
     // Texel color fetching from texture sampler
-    vec4 texelColor = texture(texture0, fragTexCoord);
+    vec4 texelColor = texture2D(texture0, fragTexCoord);
     vec3 lightDot = vec3(0.0);
     vec3 normal = normalize(fragNormal);
     vec3 viewD = normalize(viewPos - fragPosition);
@@ -69,14 +68,14 @@ 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)));
+    vec4 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));
+    gl_FragColor = pow(finalColor, vec4(1.0/2.2));
 }
diff --git a/examples/web/shaders/resources/shaders/glsl100/mask.fs b/examples/web/shaders/resources/shaders/glsl100/mask.fs
index a062790..2071062 100644
--- a/examples/web/shaders/resources/shaders/glsl100/mask.fs
+++ b/examples/web/shaders/resources/shaders/glsl100/mask.fs
@@ -1,21 +1,24 @@
-#version 330
+#version 100
+
+precision mediump float;
 
 // Input vertex attributes (from vertex shader)
-in vec2 fragTexCoord;
+varying vec2 fragTexCoord;
+varying vec4 fragColor;
 
 // Input uniform values
 uniform sampler2D texture0;
 uniform sampler2D mask;
+uniform vec4 colDiffuse;
 uniform int frame;
 
-// Output fragment color
-out vec4 finalColor;
+// NOTE: Add here your custom variables
 
 void main()
 {
-    vec4 maskColour = texture(mask, fragTexCoord+vec2(sin(-frame/150.0)/10.0,cos(-frame/170.0)/10.0));
+    vec4 maskColour = texture2D(mask, fragTexCoord + vec2(sin(-float(frame)/150.0)/10.0, cos(-float(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 = texture2D(texture0, fragTexCoord + vec2(sin(float(frame)/90.0)/8.0, cos(float(frame)/60.0)/8.0));
 
-    finalColor = texelColor * maskColour;
+    gl_FragColor = texelColor*maskColour;
 }
diff --git a/examples/web/shaders/resources/shaders/glsl100/mask.vs b/examples/web/shaders/resources/shaders/glsl100/mask.vs
deleted file mode 100644
index 66a1516..0000000
--- a/examples/web/shaders/resources/shaders/glsl100/mask.vs
+++ /dev/null
@@ -1,21 +0,0 @@
-#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/shaders_basic_lighting.c b/examples/web/shaders/shaders_basic_lighting.c
index 6428663..f0ea2dd 100644
--- a/examples/web/shaders/shaders_basic_lighting.c
+++ b/examples/web/shaders/shaders_basic_lighting.c
@@ -99,8 +99,8 @@ int main(void)
     modelB.materials[0].maps[MAP_DIFFUSE].texture = texture;
     modelC.materials[0].maps[MAP_DIFFUSE].texture = texture;
 
-    shader = LoadShader(FormatText("resources/shaders/glsl%i/basic_lighting.vs", GLSL_VERSION), 
-                        FormatText("resources/shaders/glsl%i/basic_lighting.fs", GLSL_VERSION));
+    shader = LoadShader(FormatText("resources/shaders/glsl%i/base_lighting.vs", GLSL_VERSION), 
+                        FormatText("resources/shaders/glsl%i/lighting.fs", GLSL_VERSION));
     
     // Get some shader loactions
     shader.locs[LOC_MATRIX_MODEL] = GetShaderLocation(shader, "matModel");
diff --git a/examples/web/shaders/shaders_fog.c b/examples/web/shaders/shaders_fog.c
index 679b7c6..24e6469 100644
--- a/examples/web/shaders/shaders_fog.c
+++ b/examples/web/shaders/shaders_fog.c
@@ -99,8 +99,8 @@ int main(void)
     modelC.materials[0].maps[MAP_DIFFUSE].texture = texture;
 
     // Load shader and set up some uniforms
-    shader = LoadShader(FormatText("resources/shaders/glsl%i/fog.vs", GLSL_VERSION), 
-                        FormatText("resources/shaders/glsl%i/fog.fs", GLSL_VERSION));
+    shader = LoadShader(0, FormatText("resources/shaders/glsl%i/mask.fs", GLSL_VERSION));
+    
     shader.locs[LOC_MATRIX_MODEL] = GetShaderLocation(shader, "matModel");
     shader.locs[LOC_VECTOR_VIEW] = GetShaderLocation(shader, "viewPos");
 
diff --git a/examples/web/shaders/shaders_simple_mask.c b/examples/web/shaders/shaders_simple_mask.c
index 199a925..5854e29 100644
--- a/examples/web/shaders/shaders_simple_mask.c
+++ b/examples/web/shaders/shaders_simple_mask.c
@@ -90,8 +90,7 @@ int main(void)
     model3 = LoadModelFromMesh(sphere);
 
     // Load the shader
-    shader = LoadShader(FormatText("resources/shaders/glsl%i/mask.vs", GLSL_VERSION), 
-                        FormatText("resources/shaders/glsl%i/mask.fs", GLSL_VERSION));
+    shader = LoadShader(0, FormatText("resources/shaders/glsl%i/mask.fs", GLSL_VERSION));
 
     // Load and apply the diffuse texture (colour map)
     texDiffuse = LoadTexture("resources/plasma.png");