REVIEWED: example: shaders_ascii_rendering

This commit is contained in:
Ray
2025-09-29 18:01:42 +02:00
parent 317c1eaeeb
commit 218a806ec2
3 changed files with 37 additions and 42 deletions

View File

@@ -10,42 +10,42 @@ uniform sampler2D texture0;
uniform vec2 resolution; uniform vec2 resolution;
uniform float fontSize; uniform float fontSize;
float greyScale(in vec3 col) { float GreyScale(in vec3 col)
{
return dot(col, vec3(0.2126, 0.7152, 0.0722)); return dot(col, vec3(0.2126, 0.7152, 0.0722));
} }
float character(float n, vec2 p) float GetCharacter(float n, vec2 p)
{ {
p = floor(p*vec2(4.0, -4.0) + 2.5); p = floor(p*vec2(4.0, -4.0) + 2.5);
// Check if the coordinate is inside the 5x5 grid (0 to 4). // Check if the coordinate is inside the 5x5 grid (0 to 4)
if (clamp(p.x, 0.0, 4.0) == p.x && clamp(p.y, 0.0, 4.0) == p.y) { if (clamp(p.x, 0.0, 4.0) == p.x && clamp(p.y, 0.0, 4.0) == p.y)
{
if (int(mod(n / exp2(p.x + 5.0 * p.y), 2.0)) == 1) { if (int(mod(n/exp2(p.x + 5.0 * p.y), 2.0)) == 1)
return 1.0; // The bit is on, so draw this part of the character. {
return 1.0; // The bit is on, so draw this part of the character
} }
} }
return 0.0; // The bit is off, or we are outside the grid. return 0.0; // The bit is off, or we are outside the grid
} }
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
// Main shader logic // Main shader logic
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
void main() void main()
{ {
vec2 charPixelSize = vec2(fontSize, fontSize*1.8); vec2 charPixelSize = vec2(fontSize, fontSize*1.8);
vec2 uvCellSize = charPixelSize/resolution; vec2 uvCellSize = charPixelSize/resolution;
vec2 cellUV = floor(fragTexCoord/uvCellSize)*uvCellSize; vec2 cellUV = floor(fragTexCoord/uvCellSize)*uvCellSize;
vec3 cellColor = texture(texture0, cellUV).rgb; vec3 cellColor = texture(texture0, cellUV).rgb;
float gray = greyScale(cellColor); float gray = GreyScale(cellColor);
float n = 4096; float n = 4096;
// limited character set // Limited character set
if (gray > 0.2) n = 65600.0; // : if (gray > 0.2) n = 65600.0; // :
if (gray > 0.3) n = 163153.0; // * if (gray > 0.3) n = 163153.0; // *
if (gray > 0.4) n = 15255086.0; // o if (gray > 0.4) n = 15255086.0; // o
@@ -55,12 +55,9 @@ void main()
if (gray > 0.8) n = 11512810.0; // # if (gray > 0.8) n = 11512810.0; // #
vec2 localUV = (fragTexCoord - cellUV)/uvCellSize; // Range [0.0, 1.0] vec2 localUV = (fragTexCoord - cellUV)/uvCellSize; // Range [0.0, 1.0]
vec2 p = localUV*2.0 - 1.0; vec2 p = localUV*2.0 - 1.0;
float charShape = character(n, p); float charShape = GetCharacter(n, p);
vec3 final_col = cellColor * charShape; finalColor = vec4(cellColor*charShape, 1.0);
finalColor = vec4(final_col, 1.0);
} }

View File

@@ -1,8 +1,8 @@
/******************************************************************************************* /*******************************************************************************************
* *
* raylib [shaders] example - ascii effect * raylib [shaders] example - ascii rendering
* *
* Example complexity rating: [] 1/4 * Example complexity rating: [] 2/4
* *
* Example originally created with raylib 5.5, last time updated with raylib 5.6 * Example originally created with raylib 5.5, last time updated with raylib 5.6
* *
@@ -33,7 +33,7 @@ int main(void)
const int screenWidth = 800; const int screenWidth = 800;
const int screenHeight = 450; const int screenHeight = 450;
InitWindow(screenWidth, screenHeight, "raylib [shaders] example - ascii effect"); InitWindow(screenWidth, screenHeight, "raylib [shaders] example - ascii rendering");
// Texture to test static drawing // Texture to test static drawing
Texture2D fudesumi = LoadTexture("resources/fudesumi.png"); Texture2D fudesumi = LoadTexture("resources/fudesumi.png");
@@ -43,7 +43,7 @@ int main(void)
// Load shader to be used on postprocessing // Load shader to be used on postprocessing
Shader shader = LoadShader(0, TextFormat("resources/shaders/glsl%i/ascii.fs", GLSL_VERSION)); Shader shader = LoadShader(0, TextFormat("resources/shaders/glsl%i/ascii.fs", GLSL_VERSION));
// These locations are used to send data to the GPU. // These locations are used to send data to the GPU
int resolutionLoc = GetShaderLocation(shader, "resolution"); int resolutionLoc = GetShaderLocation(shader, "resolution");
int fontSizeLoc = GetShaderLocation(shader, "fontSize"); int fontSizeLoc = GetShaderLocation(shader, "fontSize");
@@ -69,33 +69,31 @@ int main(void)
{ {
// Update // Update
//---------------------------------------------------------------------------------- //----------------------------------------------------------------------------------
if (circlePos.x > 200.0f || circlePos.x < 40.0f) {
circleSpeed *= -1;
}
circlePos.x += circleSpeed; circlePos.x += circleSpeed;
if ((circlePos.x > 200.0f) || (circlePos.x < 40.0f)) circleSpeed *= -1;
//----------------------------------------------------------------------------------
// Draw // Draw
//---------------------------------------------------------------------------------- //----------------------------------------------------------------------------------
// Draw our scene to a render texture first
BeginTextureMode(target); BeginTextureMode(target);
ClearBackground(WHITE); // The background of the scene itself ClearBackground(WHITE);
DrawTexture(fudesumi, 500, -30, WHITE); // Using custom shader DrawTexture(fudesumi, 500, -30, WHITE);
DrawTextureV(raysan, circlePos, WHITE); DrawTextureV(raysan, circlePos, WHITE);
EndTextureMode(); EndTextureMode();
BeginDrawing();
BeginDrawing();
ClearBackground(RAYWHITE); ClearBackground(RAYWHITE);
BeginShaderMode(shader); BeginShaderMode(shader);
// Draw the render texture containing scene
// Draw the scene texture (that we rendered earlier) to the screen. // The shader will process every pixel on the screen
// The shader will process every pixel of this texture.
DrawTextureRec(target.texture, DrawTextureRec(target.texture,
(Rectangle){ 0, 0, (float)target.texture.width, (float)-target.texture.height }, (Rectangle){ 0, 0, (float)target.texture.width, (float)-target.texture.height },
(Vector2){ 0, 0 }, (Vector2){ 0, 0 }, WHITE);
WHITE);
EndShaderMode(); EndShaderMode();
DrawRectangle(0, 0, screenWidth, 40, BLACK); DrawRectangle(0, 0, screenWidth, 40, BLACK);

View File

Before

Width:  |  Height:  |  Size: 44 KiB

After

Width:  |  Height:  |  Size: 44 KiB