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

@@ -5,12 +5,10 @@
 *   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)
+*   Example contributed by Samuel Skiff (@GoldenThumbs) and reviewed by Ramon Santamaria (@raysan5)
 *
 *   Copyright (c) 2021 Samuel SKiff (@GoldenThumbs) and Ramon Santamaria (@raysan5)
 *
@@ -33,13 +31,23 @@ int main(void)
 
     InitWindow(screenWidth, screenHeight, "raylib [shaders] example - Apply an outline to a texture");
 
-    Texture2D egg = LoadTexture("resources/egg.png");
-    Texture2D torus = LoadTexture("resources/torus.png");
+    Texture2D texture = LoadTexture("resources/fudesumi.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);
+    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
     //--------------------------------------------------------------------------------------
@@ -49,7 +57,10 @@ int main(void)
     {
         // Update
         //----------------------------------------------------------------------------------
-        // TODO: Update your variables here
+        outlineSize += GetMouseWheelMove();
+        if (outlineSize < 1.0f) outlineSize = 1.0f;
+        
+        SetShaderValue(shdrOutline, outlineSizeLoc, &outlineSize, SHADER_UNIFORM_FLOAT);
         //----------------------------------------------------------------------------------
 
         // Draw
@@ -59,11 +70,14 @@ int main(void)
             ClearBackground(RAYWHITE);
 
             BeginShaderMode(shdrOutline);
-                DrawTextureEx(egg, (Vector2){ 0, 230 }, 0.0, outlineScale, WHITE);
-                DrawTextureEx(torus, (Vector2){ 544, 230 }, 0.0, outlineScale, WHITE);
+            
+                DrawTexture(texture, GetScreenWidth()/2 - texture.width/2, -30, WHITE);
+                
             EndShaderMode();
 
-            DrawText("Shader-based outlines for textures", 190, 200, 20, LIGHTGRAY);
+            DrawText("Shader-based\ntexture\noutline", 10, 10, 20, GRAY);
+            
+            DrawText(TextFormat("Outline size: %i px", (int)outlineSize), 10, 120, 20, MAROON);
 
             DrawFPS(710, 10);
 
@@ -73,8 +87,7 @@ int main(void)
 
     // De-Initialization
     //--------------------------------------------------------------------------------------
-    UnloadTexture(egg);
-    UnloadTexture(torus);
+    UnloadTexture(texture);
     UnloadShader(shdrOutline);
 
     CloseWindow();        // Close window and OpenGL context