From d323767d7903c6b5ac56e4a96e71a825c05a785e Mon Sep 17 00:00:00 2001 From: Ray Date: Thu, 5 Mar 2020 13:39:11 +0100 Subject: Update shader examples to run on web --- examples/web/Makefile | 9 ++- .../resources/shaders/glsl100/base_lighting.vs | 59 ++++++++++++++++ .../resources/shaders/glsl100/basic_lighting.fs | 82 ---------------------- .../resources/shaders/glsl100/basic_lighting.vs | 33 --------- .../web/shaders/resources/shaders/glsl100/fog.fs | 39 +++++----- .../web/shaders/resources/shaders/glsl100/fog.vs | 32 --------- .../shaders/resources/shaders/glsl100/lighting.fs | 81 +++++++++++++++++++++ .../web/shaders/resources/shaders/glsl100/mask.fs | 17 +++-- .../web/shaders/resources/shaders/glsl100/mask.vs | 21 ------ examples/web/shaders/shaders_basic_lighting.c | 4 +- examples/web/shaders/shaders_fog.c | 4 +- examples/web/shaders/shaders_simple_mask.c | 3 +- 12 files changed, 176 insertions(+), 208 deletions(-) create mode 100644 examples/web/shaders/resources/shaders/glsl100/base_lighting.vs delete mode 100644 examples/web/shaders/resources/shaders/glsl100/basic_lighting.fs delete mode 100644 examples/web/shaders/resources/shaders/glsl100/basic_lighting.vs delete mode 100644 examples/web/shaders/resources/shaders/glsl100/fog.vs create mode 100644 examples/web/shaders/resources/shaders/glsl100/lighting.fs delete mode 100644 examples/web/shaders/resources/shaders/glsl100/mask.vs 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.fs b/examples/web/shaders/resources/shaders/glsl100/basic_lighting.fs deleted file mode 100644 index 50b41f0..0000000 --- a/examples/web/shaders/resources/shaders/glsl100/basic_lighting.fs +++ /dev/null @@ -1,82 +0,0 @@ -#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 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/lighting.fs b/examples/web/shaders/resources/shaders/glsl100/lighting.fs new file mode 100644 index 0000000..5e4ff64 --- /dev/null +++ b/examples/web/shaders/resources/shaders/glsl100/lighting.fs @@ -0,0 +1,81 @@ +#version 100 + +precision mediump float; + +// 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; + +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); // 16 refers to shine + specular += specCo; + } + } + + vec4 finalColor = (texelColor*((colDiffuse + vec4(specular, 1.0))*vec4(lightDot, 1.0))); + finalColor += texelColor*(ambient/10.0); + + // Gamma correction + 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"); -- cgit v1.2.3