From 1b91ac0b0d78d10605a892c62914169865c2a138 Mon Sep 17 00:00:00 2001 From: raysan5 Date: Tue, 12 Oct 2021 13:36:31 +0200 Subject: REVIEWED: EXAMPLE: shaders_shapes_outline Removed unneeded resources to use raylib ones. --- examples/shaders/resources/LICENSE.md | 2 - examples/shaders/resources/egg.png | Bin 316 -> 0 bytes .../shaders/resources/shaders/glsl330/outline.fs | 37 ++++---- examples/shaders/resources/torus.png | Bin 446 -> 0 bytes examples/shaders/shaders_shapes_outline.c | 84 ------------------ examples/shaders/shaders_texture_outline.c | 97 +++++++++++++++++++++ examples/shaders/shaders_texture_outline.png | Bin 0 -> 264137 bytes 7 files changed, 115 insertions(+), 105 deletions(-) delete mode 100644 examples/shaders/resources/egg.png delete mode 100644 examples/shaders/resources/torus.png delete mode 100644 examples/shaders/shaders_shapes_outline.c create mode 100644 examples/shaders/shaders_texture_outline.c create mode 100644 examples/shaders/shaders_texture_outline.png diff --git a/examples/shaders/resources/LICENSE.md b/examples/shaders/resources/LICENSE.md index b08a555a..96458eca 100644 --- a/examples/shaders/resources/LICENSE.md +++ b/examples/shaders/resources/LICENSE.md @@ -9,5 +9,3 @@ | raysan.png | [@raysan5](https://github.com/raysan5) | [CC0](https://creativecommons.org/publicdomain/zero/1.0/) | - | | space.png | ❔ | ❔ | - | | texel_checker.png | [@raysan5](https://github.com/raysan5) | [CC0](https://creativecommons.org/publicdomain/zero/1.0/) | Made with [UV Checker Map Maker](http://uvchecker.byvalle.com/) | -| egg.png | [@GoldenThumbs](https://github.com/GoldenThumbs) | -| torus.png | [@GoldenThumbs](https://github.com/GoldenThumbs) | diff --git a/examples/shaders/resources/egg.png b/examples/shaders/resources/egg.png deleted file mode 100644 index c8524952..00000000 Binary files a/examples/shaders/resources/egg.png and /dev/null differ diff --git a/examples/shaders/resources/shaders/glsl330/outline.fs b/examples/shaders/resources/shaders/glsl330/outline.fs index c1be1b5d..804a1a59 100644 --- a/examples/shaders/resources/shaders/glsl330/outline.fs +++ b/examples/shaders/resources/shaders/glsl330/outline.fs @@ -7,30 +7,29 @@ in vec4 fragColor; // Input uniform values uniform sampler2D texture0; uniform vec4 colDiffuse; -uniform vec2 texScale; + +uniform vec2 textureSize; +uniform float outlineSize; +uniform vec4 outlineColor; // Output fragment color out vec4 finalColor; -// Function for drawing outlines on alpha-blended textures -vec4 DrawOutline(sampler2D tex, vec2 uv, vec2 lineScale, vec3 lineCol) +void main() { - vec2 texelScale = 1.0 / lineScale; - vec4 center = texture(tex, uv); // We sample the center texel, (with all color data) - // Next we sample four corner texels, but only for the alpha channel (this is for the outline) - vec4 corners; - corners.x = texture(tex, uv+vec2( texelScale.x, texelScale.y)).a; - corners.y = texture(tex, uv+vec2( texelScale.x,-texelScale.y)).a; - corners.z = texture(tex, uv+vec2(-texelScale.x, texelScale.y)).a; - corners.w = texture(tex, uv+vec2(-texelScale.x,-texelScale.y)).a; + vec4 texel = texture(texture0, fragTexCoord); // Get texel color + vec2 texelScale = vec2(0.0); + texelScale.x = outlineSize/textureSize.x; + texelScale.y = outlineSize/textureSize.y; + + // We sample four corner texels, but only for the alpha channel (this is for the outline) + vec4 corners = vec4(0.0); + corners.x = texture(texture0, fragTexCoord + vec2(texelScale.x, texelScale.y)).a; + corners.y = texture(texture0, fragTexCoord + vec2(texelScale.x, -texelScale.y)).a; + corners.z = texture(texture0, fragTexCoord + vec2(-texelScale.x, texelScale.y)).a; + corners.w = texture(texture0, fragTexCoord + vec2(-texelScale.x, -texelScale.y)).a; float outline = min(dot(corners, vec4(1.0)), 1.0); - vec4 col = mix(vec4(0.0), vec4(lineCol, 1.0), outline); - col = mix(col, center, center.a); - return col; -} - -void main() -{ - finalColor = DrawOutline(texture0, fragTexCoord, texScale, vec3(0.0)); + vec4 color = mix(vec4(0.0), outlineColor, outline); + finalColor = mix(color, texel, texel.a); } \ No newline at end of file diff --git a/examples/shaders/resources/torus.png b/examples/shaders/resources/torus.png deleted file mode 100644 index 399d7825..00000000 Binary files a/examples/shaders/resources/torus.png and /dev/null differ diff --git a/examples/shaders/shaders_shapes_outline.c b/examples/shaders/shaders_shapes_outline.c deleted file mode 100644 index 30194c4b..00000000 --- a/examples/shaders/shaders_shapes_outline.c +++ /dev/null @@ -1,84 +0,0 @@ -/******************************************************************************************* -* -* raylib [shaders] example - Apply an shdrOutline to a texture -* -* NOTE: This example requires raylib OpenGL 3.3 or ES2 versions for shaders support, -* OpenGL 1.1 does not support shaders, recompile raylib to OpenGL 3.3 version. -* -* NOTE: Shaders used in this example are #version 330 (OpenGL 3.3). -* -* This example has been created using raylib 3.8 (www.raylib.com) -* raylib is licensed under an unmodified zlib/libpng license (View raylib.h for details) -* -* Example contributed by Samuel Skiff (@GoldenThumbs) -* -* Copyright (c) 2021 Samuel SKiff (@GoldenThumbs) and Ramon Santamaria (@raysan5) -* -********************************************************************************************/ - -#include "raylib.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 - //-------------------------------------------------------------------------------------- - const int screenWidth = 800; - const int screenHeight = 450; - - InitWindow(screenWidth, screenHeight, "raylib [shaders] example - Apply an outline to a texture"); - - Texture2D egg = LoadTexture("resources/egg.png"); - Texture2D torus = LoadTexture("resources/torus.png"); - Shader shdrOutline = LoadShader(0, TextFormat("resources/shaders/glsl%i/outline.fs", GLSL_VERSION)); - - float outlineScale = 16.0f; - float textureScale[2] = { 16.0f*4, 16.0f*4 }; - SetShaderValue(shdrOutline, GetShaderLocation(shdrOutline, "texScale"), textureScale, SHADER_UNIFORM_VEC2); - - SetTargetFPS(60); // Set our game to run at 60 frames-per-second - //-------------------------------------------------------------------------------------- - - // Main game loop - while (!WindowShouldClose()) // Detect window close button or ESC key - { - // Update - //---------------------------------------------------------------------------------- - // TODO: Update your variables here - //---------------------------------------------------------------------------------- - - // Draw - //---------------------------------------------------------------------------------- - BeginDrawing(); - - ClearBackground(RAYWHITE); - - BeginShaderMode(shdrOutline); - DrawTextureEx(egg, (Vector2){ 0, 230 }, 0.0, outlineScale, WHITE); - DrawTextureEx(torus, (Vector2){ 544, 230 }, 0.0, outlineScale, WHITE); - EndShaderMode(); - - DrawText("Shader-based outlines for textures", 190, 200, 20, LIGHTGRAY); - - DrawFPS(710, 10); - - EndDrawing(); - //---------------------------------------------------------------------------------- - } - - // De-Initialization - //-------------------------------------------------------------------------------------- - UnloadTexture(egg); - UnloadTexture(torus); - UnloadShader(shdrOutline); - - CloseWindow(); // Close window and OpenGL context - //-------------------------------------------------------------------------------------- - - return 0; -} \ No newline at end of file diff --git a/examples/shaders/shaders_texture_outline.c b/examples/shaders/shaders_texture_outline.c new file mode 100644 index 00000000..c40abf95 --- /dev/null +++ b/examples/shaders/shaders_texture_outline.c @@ -0,0 +1,97 @@ +/******************************************************************************************* +* +* raylib [shaders] example - Apply an shdrOutline to a texture +* +* NOTE: This example requires raylib OpenGL 3.3 or ES2 versions for shaders support, +* OpenGL 1.1 does not support shaders, recompile raylib to OpenGL 3.3 version. +* +* This example has been created using raylib 3.8 (www.raylib.com) +* raylib is licensed under an unmodified zlib/libpng license (View raylib.h for details) +* +* Example contributed by Samuel Skiff (@GoldenThumbs) and reviewed by Ramon Santamaria (@raysan5) +* +* Copyright (c) 2021 Samuel SKiff (@GoldenThumbs) and Ramon Santamaria (@raysan5) +* +********************************************************************************************/ + +#include "raylib.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 + //-------------------------------------------------------------------------------------- + const int screenWidth = 800; + const int screenHeight = 450; + + InitWindow(screenWidth, screenHeight, "raylib [shaders] example - Apply an outline to a texture"); + + Texture2D texture = LoadTexture("resources/fudesumi.png"); + + Shader shdrOutline = LoadShader(0, TextFormat("resources/shaders/glsl%i/outline.fs", GLSL_VERSION)); + + float outlineSize = 2.0f; + float outlineColor[4] = { 1.0f, 0.0f, 0.0f, 1.0f }; // Normalized RED color + float textureSize[2] = { (float)texture.width, (float)texture.height }; + + // Get shader locations + int outlineSizeLoc = GetShaderLocation(shdrOutline, "outlineSize"); + int outlineColorLoc = GetShaderLocation(shdrOutline, "outlineColor"); + int textureSizeLoc = GetShaderLocation(shdrOutline, "textureSize"); + + // Set shader values (they can be changed later) + SetShaderValue(shdrOutline, outlineSizeLoc, &outlineSize, SHADER_UNIFORM_FLOAT); + SetShaderValue(shdrOutline, outlineColorLoc, outlineColor, SHADER_UNIFORM_VEC4); + SetShaderValue(shdrOutline, textureSizeLoc, textureSize, SHADER_UNIFORM_VEC2); + + SetTargetFPS(60); // Set our game to run at 60 frames-per-second + //-------------------------------------------------------------------------------------- + + // Main game loop + while (!WindowShouldClose()) // Detect window close button or ESC key + { + // Update + //---------------------------------------------------------------------------------- + outlineSize += GetMouseWheelMove(); + if (outlineSize < 1.0f) outlineSize = 1.0f; + + SetShaderValue(shdrOutline, outlineSizeLoc, &outlineSize, SHADER_UNIFORM_FLOAT); + //---------------------------------------------------------------------------------- + + // Draw + //---------------------------------------------------------------------------------- + BeginDrawing(); + + ClearBackground(RAYWHITE); + + BeginShaderMode(shdrOutline); + + DrawTexture(texture, GetScreenWidth()/2 - texture.width/2, -30, WHITE); + + EndShaderMode(); + + DrawText("Shader-based\ntexture\noutline", 10, 10, 20, GRAY); + + DrawText(TextFormat("Outline size: %i px", (int)outlineSize), 10, 120, 20, MAROON); + + DrawFPS(710, 10); + + EndDrawing(); + //---------------------------------------------------------------------------------- + } + + // De-Initialization + //-------------------------------------------------------------------------------------- + UnloadTexture(texture); + UnloadShader(shdrOutline); + + CloseWindow(); // Close window and OpenGL context + //-------------------------------------------------------------------------------------- + + return 0; +} \ No newline at end of file diff --git a/examples/shaders/shaders_texture_outline.png b/examples/shaders/shaders_texture_outline.png new file mode 100644 index 00000000..85c69b18 Binary files /dev/null and b/examples/shaders/shaders_texture_outline.png differ -- cgit v1.2.3