Add example shaders_shapes_outline.c (#1883)

This commit is contained in:
GoldenThumbs 2021-07-18 16:45:13 -05:00 committed by GitHub
parent 5c76c33d7d
commit 64e786fe28
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 157 additions and 0 deletions

View File

@ -9,3 +9,5 @@
| 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) |

Binary file not shown.

After

Width:  |  Height:  |  Size: 316 B

View File

@ -0,0 +1,35 @@
#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;
uniform vec2 texScale;
// 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 = texture2D(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 = texture2D(tex, uv+vec2( texelScale.x, texelScale.y)).a;
corners.y = texture2D(tex, uv+vec2( texelScale.x,-texelScale.y)).a;
corners.z = texture2D(tex, uv+vec2(-texelScale.x, texelScale.y)).a;
corners.w = texture2D(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()
{
gl_FragColor = DrawOutline(texture0, fragTexCoord, texScale, vec3(0.0));
}

View File

@ -0,0 +1,36 @@
#version 330
// Input vertex attributes (from vertex shader)
in vec2 fragTexCoord;
in vec4 fragColor;
// Input uniform values
uniform sampler2D texture0;
uniform vec4 colDiffuse;
uniform vec2 texScale;
// 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));
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 446 B

View File

@ -0,0 +1,84 @@
/*******************************************************************************************
*
* raylib [shaders] example - Apply an outline 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 outline = LoadShader(0, TextFormat("resources/shaders/glsl%i/outline.fs", GLSL_VERSION));
float oScale = 16.0;
float tScale[2] = { 16.0f*4, 16.0f*4 };
SetShaderValue(outline, GetShaderLocation(outline, "texScale"), tScale, 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(outline);
DrawTextureEx(egg, (Vector2){ 0, 230 }, 0.0, oScale, WHITE);
DrawTextureEx(torus, (Vector2){ 544, 230 }, 0.0, oScale, WHITE);
EndShaderMode();
DrawText("Shader-based outlines for textures", 190, 200, 20, LIGHTGRAY);
DrawFPS(710, 10);
EndDrawing();
//----------------------------------------------------------------------------------
}
// De-Initialization
//--------------------------------------------------------------------------------------
UnloadTexture(egg);
UnloadTexture(torus);
UnloadShader(outline);
CloseWindow(); // Close window and OpenGL context
//--------------------------------------------------------------------------------------
return 0;
}