From 65e6a6db53552fa241e81ae52b4258f7969b8771 Mon Sep 17 00:00:00 2001 From: Ray Date: Tue, 16 May 2017 00:14:14 +0200 Subject: Improved shaders_postprocessing example --- examples/shaders/resources/shaders/glsl100/blur.fs | 22 +++--- .../resources/shaders/glsl100/cross_hatching.fs | 10 +-- .../resources/shaders/glsl100/cross_stitching.fs | 9 +-- .../shaders/resources/shaders/glsl100/fisheye.fs | 4 +- .../shaders/resources/shaders/glsl100/pixel.fs | 32 -------- .../shaders/resources/shaders/glsl100/pixelizer.fs | 32 ++++++++ .../shaders/resources/shaders/glsl100/predator.fs | 11 +-- .../shaders/resources/shaders/glsl100/scanlines.fs | 6 +- .../shaders/resources/shaders/glsl100/sobel.fs | 13 ++-- examples/shaders/shaders_postprocessing.c | 89 ++++++++++++++++++++-- 10 files changed, 150 insertions(+), 78 deletions(-) delete mode 100644 examples/shaders/resources/shaders/glsl100/pixel.fs create mode 100644 examples/shaders/resources/shaders/glsl100/pixelizer.fs (limited to 'examples') diff --git a/examples/shaders/resources/shaders/glsl100/blur.fs b/examples/shaders/resources/shaders/glsl100/blur.fs index 1935f080..96f780e1 100644 --- a/examples/shaders/resources/shaders/glsl100/blur.fs +++ b/examples/shaders/resources/shaders/glsl100/blur.fs @@ -13,22 +13,22 @@ uniform vec4 colDiffuse; // NOTE: Add here your custom variables // NOTE: Render size values must be passed from code -const float renderWidth = 800; -const float renderHeight = 450; +const float renderWidth = 800.0; +const float renderHeight = 450.0; -float offset[3] = float[]( 0.0, 1.3846153846, 3.2307692308 ); -float weight[3] = float[]( 0.2270270270, 0.3162162162, 0.0702702703 ); +vec3 offset = vec3(0.0, 1.3846153846, 3.2307692308); +vec3 weight = vec3(0.2270270270, 0.3162162162, 0.0702702703); void main() { // Texel color fetching from texture sampler - vec3 tc = texture2D(texture0, fragTexCoord).rgb*weight[0]; - - for (int i = 1; i < 3; i++) - { - tc += texture2D(texture0, fragTexCoord + vec2(offset[i])/renderWidth, 0.0).rgb*weight[i]; - tc += texture2D(texture0, fragTexCoord - vec2(offset[i])/renderWidth, 0.0).rgb*weight[i]; - } + vec3 tc = texture2D(texture0, fragTexCoord).rgb*weight.x; + + tc += texture2D(texture0, fragTexCoord + vec2(offset.y)/renderWidth, 0.0).rgb*weight.y; + tc += texture2D(texture0, fragTexCoord - vec2(offset.y)/renderWidth, 0.0).rgb*weight.y; + + tc += texture2D(texture0, fragTexCoord + vec2(offset.z)/renderWidth, 0.0).rgb*weight.z; + tc += texture2D(texture0, fragTexCoord - vec2(offset.z)/renderWidth, 0.0).rgb*weight.z; gl_FragColor = vec4(tc, 1.0); } \ No newline at end of file diff --git a/examples/shaders/resources/shaders/glsl100/cross_hatching.fs b/examples/shaders/resources/shaders/glsl100/cross_hatching.fs index ced0fd63..7d63b0a5 100644 --- a/examples/shaders/resources/shaders/glsl100/cross_hatching.fs +++ b/examples/shaders/resources/shaders/glsl100/cross_hatching.fs @@ -12,11 +12,11 @@ uniform vec4 colDiffuse; // NOTE: Add here your custom variables -float hatchOffsetY = 5.0f; -float lumThreshold01 = 0.9f; -float lumThreshold02 = 0.7f; -float lumThreshold03 = 0.5f; -float lumThreshold04 = 0.3f; +float hatchOffsetY = 5.0; +float lumThreshold01 = 0.9; +float lumThreshold02 = 0.7; +float lumThreshold03 = 0.5; +float lumThreshold04 = 0.3; void main() { diff --git a/examples/shaders/resources/shaders/glsl100/cross_stitching.fs b/examples/shaders/resources/shaders/glsl100/cross_stitching.fs index 67639a55..de6d4f40 100644 --- a/examples/shaders/resources/shaders/glsl100/cross_stitching.fs +++ b/examples/shaders/resources/shaders/glsl100/cross_stitching.fs @@ -13,12 +13,11 @@ uniform vec4 colDiffuse; // NOTE: Add here your custom variables // NOTE: Render size values must be passed from code -const float renderWidth = 800; -const float renderHeight = 450; +const float renderWidth = 800.0; +const float renderHeight = 450.0; -float stitchingSize = 6.0f; - -uniform int invert = 0; +float stitchingSize = 6.0; +int invert = 0; vec4 PostFX(sampler2D tex, vec2 uv) { diff --git a/examples/shaders/resources/shaders/glsl100/fisheye.fs b/examples/shaders/resources/shaders/glsl100/fisheye.fs index 461e1405..8beb3d4a 100644 --- a/examples/shaders/resources/shaders/glsl100/fisheye.fs +++ b/examples/shaders/resources/shaders/glsl100/fisheye.fs @@ -16,11 +16,11 @@ const float PI = 3.1415926535; void main() { - float aperture = 178.0f; + float aperture = 178.0; float apertureHalf = 0.5 * aperture * (PI / 180.0); float maxFactor = sin(apertureHalf); - vec2 uv = vec2(0); + vec2 uv = vec2(0.0); vec2 xy = 2.0 * fragTexCoord.xy - 1.0; float d = length(xy); diff --git a/examples/shaders/resources/shaders/glsl100/pixel.fs b/examples/shaders/resources/shaders/glsl100/pixel.fs deleted file mode 100644 index 41ba3ed6..00000000 --- a/examples/shaders/resources/shaders/glsl100/pixel.fs +++ /dev/null @@ -1,32 +0,0 @@ -#version 100 - -precision mediump float; - -// Input vertex attributes (from vertex shader) -varying vec2 fragTexCoord; -varying vec4 fragColor; - -// Input uniform values -uniform sampler2D texture0; -uniform vec4 colDiffuse; - -// NOTE: Add here your custom variables - -// NOTE: Render size values must be passed from code -const float renderWidth = 800; -const float renderHeight = 450; - -uniform float pixelWidth = 5.0f; -uniform float pixelHeight = 5.0f; - -void main() -{ - float dx = pixelWidth*(1.0/renderWidth); - float dy = pixelHeight*(1.0/renderHeight); - - vec2 coord = vec2(dx*floor(fragTexCoord.x/dx), dy*floor(fragTexCoord.y/dy)); - - vec3 tc = texture2D(texture0, coord).rgb; - - gl_FragColor = vec4(tc, 1.0); -} \ No newline at end of file diff --git a/examples/shaders/resources/shaders/glsl100/pixelizer.fs b/examples/shaders/resources/shaders/glsl100/pixelizer.fs new file mode 100644 index 00000000..44fb0ca2 --- /dev/null +++ b/examples/shaders/resources/shaders/glsl100/pixelizer.fs @@ -0,0 +1,32 @@ +#version 100 + +precision mediump float; + +// Input vertex attributes (from vertex shader) +varying vec2 fragTexCoord; +varying vec4 fragColor; + +// Input uniform values +uniform sampler2D texture0; +uniform vec4 colDiffuse; + +// NOTE: Add here your custom variables + +// NOTE: Render size values must be passed from code +const float renderWidth = 800.0; +const float renderHeight = 450.0; + +float pixelWidth = 5.0; +float pixelHeight = 5.0; + +void main() +{ + float dx = pixelWidth*(1.0/renderWidth); + float dy = pixelHeight*(1.0/renderHeight); + + vec2 coord = vec2(dx*floor(fragTexCoord.x/dx), dy*floor(fragTexCoord.y/dy)); + + vec3 tc = texture2D(texture0, coord).rgb; + + gl_FragColor = vec4(tc, 1.0); +} \ No newline at end of file diff --git a/examples/shaders/resources/shaders/glsl100/predator.fs b/examples/shaders/resources/shaders/glsl100/predator.fs index efa7fe79..37dc0bdf 100644 --- a/examples/shaders/resources/shaders/glsl100/predator.fs +++ b/examples/shaders/resources/shaders/glsl100/predator.fs @@ -13,7 +13,7 @@ uniform vec4 colDiffuse; // NOTE: Add here your custom variables void main() -{ +{ vec3 color = texture2D(texture0, fragTexCoord).rgb; vec3 colors[3]; colors[0] = vec3(0.0, 0.0, 1.0); @@ -21,10 +21,11 @@ void main() colors[2] = vec3(1.0, 0.0, 0.0); float lum = (color.r + color.g + color.b)/3.0; + + vec3 tc = vec3(0.0, 0.0, 0.0); - int ix = (lum < 0.5)? 0:1; - - vec3 tc = mix(colors[ix], colors[ix+1], (lum-float(ix)*0.5)/0.5); - + if (lum < 0.5) tc = mix(colors[0], colors[1], lum/0.5); + else tc = mix(colors[1], colors[2], (lum - 0.5)/0.5); + gl_FragColor = vec4(tc, 1.0); } \ No newline at end of file diff --git a/examples/shaders/resources/shaders/glsl100/scanlines.fs b/examples/shaders/resources/shaders/glsl100/scanlines.fs index 529120d0..ce649e1a 100644 --- a/examples/shaders/resources/shaders/glsl100/scanlines.fs +++ b/examples/shaders/resources/shaders/glsl100/scanlines.fs @@ -12,8 +12,8 @@ uniform vec4 colDiffuse; // NOTE: Add here your custom variables -float offset = 0; -float frequency = 720/3.0; +float offset = 0.0; +float frequency = 450.0/3.0; uniform float time; @@ -40,5 +40,5 @@ void main() vec4 color = texture2D(texture0, fragTexCoord); - gl_FragColor = mix(vec4(0, 0.3, 0, 0), color, wavePos); + gl_FragColor = mix(vec4(0.0, 0.3, 0.0, 0.0), color, wavePos); } \ No newline at end of file diff --git a/examples/shaders/resources/shaders/glsl100/sobel.fs b/examples/shaders/resources/shaders/glsl100/sobel.fs index 9617592e..745562ad 100644 --- a/examples/shaders/resources/shaders/glsl100/sobel.fs +++ b/examples/shaders/resources/shaders/glsl100/sobel.fs @@ -1,18 +1,17 @@ -#version 330 +#version 100 + +precision mediump float; // Input vertex attributes (from vertex shader) -in vec2 fragTexCoord; -in vec4 fragColor; +varying vec2 fragTexCoord; +varying vec4 fragColor; // Input uniform values uniform sampler2D texture0; uniform vec4 colDiffuse; -// Output fragment color -out vec4 finalColor; - // NOTE: Add here your custom variables -uniform vec2 resolution = vec2(800, 450); +vec2 resolution = vec2(800.0, 450.0); void main() { diff --git a/examples/shaders/shaders_postprocessing.c b/examples/shaders/shaders_postprocessing.c index 43d1af72..bb239efa 100644 --- a/examples/shaders/shaders_postprocessing.c +++ b/examples/shaders/shaders_postprocessing.c @@ -18,6 +18,48 @@ #include "raylib.h" +#if defined(PLATFORM_DESKTOP) + #define GLSL_VERSION 330 + #define DEFAULT_VERTEX_SHADER "resources/shaders/glsl330/base.vs" +#else // PLATFORM_RPI, PLATFORM_ANDROID, PLATFORM_WEB + #define GLSL_VERSION 100 + #define DEFAULT_VERTEX_SHADER "resources/shaders/glsl100/base.vs" +#endif + +#define MAX_POSTPRO_SHADERS 12 + +typedef enum { + FX_GRAYSCALE = 0, + FX_POSTERIZATION, + FX_DREAM_VISION, + FX_PIXELIZER, + FX_CROSS_HATCHING, + FX_CROSS_STITCHING, + FX_PREDATOR_VIEW, + FX_SCANLINES, + FX_FISHEYE, + FX_SOBEL, + FX_BLOOM, + FX_BLUR, + //FX_FXAA +} PostproShader; + +static const char *postproShaderText[] = { + "GRAYSCALE", + "POSTERIZATION", + "DREAM_VISION", + "PIXELIZER", + "CROSS_HATCHING", + "CROSS_STITCHING", + "PREDATOR_VIEW", + "SCANLINES", + "FISHEYE", + "SOBEL", + "BLOOM", + "BLUR", + //"FXAA" +}; + int main() { // Initialization @@ -38,8 +80,25 @@ int main() Vector3 position = { 0.0f, 0.0f, 0.0f }; // Set model position - Shader shader = LoadShader("resources/shaders/glsl330/base.vs", - "resources/shaders/glsl330/bloom.fs"); // Load postpro shader + // Load all postpro shaders + // NOTE 1: All postpro shader use the base vertex shader (DEFAULT_VERTEX_SHADER) + // NOTE 2: We load the correct shader depending on GLSL version + Shader shaders[MAX_POSTPRO_SHADERS]; + + shaders[FX_GRAYSCALE] = LoadShader(DEFAULT_VERTEX_SHADER, FormatText("resources/shaders/glsl%i/grayscale.fs", GLSL_VERSION)); + shaders[FX_POSTERIZATION] = LoadShader(DEFAULT_VERTEX_SHADER, FormatText("resources/shaders/glsl%i/posterization.fs", GLSL_VERSION)); + shaders[FX_DREAM_VISION] = LoadShader(DEFAULT_VERTEX_SHADER, FormatText("resources/shaders/glsl%i/dream_vision.fs", GLSL_VERSION)); + shaders[FX_PIXELIZER] = LoadShader(DEFAULT_VERTEX_SHADER, FormatText("resources/shaders/glsl%i/pixelizer.fs", GLSL_VERSION)); + shaders[FX_CROSS_HATCHING] = LoadShader(DEFAULT_VERTEX_SHADER, FormatText("resources/shaders/glsl%i/cross_hatching.fs", GLSL_VERSION)); + shaders[FX_CROSS_STITCHING] = LoadShader(DEFAULT_VERTEX_SHADER, FormatText("resources/shaders/glsl%i/cross_stitching.fs", GLSL_VERSION)); + shaders[FX_PREDATOR_VIEW] = LoadShader(DEFAULT_VERTEX_SHADER, FormatText("resources/shaders/glsl%i/predator.fs", GLSL_VERSION)); + shaders[FX_SCANLINES] = LoadShader(DEFAULT_VERTEX_SHADER, FormatText("resources/shaders/glsl%i/scanlines.fs", GLSL_VERSION)); + shaders[FX_FISHEYE] = LoadShader(DEFAULT_VERTEX_SHADER, FormatText("resources/shaders/glsl%i/fisheye.fs", GLSL_VERSION)); + shaders[FX_SOBEL] = LoadShader(DEFAULT_VERTEX_SHADER, FormatText("resources/shaders/glsl%i/sobel.fs", GLSL_VERSION)); + shaders[FX_BLOOM] = LoadShader(DEFAULT_VERTEX_SHADER, FormatText("resources/shaders/glsl%i/bloom.fs", GLSL_VERSION)); + shaders[FX_BLUR] = LoadShader(DEFAULT_VERTEX_SHADER, FormatText("resources/shaders/glsl%i/blur.fs", GLSL_VERSION)); + + int currentShader = FX_GRAYSCALE; // Create a RenderTexture2D to be used for render to texture RenderTexture2D target = LoadRenderTexture(screenWidth, screenHeight); @@ -56,6 +115,12 @@ int main() // Update //---------------------------------------------------------------------------------- UpdateCamera(&camera); // Update camera + + if (IsKeyPressed(KEY_RIGHT)) currentShader++; + else if (IsKeyPressed(KEY_LEFT)) currentShader--; + + if (currentShader >= MAX_POSTPRO_SHADERS) currentShader = 0; + else if (currentShader < 0) currentShader = MAX_POSTPRO_SHADERS - 1; //---------------------------------------------------------------------------------- // Draw @@ -73,21 +138,26 @@ int main() DrawGrid(10, 1.0f); // Draw a grid End3dMode(); - - DrawText("HELLO POSTPROCESSING!", 70, 190, 50, RED); EndTextureMode(); // End drawing to texture (now we have a texture available for next passes) - BeginShaderMode(shader); + // Render previously generated texture using selected postpro shader + BeginShaderMode(shaders[currentShader]); // NOTE: Render texture must be y-flipped due to default OpenGL coordinates (left-bottom) DrawTextureRec(target.texture, (Rectangle){ 0, 0, target.texture.width, -target.texture.height }, (Vector2){ 0, 0 }, WHITE); EndShaderMode(); + DrawRectangle(0, 9, 580, 30, Fade(LIGHTGRAY, 0.7f)); + DrawText("(c) Dwarf 3D model by David Moreno", screenWidth - 200, screenHeight - 20, 10, DARKGRAY); - - DrawFPS(10, 10); + + DrawText("CURRENT POSTPRO SHADER:", 10, 15, 20, BLACK); + DrawText(postproShaderText[currentShader], 330, 15, 20, RED); + DrawText("< >", 540, 10, 30, DARKBLUE); + + DrawFPS(700, 15); EndDrawing(); //---------------------------------------------------------------------------------- @@ -95,7 +165,10 @@ int main() // De-Initialization //-------------------------------------------------------------------------------------- - UnloadShader(shader); // Unload shader + + // Unload all postpro shaders + for (int i = 0; i < MAX_POSTPRO_SHADERS; i++) UnloadShader(shaders[i]); + UnloadTexture(texture); // Unload texture UnloadModel(dwarf); // Unload model UnloadRenderTexture(target); // Unload render texture -- cgit v1.2.3