REVIEWED: EXAMPLE: shaders_shapes_outline

Removed unneeded resources to use raylib ones.

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) |

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)
-{
-	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;
-	
-	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 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 color = mix(vec4(0.0), outlineColor, outline);
+	finalColor = mix(color, texel, texel.a);
 }

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;
+}