From 485787059a00e54287f465464ce6e430fe9488c6 Mon Sep 17 00:00:00 2001 From: Ray Date: Mon, 2 Mar 2020 13:27:54 +0100 Subject: [PATCH] Review shader exaples to work on web (GLSL 100) --- .../shaders/resources/shaders/glsl100/base.fs | 1 - .../shaders/glsl100/base_lighting.vs | 59 ++++++++++++ .../shaders/resources/shaders/glsl100/fog.fs | 94 +++++++++++++++++++ .../resources/shaders/glsl100/lighting.fs | 81 ++++++++++++++++ .../shaders/resources/shaders/glsl100/mask.fs | 24 +++++ .../{basic_lighting.vs => base_lighting.vs} | 2 +- .../shaders/resources/shaders/glsl330/fog.fs | 20 ++-- .../shaders/resources/shaders/glsl330/fog.vs | 32 ------- .../{basic_lighting.fs => lighting.fs} | 2 +- .../shaders/resources/shaders/glsl330/mask.fs | 7 +- .../shaders/resources/shaders/glsl330/mask.vs | 21 ----- examples/shaders/shaders_basic_lighting.c | 4 +- examples/shaders/shaders_fog.c | 9 +- examples/shaders/shaders_simple_mask.c | 12 ++- 14 files changed, 291 insertions(+), 77 deletions(-) create mode 100644 examples/shaders/resources/shaders/glsl100/base_lighting.vs create mode 100644 examples/shaders/resources/shaders/glsl100/fog.fs create mode 100644 examples/shaders/resources/shaders/glsl100/lighting.fs create mode 100644 examples/shaders/resources/shaders/glsl100/mask.fs rename examples/shaders/resources/shaders/glsl330/{basic_lighting.vs => base_lighting.vs} (92%) delete mode 100644 examples/shaders/resources/shaders/glsl330/fog.vs rename examples/shaders/resources/shaders/glsl330/{basic_lighting.fs => lighting.fs} (97%) delete mode 100644 examples/shaders/resources/shaders/glsl330/mask.vs diff --git a/examples/shaders/resources/shaders/glsl100/base.fs b/examples/shaders/resources/shaders/glsl100/base.fs index b004ba0bd..c1126423a 100644 --- a/examples/shaders/resources/shaders/glsl100/base.fs +++ b/examples/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/shaders/resources/shaders/glsl100/base_lighting.vs b/examples/shaders/resources/shaders/glsl100/base_lighting.vs new file mode 100644 index 000000000..5245c6155 --- /dev/null +++ b/examples/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/shaders/resources/shaders/glsl100/fog.fs b/examples/shaders/resources/shaders/glsl100/fog.fs new file mode 100644 index 000000000..eeb2150f9 --- /dev/null +++ b/examples/shaders/resources/shaders/glsl100/fog.fs @@ -0,0 +1,94 @@ +#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; +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/shaders/resources/shaders/glsl100/lighting.fs b/examples/shaders/resources/shaders/glsl100/lighting.fs new file mode 100644 index 000000000..5e4ff64cb --- /dev/null +++ b/examples/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/shaders/resources/shaders/glsl100/mask.fs b/examples/shaders/resources/shaders/glsl100/mask.fs new file mode 100644 index 000000000..207106201 --- /dev/null +++ b/examples/shaders/resources/shaders/glsl100/mask.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 mask; +uniform vec4 colDiffuse; +uniform int frame; + +// NOTE: Add here your custom variables + +void main() +{ + 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 = texture2D(texture0, fragTexCoord + vec2(sin(float(frame)/90.0)/8.0, cos(float(frame)/60.0)/8.0)); + + gl_FragColor = texelColor*maskColour; +} diff --git a/examples/shaders/resources/shaders/glsl330/basic_lighting.vs b/examples/shaders/resources/shaders/glsl330/base_lighting.vs similarity index 92% rename from examples/shaders/resources/shaders/glsl330/basic_lighting.vs rename to examples/shaders/resources/shaders/glsl330/base_lighting.vs index 509954ddd..f1b75d79a 100644 --- a/examples/shaders/resources/shaders/glsl330/basic_lighting.vs +++ b/examples/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/shaders/resources/shaders/glsl330/fog.fs b/examples/shaders/resources/shaders/glsl330/fog.fs index 57ed14807..2160f31bb 100644 --- a/examples/shaders/resources/shaders/glsl330/fog.fs +++ b/examples/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/shaders/resources/shaders/glsl330/fog.vs b/examples/shaders/resources/shaders/glsl330/fog.vs deleted file mode 100644 index 00779cfa3..000000000 --- a/examples/shaders/resources/shaders/glsl330/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/shaders/resources/shaders/glsl330/basic_lighting.fs b/examples/shaders/resources/shaders/glsl330/lighting.fs similarity index 97% rename from examples/shaders/resources/shaders/glsl330/basic_lighting.fs rename to examples/shaders/resources/shaders/glsl330/lighting.fs index 50b41f09f..33fa8f9ab 100644 --- a/examples/shaders/resources/shaders/glsl330/basic_lighting.fs +++ b/examples/shaders/resources/shaders/glsl330/lighting.fs @@ -69,7 +69,7 @@ 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; } } diff --git a/examples/shaders/resources/shaders/glsl330/mask.fs b/examples/shaders/resources/shaders/glsl330/mask.fs index a06279096..a93bed07e 100644 --- a/examples/shaders/resources/shaders/glsl330/mask.fs +++ b/examples/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/shaders/resources/shaders/glsl330/mask.vs b/examples/shaders/resources/shaders/glsl330/mask.vs deleted file mode 100644 index 66a151617..000000000 --- a/examples/shaders/resources/shaders/glsl330/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/shaders/shaders_basic_lighting.c b/examples/shaders/shaders_basic_lighting.c index 74bf27759..a5bb145a5 100644 --- a/examples/shaders/shaders_basic_lighting.c +++ b/examples/shaders/shaders_basic_lighting.c @@ -69,8 +69,8 @@ int main(void) modelB.materials[0].maps[MAP_DIFFUSE].texture = texture; modelC.materials[0].maps[MAP_DIFFUSE].texture = texture; - Shader shader = LoadShader("resources/shaders/glsl330/basic_lighting.vs", - "resources/shaders/glsl330/basic_lighting.fs"); + Shader 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/shaders/shaders_fog.c b/examples/shaders/shaders_fog.c index e8f2691d2..53fd94073 100644 --- a/examples/shaders/shaders_fog.c +++ b/examples/shaders/shaders_fog.c @@ -32,6 +32,12 @@ #define RLIGHTS_IMPLEMENTATION #include "rlights.h" +#if defined(PLATFORM_DESKTOP) + #define GLSL_VERSION 330 +#else // PLATFORM_RPI, PLATFORM_ANDROID, PLATFORM_WEB + #define GLSL_VERSION 100 +#endif + int main(void) { // Initialization @@ -61,7 +67,8 @@ int main(void) modelC.materials[0].maps[MAP_DIFFUSE].texture = texture; // Load shader and set up some uniforms - Shader shader = LoadShader("resources/shaders/glsl330/fog.vs", "resources/shaders/glsl330/fog.fs"); + Shader shader = LoadShader(FormatText("resources/shaders/glsl%i/base_lighting.vs", GLSL_VERSION), + FormatText("resources/shaders/glsl%i/fog.fs", GLSL_VERSION)); shader.locs[LOC_MATRIX_MODEL] = GetShaderLocation(shader, "matModel"); shader.locs[LOC_VECTOR_VIEW] = GetShaderLocation(shader, "viewPos"); diff --git a/examples/shaders/shaders_simple_mask.c b/examples/shaders/shaders_simple_mask.c index c8762be3a..88163b34b 100644 --- a/examples/shaders/shaders_simple_mask.c +++ b/examples/shaders/shaders_simple_mask.c @@ -21,6 +21,12 @@ #include "raylib.h" #include "raymath.h" +#if defined(PLATFORM_DESKTOP) + #define GLSL_VERSION 330 +#else // PLATFORM_RPI, PLATFORM_ANDROID, PLATFORM_WEB + #define GLSL_VERSION 100 +#endif + int main(void) { // Initialization @@ -50,8 +56,8 @@ int main(void) Model model3 = LoadModelFromMesh(sphere); // Load the shader - Shader shader = LoadShader("resources/shaders/glsl330/mask.vs", "resources/shaders/glsl330/mask.fs"); - + Shader shader = LoadShader(0, FormatText("resources/shaders/glsl%i/mask.fs", GLSL_VERSION)); + // Load and apply the diffuse texture (colour map) Texture texDiffuse = LoadTexture("resources/plasma.png"); model1.materials[0].maps[MAP_DIFFUSE].texture = texDiffuse; @@ -66,7 +72,7 @@ int main(void) shader.locs[LOC_MAP_EMISSION] = GetShaderLocation(shader, "mask"); // Frame is incremented each frame to animate the shader - int shaderFrame = GetShaderLocation(shader, "framesCounter"); + int shaderFrame = GetShaderLocation(shader, "frame"); // Apply the shader to the two models model1.materials[0].shader = shader;