From 0fe56b1674c99aa75c0dd6f45d77cbff80cf218c Mon Sep 17 00:00:00 2001 From: Marco Lizza Date: Wed, 9 Jan 2019 16:20:56 +0100 Subject: [PATCH] Adding basic palette-switching example using uniform arrays. --- examples/CMakeLists.txt | 1 + examples/Makefile | 1 + .../shaders/glsl100/palette-switch.fs | 29 ++++ .../shaders/glsl120/palette-switch.fs | 27 +++ .../shaders/glsl330/palette-switch.fs | 30 ++++ examples/shaders/shaders_palette_switch.c | 160 ++++++++++++++++++ 6 files changed, 248 insertions(+) create mode 100644 examples/shaders/resources/shaders/glsl100/palette-switch.fs create mode 100644 examples/shaders/resources/shaders/glsl120/palette-switch.fs create mode 100644 examples/shaders/resources/shaders/glsl330/palette-switch.fs create mode 100644 examples/shaders/shaders_palette_switch.c diff --git a/examples/CMakeLists.txt b/examples/CMakeLists.txt index 1c0c935ca..1d4fdd797 100644 --- a/examples/CMakeLists.txt +++ b/examples/CMakeLists.txt @@ -52,6 +52,7 @@ if(${PLATFORM} MATCHES "Android") list(REMOVE_ITEM example_sources ${CMAKE_CURRENT_SOURCE_DIR}/shaders/shaders_model_shader.c) list(REMOVE_ITEM example_sources ${CMAKE_CURRENT_SOURCE_DIR}/shaders/shaders_postprocessing.c) list(REMOVE_ITEM example_sources ${CMAKE_CURRENT_SOURCE_DIR}/shaders/shaders_raymarching.c) + list(REMOVE_ITEM example_sources ${CMAKE_CURRENT_SOURCE_DIR}/shaders/shaders_palette_switch.c) elseif(${PLATFORM} MATCHES "Web") set(CMAKE_C_FLAGS "${CMAKE_C_FLAGS} -Os -s USE_GLFW=3 -s ASSERTIONS=1 -s WASM=1 -s EMTERPRETIFY=1 -s EMTERPRETIFY_ASYNC=1") diff --git a/examples/Makefile b/examples/Makefile index deeadb753..b652482ff 100644 --- a/examples/Makefile +++ b/examples/Makefile @@ -420,6 +420,7 @@ EXAMPLES = \ shaders/shaders_custom_uniform \ shaders/shaders_postprocessing \ shaders/shaders_raymarching \ + shaders/shaders_palette_switch \ audio/audio_sound_loading \ audio/audio_music_stream \ audio/audio_module_playing \ diff --git a/examples/shaders/resources/shaders/glsl100/palette-switch.fs b/examples/shaders/resources/shaders/glsl100/palette-switch.fs new file mode 100644 index 000000000..65a7bd299 --- /dev/null +++ b/examples/shaders/resources/shaders/glsl100/palette-switch.fs @@ -0,0 +1,29 @@ +#version 100 + +precision mediump float; + +const int colors = 8; + +// Input vertex attributes (from vertex shader) +varying vec2 fragTexCoord; +varying vec4 fragColor; + +// Input uniform values +uniform sampler2D texture0; +uniform ivec3 palette[colors]; + +void main() +{ + // Texel color fetching from texture sampler + vec4 texelColor = texture(texture0, fragTexCoord) * fragColor; + + // Convert the (normalized) texel color RED component (GB would work, too) + // to the palette index by scaling up from [0, 1] to [0, 255]. + int index = int(texelColor.r * 255.0); + ivec3 color = palette[index]; + + // Calculate final fragment color. Note that the palette color components + // are defined in the range [0, 255] and need to be normalized to [0, 1] + // for OpenGL to work. + gl_FragColor = vec4(color / 255.0, texelColor.a); +} diff --git a/examples/shaders/resources/shaders/glsl120/palette-switch.fs b/examples/shaders/resources/shaders/glsl120/palette-switch.fs new file mode 100644 index 000000000..b4384502d --- /dev/null +++ b/examples/shaders/resources/shaders/glsl120/palette-switch.fs @@ -0,0 +1,27 @@ +#version 120 + +const int colors = 8; + +// Input fragment attributes (from fragment shader) +varying vec2 fragTexCoord; +varying vec4 fragColor; + +// Input uniform values +uniform sampler2D texture0; +uniform ivec3 palette[colors]; + +void main() +{ + // Texel color fetching from texture sampler + vec4 texelColor = texture(texture0, fragTexCoord) * fragColor; + + // Convert the (normalized) texel color RED component (GB would work, too) + // to the palette index by scaling up from [0, 1] to [0, 255]. + int index = int(texelColor.r * 255.0); + ivec3 color = palette[index]; + + // Calculate final fragment color. Note that the palette color components + // are defined in the range [0, 255] and need to be normalized to [0, 1] + // for OpenGL to work. + gl_FragColor = vec4(color / 255.0, texelColor.a); +} diff --git a/examples/shaders/resources/shaders/glsl330/palette-switch.fs b/examples/shaders/resources/shaders/glsl330/palette-switch.fs new file mode 100644 index 000000000..178c42c57 --- /dev/null +++ b/examples/shaders/resources/shaders/glsl330/palette-switch.fs @@ -0,0 +1,30 @@ +#version 330 + +const int colors = 8; + +// Input fragment attributes (from fragment shader) +in vec2 fragTexCoord; +in vec4 fragColor; + +// Input uniform values +uniform sampler2D texture0; +uniform ivec3 palette[colors]; + +// Output fragment color +out vec4 finalColor; + +void main() +{ + // Texel color fetching from texture sampler + vec4 texelColor = texture(texture0, fragTexCoord) * fragColor; + + // Convert the (normalized) texel color RED component (GB would work, too) + // to the palette index by scaling up from [0, 1] to [0, 255]. + int index = int(texelColor.r * 255.0); + ivec3 color = palette[index]; + + // Calculate final fragment color. Note that the palette color components + // are defined in the range [0, 255] and need to be normalized to [0, 1] + // for OpenGL to work. + finalColor = vec4(color / 255.0, texelColor.a); +} diff --git a/examples/shaders/shaders_palette_switch.c b/examples/shaders/shaders_palette_switch.c new file mode 100644 index 000000000..03151b66d --- /dev/null +++ b/examples/shaders/shaders_palette_switch.c @@ -0,0 +1,160 @@ +/******************************************************************************************* +* +* raylib [shaders] example - Apply a postprocessing shader to a scene +* +* 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), to test this example +* on OpenGL ES 2.0 platforms (Android, Raspberry Pi, HTML5), use #version 100 shaders +* raylib comes with shaders ready for both versions, check raylib/shaders install folder +* +* This example has been created using raylib 2.x (www.raylib.com) +* raylib is licensed under an unmodified zlib/libpng license (View raylib.h for details) +* +* Copyright (c) 2015 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 + +#define MAX_PALETTES 3 +#define COLORS_PER_PALETTE 8 +#define VALUES_PER_COLOR 3 + +static const int palettes[MAX_PALETTES][COLORS_PER_PALETTE * VALUES_PER_COLOR] = { + { + 0, 0, 0, + 255, 0, 0, + 0, 255, 0, + 0, 0, 255, + 0, 255, 255, + 255, 0, 255, + 255, 255, 0, + 255, 255, 255, + }, + { + 4, 12, 6, + 17, 35, 24, + 30, 58, 41, + 48, 93, 66, + 77, 128, 97, + 137, 162, 87, + 190, 220, 127, + 238, 255, 204, + }, + { + 21, 25, 26, + 138, 76, 88, + 217, 98, 117, + 230, 184, 193, + 69, 107, 115, + 75, 151, 166, + 165, 189, 194, + 255, 245, 247, + } +}; + +static const char *paletteText[] = { + "3-BIT RGB", + "AMMO-8 (GameBoy-like)", + "RKBV (2-strip film)" +}; + +int main() +{ + // Initialization + //-------------------------------------------------------------------------------------- + int screenWidth = 800; + int screenHeight = 450; + + InitWindow(screenWidth, screenHeight, "raylib [shaders] example - palette-switch shader"); + + // Load shader to be used on some parts drawing + // NOTE 1: Using GLSL 330 shader version, on OpenGL ES 2.0 use GLSL 100 shader version + // NOTE 2: Defining 0 (NULL) for vertex shader forces usage of internal default vertex shader + Shader shader = LoadShader(0, FormatText("resources/shaders/glsl%i/palette-switch.fs", GLSL_VERSION)); + + // Get variable (uniform) location on the shader to connect with the program + // NOTE: If uniform variable could not be found in the shader, function returns -1 + int paletteLoc = GetShaderLocation(shader, "palette"); + + // Initial index not set, will be automatically bounded below. + int currentPalette = -1; + + //-------------------------------------------------------------------------------------- + + // Main game loop + while (!WindowShouldClose()) // Detect window close button or ESC key + { + // Update + //---------------------------------------------------------------------------------- + int paletteIndex = currentPalette; + if (IsKeyPressed(KEY_RIGHT)) paletteIndex++; + else if (IsKeyPressed(KEY_LEFT)) paletteIndex--; + + if (paletteIndex >= MAX_PALETTES) paletteIndex = 0; + else if (paletteIndex < 0) paletteIndex = MAX_PALETTES - 1; + + // Send new value to the shader to be used on drawing. + // Note that we are sending RGB triplets w/o the alpha channel *only* if the current + // palette index has changed (in order to save performances). + if (currentPalette != paletteIndex) { + currentPalette = paletteIndex; + SetShaderValueArrayi(shader, paletteLoc, palettes[currentPalette], VALUES_PER_COLOR, COLORS_PER_PALETTE); + } + //---------------------------------------------------------------------------------- + + // Draw + //---------------------------------------------------------------------------------- + BeginDrawing(); + + ClearBackground(RAYWHITE); + + BeginShaderMode(shader); + + // Draw horizontal screen-wide rectangles with increasing "palette index". + // The used palette index is encoded in the RGB components of the pixel. + int linesPerRectangle = screenHeight / COLORS_PER_PALETTE; + int leftover = screenHeight % COLORS_PER_PALETTE; + int y = 0; + + for (int i = 0; i < COLORS_PER_PALETTE; ++i) { + int height = linesPerRectangle; + if (leftover > 0) { + height += 1; + leftover -= 1; + } + + DrawRectangle(0, y, screenWidth, height, CLITERAL{ i, i, i, 255 }); + + y += height; + } + + EndShaderMode(); + + DrawText("CURRENT PALETTE:", 10, 15, 20, RAYWHITE); + DrawText(paletteText[currentPalette], 240, 15, 20, RED); + DrawText("< >", 540, 10, 30, DARKBLUE); + + DrawFPS(700, 15); + + EndDrawing(); + //---------------------------------------------------------------------------------- + } + + // De-Initialization + //-------------------------------------------------------------------------------------- + UnloadShader(shader); // Unload shader + + CloseWindow(); // Close window and OpenGL context + //-------------------------------------------------------------------------------------- + + return 0; +}