From f7bebf9861734c47d0840868f243b186a59a96ba Mon Sep 17 00:00:00 2001 From: Ray Date: Sun, 9 Apr 2017 23:46:47 +0200 Subject: Working on web examples Reorganizing folders Review examples Work on makefile and loader.html --- docs/examples/src/shaders/shaders_custom_uniform.c | 121 +++++++++++++++++++++ docs/examples/src/shaders/shaders_model_shader.c | 93 ++++++++++++++++ docs/examples/src/shaders/shaders_postprocessing.c | 107 ++++++++++++++++++ .../examples/src/shaders/shaders_shapes_textures.c | 112 +++++++++++++++++++ 4 files changed, 433 insertions(+) create mode 100644 docs/examples/src/shaders/shaders_custom_uniform.c create mode 100644 docs/examples/src/shaders/shaders_model_shader.c create mode 100644 docs/examples/src/shaders/shaders_postprocessing.c create mode 100644 docs/examples/src/shaders/shaders_shapes_textures.c (limited to 'docs/examples/src/shaders') diff --git a/docs/examples/src/shaders/shaders_custom_uniform.c b/docs/examples/src/shaders/shaders_custom_uniform.c new file mode 100644 index 00000000..89f87df9 --- /dev/null +++ b/docs/examples/src/shaders/shaders_custom_uniform.c @@ -0,0 +1,121 @@ +/******************************************************************************************* +* +* raylib [shaders] example - Apply a postprocessing shader and connect a custom uniform variable +* +* 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 1.3 (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" + +int main() +{ + // Initialization + //-------------------------------------------------------------------------------------- + int screenWidth = 800; + int screenHeight = 450; + + SetConfigFlags(FLAG_MSAA_4X_HINT); // Enable Multi Sampling Anti Aliasing 4x (if available) + + InitWindow(screenWidth, screenHeight, "raylib [shaders] example - custom uniform variable"); + + // Define the camera to look into our 3d world + Camera camera = {{ 3.0f, 3.0f, 3.0f }, { 0.0f, 1.5f, 0.0f }, { 0.0f, 1.0f, 0.0f }, 45.0f }; + + Model dwarf = LoadModel("resources/model/dwarf.obj"); // Load OBJ model + Texture2D texture = LoadTexture("resources/model/dwarf_diffuse.png"); // Load model texture (diffuse map) + dwarf.material.texDiffuse = texture; // Set dwarf model diffuse texture + + Vector3 position = { 0.0f, 0.0f, 0.0f }; // Set model position + + Shader shader = LoadShader("resources/shaders/glsl330/base.vs", + "resources/shaders/glsl330/swirl.fs"); // Load postpro shader + + // 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 swirlCenterLoc = GetShaderLocation(shader, "center"); + + float swirlCenter[2] = { (float)screenWidth/2, (float)screenHeight/2 }; + + // Create a RenderTexture2D to be used for render to texture + RenderTexture2D target = LoadRenderTexture(screenWidth, screenHeight); + + // Setup orbital camera + SetCameraMode(camera, CAMERA_ORBITAL); // Set an orbital camera mode + + 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 + //---------------------------------------------------------------------------------- + Vector2 mousePosition = GetMousePosition(); + + swirlCenter[0] = mousePosition.x; + swirlCenter[1] = screenHeight - mousePosition.y; + + // Send new value to the shader to be used on drawing + SetShaderValue(shader, swirlCenterLoc, swirlCenter, 2); + + UpdateCamera(&camera); // Update camera + //---------------------------------------------------------------------------------- + + // Draw + //---------------------------------------------------------------------------------- + BeginDrawing(); + + ClearBackground(RAYWHITE); + + BeginTextureMode(target); // Enable drawing to texture + + Begin3dMode(camera); + + DrawModel(dwarf, position, 2.0f, WHITE); // Draw 3d model with texture + + DrawGrid(10, 1.0f); // Draw a grid + + End3dMode(); + + DrawText("TEXT DRAWN IN RENDER TEXTURE", 200, 10, 30, RED); + + EndTextureMode(); // End drawing to texture (now we have a texture available for next passes) + + BeginShaderMode(shader); + + // NOTE: Render texture must be y-flipped due to default OpenGL coordinates (left-bottom) + DrawTextureRec(target.texture, (Rectangle){ 0, 0, target.texture.width, -target.texture.height }, (Vector2){ 0, 0 }, WHITE); + + EndShaderMode(); + + DrawText("(c) Dwarf 3D model by David Moreno", screenWidth - 200, screenHeight - 20, 10, GRAY); + + DrawFPS(10, 10); + + EndDrawing(); + //---------------------------------------------------------------------------------- + } + + // De-Initialization + //-------------------------------------------------------------------------------------- + UnloadShader(shader); // Unload shader + UnloadTexture(texture); // Unload texture + UnloadModel(dwarf); // Unload model + UnloadRenderTexture(target); // Unload render texture + + CloseWindow(); // Close window and OpenGL context + //-------------------------------------------------------------------------------------- + + return 0; +} \ No newline at end of file diff --git a/docs/examples/src/shaders/shaders_model_shader.c b/docs/examples/src/shaders/shaders_model_shader.c new file mode 100644 index 00000000..51e9c1b3 --- /dev/null +++ b/docs/examples/src/shaders/shaders_model_shader.c @@ -0,0 +1,93 @@ +/******************************************************************************************* +* +* raylib [shaders] example - Apply a shader to a 3d model +* +* 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 1.3 (www.raylib.com) +* raylib is licensed under an unmodified zlib/libpng license (View raylib.h for details) +* +* Copyright (c) 2014 Ramon Santamaria (@raysan5) +* +********************************************************************************************/ + +#include "raylib.h" + +int main() +{ + // Initialization + //-------------------------------------------------------------------------------------- + int screenWidth = 800; + int screenHeight = 450; + + SetConfigFlags(FLAG_MSAA_4X_HINT); // Enable Multi Sampling Anti Aliasing 4x (if available) + + InitWindow(screenWidth, screenHeight, "raylib [shaders] example - model shader"); + + // Define the camera to look into our 3d world + Camera camera = {{ 3.0f, 3.0f, 3.0f }, { 0.0f, 1.5f, 0.0f }, { 0.0f, 1.0f, 0.0f }, 45.0f }; + + Model dwarf = LoadModel("resources/model/dwarf.obj"); // Load OBJ model + Texture2D texture = LoadTexture("resources/model/dwarf_diffuse.png"); // Load model texture + Shader shader = LoadShader("resources/shaders/glsl330/base.vs", + "resources/shaders/glsl330/grayscale.fs"); // Load model shader + + dwarf.material.shader = shader; // Set shader effect to 3d model + dwarf.material.texDiffuse = texture; // Bind texture to model + + Vector3 position = { 0.0f, 0.0f, 0.0f }; // Set model position + + SetCameraMode(camera, CAMERA_FREE); // Set an orbital camera mode + + 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 + //---------------------------------------------------------------------------------- + UpdateCamera(&camera); // Update camera + //---------------------------------------------------------------------------------- + + // Draw + //---------------------------------------------------------------------------------- + BeginDrawing(); + + ClearBackground(RAYWHITE); + + Begin3dMode(camera); + + DrawModel(dwarf, position, 2.0f, WHITE); // Draw 3d model with texture + + DrawGrid(10, 1.0f); // Draw a grid + + End3dMode(); + + DrawText("(c) Dwarf 3D model by David Moreno", screenWidth - 200, screenHeight - 20, 10, GRAY); + + DrawText(FormatText("Camera position: (%.2f, %.2f, %.2f)", camera.position.x, camera.position.y, camera.position.z), 600, 20, 10, BLACK); + DrawText(FormatText("Camera target: (%.2f, %.2f, %.2f)", camera.target.x, camera.target.y, camera.target.z), 600, 40, 10, GRAY); + + DrawFPS(10, 10); + + EndDrawing(); + //---------------------------------------------------------------------------------- + } + + // De-Initialization + //-------------------------------------------------------------------------------------- + UnloadShader(shader); // Unload shader + UnloadTexture(texture); // Unload texture + UnloadModel(dwarf); // Unload model + + CloseWindow(); // Close window and OpenGL context + //-------------------------------------------------------------------------------------- + + return 0; +} \ No newline at end of file diff --git a/docs/examples/src/shaders/shaders_postprocessing.c b/docs/examples/src/shaders/shaders_postprocessing.c new file mode 100644 index 00000000..43d1af72 --- /dev/null +++ b/docs/examples/src/shaders/shaders_postprocessing.c @@ -0,0 +1,107 @@ +/******************************************************************************************* +* +* 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 1.3 (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" + +int main() +{ + // Initialization + //-------------------------------------------------------------------------------------- + int screenWidth = 800; + int screenHeight = 450; + + SetConfigFlags(FLAG_MSAA_4X_HINT); // Enable Multi Sampling Anti Aliasing 4x (if available) + + InitWindow(screenWidth, screenHeight, "raylib [shaders] example - postprocessing shader"); + + // Define the camera to look into our 3d world + Camera camera = {{ 3.0f, 3.0f, 3.0f }, { 0.0f, 1.5f, 0.0f }, { 0.0f, 1.0f, 0.0f }, 45.0f }; + + Model dwarf = LoadModel("resources/model/dwarf.obj"); // Load OBJ model + Texture2D texture = LoadTexture("resources/model/dwarf_diffuse.png"); // Load model texture (diffuse map) + dwarf.material.texDiffuse = texture; // Set dwarf model diffuse texture + + Vector3 position = { 0.0f, 0.0f, 0.0f }; // Set model position + + Shader shader = LoadShader("resources/shaders/glsl330/base.vs", + "resources/shaders/glsl330/bloom.fs"); // Load postpro shader + + // Create a RenderTexture2D to be used for render to texture + RenderTexture2D target = LoadRenderTexture(screenWidth, screenHeight); + + // Setup orbital camera + SetCameraMode(camera, CAMERA_ORBITAL); // Set an orbital camera mode + + 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 + //---------------------------------------------------------------------------------- + UpdateCamera(&camera); // Update camera + //---------------------------------------------------------------------------------- + + // Draw + //---------------------------------------------------------------------------------- + BeginDrawing(); + + ClearBackground(RAYWHITE); + + BeginTextureMode(target); // Enable drawing to texture + + Begin3dMode(camera); + + DrawModel(dwarf, position, 2.0f, WHITE); // Draw 3d model with texture + + DrawGrid(10, 1.0f); // Draw a grid + + End3dMode(); + + DrawText("HELLO POSTPROCESSING!", 70, 190, 50, RED); + + EndTextureMode(); // End drawing to texture (now we have a texture available for next passes) + + BeginShaderMode(shader); + + // NOTE: Render texture must be y-flipped due to default OpenGL coordinates (left-bottom) + DrawTextureRec(target.texture, (Rectangle){ 0, 0, target.texture.width, -target.texture.height }, (Vector2){ 0, 0 }, WHITE); + + EndShaderMode(); + + DrawText("(c) Dwarf 3D model by David Moreno", screenWidth - 200, screenHeight - 20, 10, DARKGRAY); + + DrawFPS(10, 10); + + EndDrawing(); + //---------------------------------------------------------------------------------- + } + + // De-Initialization + //-------------------------------------------------------------------------------------- + UnloadShader(shader); // Unload shader + UnloadTexture(texture); // Unload texture + UnloadModel(dwarf); // Unload model + UnloadRenderTexture(target); // Unload render texture + + CloseWindow(); // Close window and OpenGL context + //-------------------------------------------------------------------------------------- + + return 0; +} \ No newline at end of file diff --git a/docs/examples/src/shaders/shaders_shapes_textures.c b/docs/examples/src/shaders/shaders_shapes_textures.c new file mode 100644 index 00000000..0a14469f --- /dev/null +++ b/docs/examples/src/shaders/shaders_shapes_textures.c @@ -0,0 +1,112 @@ +/******************************************************************************************* +* +* raylib [shaders] example - Apply a shader to some shape or 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), 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 1.3 (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" + +#include +#include + +int main() +{ + // Initialization + //-------------------------------------------------------------------------------------- + int screenWidth = 800; + int screenHeight = 450; + + InitWindow(screenWidth, screenHeight, "raylib [shaders] example - shapes and texture shaders"); + + Texture2D sonic = LoadTexture("resources/texture_formats/sonic.png"); + + // NOTE: Using GLSL 330 shader version, on OpenGL ES 2.0 use GLSL 100 shader version + Shader shader = LoadShader("resources/shaders/glsl330/base.vs", + "resources/shaders/glsl330/grayscale.fs"); + + // Shader usage is also different than models/postprocessing, shader is just activated when required + + SetTargetFPS(60); + //-------------------------------------------------------------------------------------- + + // Main game loop + while (!WindowShouldClose()) // Detect window close button or ESC key + { + // Update + //---------------------------------------------------------------------------------- + // TODO: Update your variables here + //---------------------------------------------------------------------------------- + + // Draw + //---------------------------------------------------------------------------------- + BeginDrawing(); + + ClearBackground(RAYWHITE); + + // Start drawing with default shader + + DrawText("USING DEFAULT SHADER", 20, 40, 10, RED); + + DrawCircle(80, 120, 35, DARKBLUE); + DrawCircleGradient(80, 220, 60, GREEN, SKYBLUE); + DrawCircleLines(80, 340, 80, DARKBLUE); + + + // Activate our custom shader to be applied on next shapes/textures drawings + BeginShaderMode(shader); + + DrawText("USING CUSTOM SHADER", 190, 40, 10, RED); + + DrawRectangle(250 - 60, 90, 120, 60, RED); + DrawRectangleGradient(250 - 90, 170, 180, 130, MAROON, GOLD); + DrawRectangleLines(250 - 40, 320, 80, 60, ORANGE); + + // Activate our default shader for next drawings + EndShaderMode(); + + DrawText("USING DEFAULT SHADER", 370, 40, 10, RED); + + DrawTriangle((Vector2){430, 80}, + (Vector2){430 - 60, 150}, + (Vector2){430 + 60, 150}, VIOLET); + + DrawTriangleLines((Vector2){430, 160}, + (Vector2){430 - 20, 230}, + (Vector2){430 + 20, 230}, DARKBLUE); + + DrawPoly((Vector2){430, 320}, 6, 80, 0, BROWN); + + // Activate our custom shader to be applied on next shapes/textures drawings + BeginShaderMode(shader); + + DrawTexture(sonic, 380, -10, WHITE); // Using custom shader + + // Activate our default shader for next drawings + EndShaderMode(); + + EndDrawing(); + //---------------------------------------------------------------------------------- + } + + // De-Initialization + //-------------------------------------------------------------------------------------- + UnloadShader(shader); // Unload shader + UnloadTexture(sonic); // Unload texture + + CloseWindow(); // Close window and OpenGL context + //-------------------------------------------------------------------------------------- + + return 0; +} \ No newline at end of file -- cgit v1.2.3