Merge branch 'master' of https://github.com/raysan5/raylib

* [cmake] export automatically raylib definitions and compile/link options

* [cmake] pass emscripten options to consumer project

* [web] compile for web

* [web] canvas width 100%

examples/CMakeLists.txt

@@ -97,17 +97,9 @@ if (${PLATFORM} MATCHES "Android")
     list(REMOVE_ITEM example_sources ${CMAKE_CURRENT_SOURCE_DIR}/shaders/shaders_basic_lighting.c)
 
 elseif (${PLATFORM} MATCHES "Web")
-    set(CMAKE_C_FLAGS "${CMAKE_C_FLAGS} -Os")
-    # Since WASM is used, ALLOW_MEMORY_GROWTH has no extra overheads
-    set(CMAKE_EXE_LINKER_FLAGS "${CMAKE_EXE_LINKER_FLAGS} -s WASM=1 -s ASYNCIFY -s ALLOW_MEMORY_GROWTH=1 --shell-file ${CMAKE_SOURCE_DIR}/src/shell.html")
-    set(CMAKE_EXECUTABLE_SUFFIX ".html")
-
-    list(REMOVE_ITEM example_sources ${CMAKE_CURRENT_SOURCE_DIR}/others/raylib_opengl_interop.c)
-
-    # Remove the -rdynamic flag because otherwise emscripten
-    # does not generate HTML+JS+WASM files, only a non-working
-    # and fat HTML
-    string(REPLACE "-rdynamic" "" CMAKE_SHARED_LIBRARY_LINK_C_FLAGS "${CMAKE_SHARED_LIBRARY_LINK_C_FLAGS}")
+    set(example_sources) # clear example_sources
+    list(APPEND example_sources others/web_basic_window.c)
+    list(APPEND example_sources core/core_input_gestures_testbed.c)
 
 elseif ("${PLATFORM}" STREQUAL "DRM")
     list(REMOVE_ITEM example_sources ${CMAKE_CURRENT_SOURCE_DIR}/others/rlgl_standalone.c)
@@ -165,10 +157,34 @@ foreach (example_source ${example_sources})
     string(REGEX MATCH ".*/.*/" resources_dir ${example_source})
     string(APPEND resources_dir "resources")
 
-    if (${PLATFORM} MATCHES "Web" AND EXISTS ${resources_dir})
-        # The local resources path needs to be mapped to /resources virtual path
-        string(APPEND resources_dir "@resources")
-        set_target_properties(${example_name} PROPERTIES LINK_FLAGS "--preload-file ${resources_dir}")
+    if (${PLATFORM} MATCHES "Web")
+        target_compile_options(${example_name} PRIVATE -Os)
+        target_link_options(${example_name} PRIVATE
+            -sALLOW_MEMORY_GROWTH=1
+            -sEXPORTED_RUNTIME_METHODS=[requestFullscreen]
+            -sUSE_GLFW=3
+            --shell-file "${CMAKE_SOURCE_DIR}/src/shell.html"
+        )
+        set_target_properties(${example_name} PROPERTIES SUFFIX ".html")
+
+        if (EXISTS ${resources_dir})
+            # The local resources path needs to be mapped to /resources virtual path
+            string(APPEND resources_dir "@resources")
+            set_target_properties(${example_name} PROPERTIES LINK_FLAGS "--preload-file ${resources_dir}")
+        endif ()
+
+        if(${GRAPHICS} MATCHES "GRAPHICS_API_OPENGL_ES3")
+            target_link_options(${example_name} PUBLIC "-sMIN_WEBGL_VERSION=2")
+            target_link_options(${example_name} PUBLIC "-sMAX_WEBGL_VERSION=2")
+        endif()
+
+        # Checks if OSX and links appropriate frameworks (Only required on MacOS)
+        if (APPLE)
+            target_link_libraries(${example_name} "-framework IOKit")
+            target_link_libraries(${example_name} "-framework Cocoa")
+            target_link_libraries(${example_name} "-framework OpenGL")
+        endif()
+
     endif ()
 endforeach ()
 

examples/Makefile

@@ -611,7 +611,7 @@ MODELS = \
     models/models_cubicmap_rendering \
     models/models_first_person_maze \
     models/models_geometric_shapes \
-    models/models_gpu_skinning \
+    models/models_animation_gpu_skinning \
     models/models_heightmap_rendering \
     models/models_loading \
     models/models_loading_gltf \

examples/Makefile.Web

@@ -611,7 +611,7 @@ MODELS = \
     models/models_cubicmap_rendering \
     models/models_first_person_maze \
     models/models_geometric_shapes \
-    models/models_gpu_skinning \
+    models/models_animation_gpu_skinning \
     models/models_heightmap_rendering \
     models/models_loading \
     models/models_loading_gltf \
@@ -1063,7 +1063,7 @@ models/models_first_person_maze: models/models_first_person_maze.c
 models/models_geometric_shapes: models/models_geometric_shapes.c
 	$(CC) -o $@$(EXT) $< $(CFLAGS) $(INCLUDE_PATHS) $(LDFLAGS) $(LDLIBS) -D$(PLATFORM)
 
-models/models_gpu_skinning: models/models_gpu_skinning.c
+models/models_animation_gpu_skinning: models/models_animation_gpu_skinning.c
 	$(CC) -o $@$(EXT) $< $(CFLAGS) $(INCLUDE_PATHS) $(LDFLAGS) $(LDLIBS) -D$(PLATFORM) \
     --preload-file models/resources/models/gltf/greenman.glb@resources/models/gltf/greenman.glb \
     --preload-file models/resources/shaders/glsl100/skinning.vs@resources/shaders/glsl100/skinning.vs \

examples/README.md

@@ -170,7 +170,7 @@ Examples using raylib models functionality, including models loading/generation
 | [models_heightmap_rendering](models/models_heightmap_rendering.c) | <img src="models/models_heightmap_rendering.png" alt="models_heightmap_rendering" width="80"> | ⭐☆☆☆ | 1.8 | 3.5 | [Ramon Santamaria](https://github.com/raysan5) |
 | [models_skybox_rendering](models/models_skybox_rendering.c) | <img src="models/models_skybox_rendering.png" alt="models_skybox_rendering" width="80"> | ⭐⭐☆☆ | 1.8 | 4.0 | [Ramon Santamaria](https://github.com/raysan5) |
 | [models_textured_cube](models/models_textured_cube.c) | <img src="models/models_textured_cube.png" alt="models_textured_cube" width="80"> | ⭐⭐☆☆ | 4.5 | 4.5 | [Ramon Santamaria](https://github.com/raysan5) |
-| [models_gpu_skinning](models/models_gpu_skinning.c) | <img src="models/models_gpu_skinning.png" alt="models_gpu_skinning" width="80"> | ⭐⭐⭐☆ | 4.5 | 4.5 | [Daniel Holden](https://github.com/orangeduck) |
+| [models_animation_gpu_skinning](models/models_animation_gpu_skinning.c) | <img src="models/models_animation_gpu_skinning.png" alt="models_animation_gpu_skinning" width="80"> | ⭐⭐⭐☆ | 4.5 | 4.5 | [Daniel Holden](https://github.com/orangeduck) |
 | [models_bone_socket](models/models_bone_socket.c) | <img src="models/models_bone_socket.png" alt="models_bone_socket" width="80"> | ⭐⭐⭐⭐️ | 4.5 | 4.5 | [iP](https://github.com/ipzaur) |
 | [models_tesseract_view](models/models_tesseract_view.c) | <img src="models/models_tesseract_view.png" alt="models_tesseract_view" width="80"> | ⭐⭐☆☆ | 5.6-dev | 5.6-dev | [Timothy van der Valk](https://github.com/arceryz) |
 

examples/core/core_input_gestures_testbed.c

@@ -19,56 +19,14 @@
 
 #include <math.h>       // Required for the protractor angle graphic drawing
 
-#if defined(PLATFORM_WEB)
-    #include <emscripten/emscripten.h> // Required for the Web/HTML5
-#endif
-
 #define GESTURE_LOG_SIZE    20
 #define MAX_TOUCH_COUNT     32
 
-//--------------------------------------------------------------------------------------
-// Global Variables Definition
-//--------------------------------------------------------------------------------------
-static int screenWidth = 800;              // Update depending on web canvas
-static const int screenHeight = 450;
-static Vector2 messagePosition = { 160, 7 };
-
-// Last gesture variables definitions
-static int lastGesture = 0;
-static Vector2 lastGesturePosition = { 165, 130 };
-
-// Gesture log variables definitions
-// NOTE: The gesture log uses an array (as an inverted circular queue) to store the performed gestures
-static char gestureLog[GESTURE_LOG_SIZE][12] = { "" };
-// NOTE: The index for the inverted circular queue (moving from last to first direction, then looping around)
-static int gestureLogIndex = GESTURE_LOG_SIZE;
-static int previousGesture = 0;
-
-// Log mode values: 
-// - 0 shows repeated events
-// - 1 hides repeated events
-// - 2 shows repeated events but hide hold events
-// - 3 hides repeated events and hide hold events
-static int logMode = 1; 
-
-static Color gestureColor = { 0, 0, 0, 255 };
-static Rectangle logButton1 = { 53, 7, 48, 26 };
-static Rectangle logButton2 = { 108, 7, 36, 26 };
-static Vector2 gestureLogPosition = { 10, 10 };
-
-// Protractor variables definitions
-static float angleLength = 90.0f;
-static float currentAngleDegrees = 0.0f;
-static Vector2 finalVector = { 0.0f, 0.0f };
-static char currentAngleStr[7] = "";
-static Vector2 protractorPosition = { 266.0f, 315.0f };
-
 //----------------------------------------------------------------------------------
 // Module Functions Declaration
 //----------------------------------------------------------------------------------
-static void UpdateDrawFrame(void);     // Update and Draw one frame
-static char const *GetGestureName(int i);
-static Color GetGestureColor(int i);
+static char const *GetGestureName(int gesture); // Get text string for gesture value
+static Color GetGestureColor(int gesture); // Get color for gesture value
 
 //------------------------------------------------------------------------------------
 // Program main entry point
@@ -77,20 +35,234 @@ int main(void)
 {
     // Initialization
     //--------------------------------------------------------------------------------------
-    InitWindow(screenWidth, screenHeight, "raylib [core] example - input gestures testbed");
+    const int screenWidth = 800;
+    const int screenHeight = 450;
+
+    InitWindow(screenWidth, screenHeight, "raylib [core] example - input gestures testbed");
+    
+    Vector2 messagePosition = { 160, 7 };
+
+    // Last gesture variables definitions
+    int lastGesture = 0;
+    Vector2 lastGesturePosition = { 165, 130 };
+
+    // Gesture log variables definitions
+    // NOTE: The gesture log uses an array (as an inverted circular queue) to store the performed gestures
+    char gestureLog[GESTURE_LOG_SIZE][12] = { "" };
+    // NOTE: The index for the inverted circular queue (moving from last to first direction, then looping around)
+    int gestureLogIndex = GESTURE_LOG_SIZE;
+    int previousGesture = 0;
+
+    // Log mode values: 
+    // - 0 shows repeated events
+    // - 1 hides repeated events
+    // - 2 shows repeated events but hide hold events
+    // - 3 hides repeated events and hide hold events
+    int logMode = 1; 
+
+    Color gestureColor = { 0, 0, 0, 255 };
+    Rectangle logButton1 = { 53, 7, 48, 26 };
+    Rectangle logButton2 = { 108, 7, 36, 26 };
+    Vector2 gestureLogPosition = { 10, 10 };
+
+    // Protractor variables definitions
+    float angleLength = 90.0f;
+    float currentAngleDegrees = 0.0f;
+    Vector2 finalVector = { 0.0f, 0.0f };
+    char currentAngleStr[7] = "";
+    Vector2 protractorPosition = { 266.0f, 315.0f };
 
-#if defined(PLATFORM_WEB)
-    emscripten_set_main_loop(UpdateDrawFrame, 0, 1);
-#else
     SetTargetFPS(60);   // Set our game to run at 60 frames-per-second
     //--------------------------------------------------------------------------------------
 
     // Main game loop
     while (!WindowShouldClose())    // Detect window close button or ESC key
     {
-        UpdateDrawFrame();
+        // Update
+        //--------------------------------------------------------------------------------------
+        // Handle common gestures data
+        int i, ii; // Iterators that will be reused by all for loops
+        const int currentGesture = GetGestureDetected();
+        const float currentDragDegrees = GetGestureDragAngle();
+        const float currentPitchDegrees = GetGesturePinchAngle();
+        const int touchCount = GetTouchPointCount();
+
+        // Handle last gesture
+        if ((currentGesture != 0) && (currentGesture != 4) && (currentGesture != previousGesture)) 
+            lastGesture = currentGesture; // Filter the meaningful gestures (1, 2, 8 to 512) for the display
+
+        // Handle gesture log
+        if (IsMouseButtonReleased(MOUSE_BUTTON_LEFT))
+        {
+            if (CheckCollisionPointRec(GetMousePosition(), logButton1))
+            {
+                switch (logMode)
+                {
+                    case 3: logMode = 2; break;
+                    case 2: logMode = 3; break;
+                    case 1: logMode = 0; break;
+                    default: logMode = 1; break;
+                }
+            }
+            else if (CheckCollisionPointRec(GetMousePosition(), logButton2))
+            {
+                switch (logMode)
+                {
+                    case 3: logMode = 1; break;
+                    case 2: logMode = 0; break;
+                    case 1: logMode = 3; break;
+                    default: logMode = 2; break;
+                }
+            }
+        }
+
+        int fillLog = 0; // Gate variable to be used to allow or not the gesture log to be filled
+        if (currentGesture !=0)
+        {
+            if (logMode == 3) // 3 hides repeated events and hide hold events
+            {
+                if (((currentGesture != 4) && (currentGesture != previousGesture)) || (currentGesture < 3)) fillLog = 1;
+            }
+            else if (logMode == 2) // 2 shows repeated events but hide hold events
+            {
+                if (currentGesture != 4) fillLog = 1;
+            }
+            else if (logMode == 1) // 1 hides repeated events
+            {
+                if (currentGesture != previousGesture) fillLog = 1;
+            }
+            else  // 0 shows repeated events
+            {
+                fillLog = 1;
+            }
+        }
+
+        if (fillLog) // If one of the conditions from logMode was met, fill the gesture log
+        {
+            previousGesture = currentGesture;
+            gestureColor = GetGestureColor(currentGesture);
+            if (gestureLogIndex <= 0) gestureLogIndex = GESTURE_LOG_SIZE;
+            gestureLogIndex--;
+
+            // Copy the gesture respective name to the gesture log array
+            TextCopy(gestureLog[gestureLogIndex], GetGestureName(currentGesture));
+        }
+
+        // Handle protractor
+        if (currentGesture > 255) currentAngleDegrees = currentPitchDegrees; // Pinch In and Pinch Out
+        else if (currentGesture > 15) currentAngleDegrees = currentDragDegrees; // Swipe Right, Swipe Left, Swipe Up and Swipe Down
+        else if (currentGesture > 0) currentAngleDegrees = 0.0f; // Tap, Doubletap, Hold and Grab
+
+        float currentAngleRadians = ((currentAngleDegrees + 90.0f)*PI/180); // Convert the current angle to Radians
+        // Calculate the final vector for display
+        finalVector = (Vector2){ (angleLength*sinf(currentAngleRadians)) + protractorPosition.x, 
+            (angleLength*cosf(currentAngleRadians)) + protractorPosition.y };
+
+        // Handle touch and mouse pointer points
+        Vector2 touchPosition[MAX_TOUCH_COUNT] = { 0 };
+        Vector2 mousePosition = { 0 };
+        if (currentGesture != GESTURE_NONE)
+        {
+            if (touchCount != 0)
+            {
+                for (i = 0; i < touchCount; i++) touchPosition[i] = GetTouchPosition(i); // Fill the touch positions
+            }
+            else mousePosition = GetMousePosition();
+        }
+        //--------------------------------------------------------------------------------------
+
+        // Draw
+        //--------------------------------------------------------------------------------------
+        BeginDrawing();
+            ClearBackground(RAYWHITE);
+
+            // Draw common elements
+            DrawText("*", messagePosition.x + 5, messagePosition.y + 5, 10, BLACK);
+            DrawText("Example optimized for Web/HTML5\non Smartphones with Touch Screen.", messagePosition.x + 15, messagePosition.y + 5, 10, BLACK);
+            DrawText("*", messagePosition.x + 5, messagePosition.y + 35, 10, BLACK);
+            DrawText("While running on Desktop Web Browsers,\ninspect and turn on Touch Emulation.", messagePosition.x + 15,  messagePosition.y + 35, 10, BLACK);
+
+            // Draw last gesture
+            DrawText("Last gesture", lastGesturePosition.x + 33, lastGesturePosition.y - 47, 20, BLACK);
+            DrawText("Swipe         Tap       Pinch  Touch", lastGesturePosition.x + 17, lastGesturePosition.y - 18, 10, BLACK);
+            DrawRectangle(lastGesturePosition.x + 20, lastGesturePosition.y, 20, 20, lastGesture == GESTURE_SWIPE_UP ? RED : LIGHTGRAY);
+            DrawRectangle(lastGesturePosition.x, lastGesturePosition.y + 20, 20, 20, lastGesture == GESTURE_SWIPE_LEFT ? RED : LIGHTGRAY);
+            DrawRectangle(lastGesturePosition.x + 40, lastGesturePosition.y + 20, 20, 20, lastGesture == GESTURE_SWIPE_RIGHT ? RED : LIGHTGRAY);
+            DrawRectangle(lastGesturePosition.x + 20, lastGesturePosition.y + 40, 20, 20, lastGesture == GESTURE_SWIPE_DOWN ? RED : LIGHTGRAY);
+            DrawCircle(lastGesturePosition.x + 80, lastGesturePosition.y + 16, 10, lastGesture == GESTURE_TAP ? BLUE : LIGHTGRAY);
+            DrawRing( (Vector2){lastGesturePosition.x + 103, lastGesturePosition.y + 16}, 6.0f, 11.0f, 0.0f, 360.0f, 0, lastGesture == GESTURE_DRAG ? LIME : LIGHTGRAY);
+            DrawCircle(lastGesturePosition.x + 80, lastGesturePosition.y + 43, 10, lastGesture == GESTURE_DOUBLETAP ? SKYBLUE : LIGHTGRAY);
+            DrawCircle(lastGesturePosition.x + 103, lastGesturePosition.y + 43, 10, lastGesture == GESTURE_DOUBLETAP ? SKYBLUE : LIGHTGRAY);
+            DrawTriangle((Vector2){ lastGesturePosition.x + 122, lastGesturePosition.y + 16 }, (Vector2){ lastGesturePosition.x + 137, lastGesturePosition.y + 26 }, (Vector2){ lastGesturePosition.x + 137, lastGesturePosition.y + 6 }, lastGesture == GESTURE_PINCH_OUT? ORANGE : LIGHTGRAY);
+            DrawTriangle((Vector2){ lastGesturePosition.x + 147, lastGesturePosition.y + 6 }, (Vector2){ lastGesturePosition.x + 147, lastGesturePosition.y + 26 }, (Vector2){ lastGesturePosition.x + 162, lastGesturePosition.y + 16 }, lastGesture == GESTURE_PINCH_OUT? ORANGE : LIGHTGRAY);
+            DrawTriangle((Vector2){ lastGesturePosition.x + 125, lastGesturePosition.y + 33 }, (Vector2){ lastGesturePosition.x + 125, lastGesturePosition.y + 53 }, (Vector2){ lastGesturePosition.x + 140, lastGesturePosition.y + 43 }, lastGesture == GESTURE_PINCH_IN? VIOLET : LIGHTGRAY);
+            DrawTriangle((Vector2){ lastGesturePosition.x + 144, lastGesturePosition.y + 43 }, (Vector2){ lastGesturePosition.x + 159, lastGesturePosition.y + 53 }, (Vector2){ lastGesturePosition.x + 159, lastGesturePosition.y + 33 }, lastGesture == GESTURE_PINCH_IN? VIOLET : LIGHTGRAY);
+            for (i = 0; i < 4; i++) DrawCircle(lastGesturePosition.x + 180, lastGesturePosition.y + 7 + i*15, 5, touchCount <= i? LIGHTGRAY : gestureColor);
+
+            // Draw gesture log
+            DrawText("Log", gestureLogPosition.x, gestureLogPosition.y, 20, BLACK);
+
+            // Loop in both directions to print the gesture log array in the inverted order (and looping around if the index started somewhere in the middle)
+            for (i = 0, ii = gestureLogIndex; i < GESTURE_LOG_SIZE; i++, ii = (ii + 1) % GESTURE_LOG_SIZE) DrawText(gestureLog[ii], gestureLogPosition.x, gestureLogPosition.y + 410 - i*20, 20, (i == 0 ? gestureColor : LIGHTGRAY));
+            Color logButton1Color, logButton2Color;
+            switch (logMode)
+            {
+                case 3:  logButton1Color=MAROON; logButton2Color=MAROON; break;
+                case 2:  logButton1Color=GRAY;   logButton2Color=MAROON; break;
+                case 1:  logButton1Color=MAROON; logButton2Color=GRAY;   break;
+                default: logButton1Color=GRAY;   logButton2Color=GRAY;   break;
+            }
+            DrawRectangleRec(logButton1, logButton1Color);
+            DrawText("Hide", logButton1.x + 7, logButton1.y + 3, 10, WHITE);
+            DrawText("Repeat", logButton1.x + 7, logButton1.y + 13, 10, WHITE);
+            DrawRectangleRec(logButton2, logButton2Color);
+            DrawText("Hide", logButton1.x + 62, logButton1.y + 3, 10, WHITE);
+            DrawText("Hold", logButton1.x + 62, logButton1.y + 13, 10, WHITE);
+
+            // Draw protractor
+            DrawText("Angle", protractorPosition.x + 55, protractorPosition.y + 76, 10, BLACK);
+            const char *angleString = TextFormat("%f", currentAngleDegrees);
+            const int angleStringDot = TextFindIndex(angleString, ".");
+            const char *angleStringTrim = TextSubtext(angleString, 0, angleStringDot + 3);
+            DrawText( angleStringTrim, protractorPosition.x + 55, protractorPosition.y + 92, 20, gestureColor);
+            DrawCircle(protractorPosition.x, protractorPosition.y, 80.0f, WHITE);
+            DrawLineEx((Vector2){ protractorPosition.x - 90, protractorPosition.y }, (Vector2){ protractorPosition.x + 90, protractorPosition.y }, 3.0f, LIGHTGRAY);
+            DrawLineEx((Vector2){ protractorPosition.x, protractorPosition.y - 90 }, (Vector2){ protractorPosition.x, protractorPosition.y + 90 }, 3.0f, LIGHTGRAY);
+            DrawLineEx((Vector2){ protractorPosition.x - 80, protractorPosition.y - 45 }, (Vector2){ protractorPosition.x + 80, protractorPosition.y + 45 }, 3.0f, GREEN);
+            DrawLineEx((Vector2){ protractorPosition.x - 80, protractorPosition.y + 45 }, (Vector2){ protractorPosition.x + 80, protractorPosition.y - 45 }, 3.0f, GREEN);
+            DrawText("0", protractorPosition.x + 96, protractorPosition.y - 9, 20, BLACK);
+            DrawText("30", protractorPosition.x + 74, protractorPosition.y - 68, 20, BLACK);
+            DrawText("90", protractorPosition.x - 11, protractorPosition.y - 110, 20, BLACK);
+            DrawText("150", protractorPosition.x - 100, protractorPosition.y - 68, 20, BLACK);
+            DrawText("180", protractorPosition.x - 124, protractorPosition.y - 9, 20, BLACK);
+            DrawText("210", protractorPosition.x - 100, protractorPosition.y + 50, 20, BLACK);
+            DrawText("270", protractorPosition.x - 18, protractorPosition.y + 92, 20, BLACK);
+            DrawText("330", protractorPosition.x + 72, protractorPosition.y + 50, 20, BLACK);
+            if (currentAngleDegrees != 0.0f) DrawLineEx(protractorPosition, finalVector, 3.0f, gestureColor);
+
+            // Draw touch and mouse pointer points
+            if (currentGesture != GESTURE_NONE)
+            {
+                if ( touchCount != 0 )
+                {
+                    for (i = 0; i < touchCount; i++)
+                    {
+                        DrawCircleV(touchPosition[i], 50.0f, Fade(gestureColor, 0.5f));
+                        DrawCircleV(touchPosition[i], 5.0f, gestureColor);
+                    }
+
+                    if (touchCount == 2) DrawLineEx(touchPosition[0], touchPosition[1], ((currentGesture == 512)? 8 : 12), gestureColor);
+                }
+                else
+                {
+                    DrawCircleV(mousePosition, 35.0f, Fade(gestureColor, 0.5f));
+                    DrawCircleV(mousePosition, 5.0f, gestureColor);
+                }
+            }
+
+        EndDrawing();
+        //--------------------------------------------------------------------------------------
     }
-#endif
 
     // De-Initialization
     //--------------------------------------------------------------------------------------
@@ -103,235 +275,42 @@ int main(void)
 //----------------------------------------------------------------------------------
 // Module Functions Definition
 //----------------------------------------------------------------------------------
-static void UpdateDrawFrame(void)
+// Get text string for gesture value
+static char const *GetGestureName(int gesture)
 {
-    // Update
-    //--------------------------------------------------------------------------------------
-    // Handle common gestures data
-    int i, ii; // Iterators that will be reused by all for loops
-    const int currentGesture = GetGestureDetected();
-    const float currentDragDegrees = GetGestureDragAngle();
-    const float currentPitchDegrees = GetGesturePinchAngle();
-    const int touchCount = GetTouchPointCount();
-
-    // Handle last gesture
-    if ((currentGesture != 0) && (currentGesture != 4) && (currentGesture != previousGesture)) 
-        lastGesture = currentGesture; // Filter the meaningful gestures (1, 2, 8 to 512) for the display
-
-    // Handle gesture log
-    if (IsMouseButtonReleased(MOUSE_BUTTON_LEFT))
+    switch (gesture)
     {
-        if (CheckCollisionPointRec(GetMousePosition(), logButton1))
-        {
-            switch (logMode)
-            {
-                case 3:  logMode=2; break;
-                case 2:  logMode=3; break;
-                case 1:  logMode=0; break;
-                default: logMode=1; break;
-            }
-        }
-        else if (CheckCollisionPointRec(GetMousePosition(), logButton2))
-        {
-            switch (logMode)
-            {
-                case 3:  logMode=1; break;
-                case 2:  logMode=0; break;
-                case 1:  logMode=3; break;
-                default: logMode=2; break;
-            }
-        }
-    }
-
-    int fillLog = 0; // Gate variable to be used to allow or not the gesture log to be filled
-    if (currentGesture !=0)
-    {
-        if (logMode == 3) // 3 hides repeated events and hide hold events
-        {
-            if (((currentGesture != 4) && (currentGesture != previousGesture)) || (currentGesture < 3)) fillLog = 1;
-        }
-        else if (logMode == 2) // 2 shows repeated events but hide hold events
-        {
-            if (currentGesture != 4) fillLog = 1;
-        }
-        else if (logMode == 1) // 1 hides repeated events
-        {
-            if (currentGesture != previousGesture) fillLog = 1;
-        }
-        else  // 0 shows repeated events
-        {
-            fillLog = 1;
-        }
-    }
-
-    if (fillLog) // If one of the conditions from logMode was met, fill the gesture log
-    {
-        previousGesture = currentGesture;
-        gestureColor = GetGestureColor(currentGesture);
-        if (gestureLogIndex <= 0) gestureLogIndex = GESTURE_LOG_SIZE;
-        gestureLogIndex--;
-
-        // Copy the gesture respective name to the gesture log array
-        TextCopy(gestureLog[gestureLogIndex], GetGestureName(currentGesture));
-    }
-
-    // Handle protractor
-    if (currentGesture > 255) // aka Pinch In and Pinch Out
-    {
-        currentAngleDegrees = currentPitchDegrees;
-    }
-    else if (currentGesture > 15) // aka Swipe Right, Swipe Left, Swipe Up and Swipe Down
-    {
-        currentAngleDegrees = currentDragDegrees;
-    }
-    else if (currentGesture > 0) // aka Tap, Doubletap, Hold and Grab
-    {
-        currentAngleDegrees = 0.0f;
-    }
-
-    float currentAngleRadians = ((currentAngleDegrees +90.0f)*PI/180); // Convert the current angle to Radians
-    finalVector = (Vector2){ (angleLength*sinf(currentAngleRadians)) + protractorPosition.x, (angleLength*cosf(currentAngleRadians)) + protractorPosition.y }; // Calculate the final vector for display
-
-    // Handle touch and mouse pointer points
-    Vector2 touchPosition[MAX_TOUCH_COUNT] = { 0 };
-    Vector2 mousePosition = {0, 0};
-    if (currentGesture != GESTURE_NONE)
-    {
-        if (touchCount != 0)
-        {
-            for (i = 0; i < touchCount; i++) touchPosition[i] = GetTouchPosition(i); // Fill the touch positions
-        }
-        else mousePosition = GetMousePosition();
-    }
-    //--------------------------------------------------------------------------------------
-
-    // Draw
-    //--------------------------------------------------------------------------------------
-    BeginDrawing();
-        ClearBackground(RAYWHITE);
-
-        // Draw common elements
-        DrawText("*", messagePosition.x + 5, messagePosition.y + 5, 10, BLACK);
-        DrawText("Example optimized for Web/HTML5\non Smartphones with Touch Screen.", messagePosition.x + 15, messagePosition.y + 5, 10, BLACK);
-        DrawText("*", messagePosition.x + 5, messagePosition.y + 35, 10, BLACK);
-        DrawText("While running on Desktop Web Browsers,\ninspect and turn on Touch Emulation.", messagePosition.x + 15,  messagePosition.y + 35, 10, BLACK);
-
-        // Draw last gesture
-        DrawText("Last gesture", lastGesturePosition.x + 33, lastGesturePosition.y - 47, 20, BLACK);
-        DrawText("Swipe         Tap       Pinch  Touch", lastGesturePosition.x + 17, lastGesturePosition.y - 18, 10, BLACK);
-        DrawRectangle(lastGesturePosition.x + 20, lastGesturePosition.y, 20, 20, lastGesture == GESTURE_SWIPE_UP ? RED : LIGHTGRAY);
-        DrawRectangle(lastGesturePosition.x, lastGesturePosition.y + 20, 20, 20, lastGesture == GESTURE_SWIPE_LEFT ? RED : LIGHTGRAY);
-        DrawRectangle(lastGesturePosition.x + 40, lastGesturePosition.y + 20, 20, 20, lastGesture == GESTURE_SWIPE_RIGHT ? RED : LIGHTGRAY);
-        DrawRectangle(lastGesturePosition.x + 20, lastGesturePosition.y + 40, 20, 20, lastGesture == GESTURE_SWIPE_DOWN ? RED : LIGHTGRAY);
-        DrawCircle(lastGesturePosition.x + 80, lastGesturePosition.y + 16, 10, lastGesture == GESTURE_TAP ? BLUE : LIGHTGRAY);
-        DrawRing( (Vector2){lastGesturePosition.x + 103, lastGesturePosition.y + 16}, 6.0f, 11.0f, 0.0f, 360.0f, 0, lastGesture == GESTURE_DRAG ? LIME : LIGHTGRAY);
-        DrawCircle(lastGesturePosition.x + 80, lastGesturePosition.y + 43, 10, lastGesture == GESTURE_DOUBLETAP ? SKYBLUE : LIGHTGRAY);
-        DrawCircle(lastGesturePosition.x + 103, lastGesturePosition.y + 43, 10, lastGesture == GESTURE_DOUBLETAP ? SKYBLUE : LIGHTGRAY);
-        DrawTriangle((Vector2){ lastGesturePosition.x + 122, lastGesturePosition.y + 16 }, (Vector2){ lastGesturePosition.x + 137, lastGesturePosition.y + 26 }, (Vector2){ lastGesturePosition.x + 137, lastGesturePosition.y + 6 }, lastGesture == GESTURE_PINCH_OUT? ORANGE : LIGHTGRAY);
-        DrawTriangle((Vector2){ lastGesturePosition.x + 147, lastGesturePosition.y + 6 }, (Vector2){ lastGesturePosition.x + 147, lastGesturePosition.y + 26 }, (Vector2){ lastGesturePosition.x + 162, lastGesturePosition.y + 16 }, lastGesture == GESTURE_PINCH_OUT? ORANGE : LIGHTGRAY);
-        DrawTriangle((Vector2){ lastGesturePosition.x + 125, lastGesturePosition.y + 33 }, (Vector2){ lastGesturePosition.x + 125, lastGesturePosition.y + 53 }, (Vector2){ lastGesturePosition.x + 140, lastGesturePosition.y + 43 }, lastGesture == GESTURE_PINCH_IN? VIOLET : LIGHTGRAY);
-        DrawTriangle((Vector2){ lastGesturePosition.x + 144, lastGesturePosition.y + 43 }, (Vector2){ lastGesturePosition.x + 159, lastGesturePosition.y + 53 }, (Vector2){ lastGesturePosition.x + 159, lastGesturePosition.y + 33 }, lastGesture == GESTURE_PINCH_IN? VIOLET : LIGHTGRAY);
-        for (i = 0; i < 4; i++) DrawCircle(lastGesturePosition.x + 180, lastGesturePosition.y + 7 + i*15, 5, touchCount <= i? LIGHTGRAY : gestureColor);
-
-        // Draw gesture log
-        DrawText("Log", gestureLogPosition.x, gestureLogPosition.y, 20, BLACK);
-
-        // Loop in both directions to print the gesture log array in the inverted order (and looping around if the index started somewhere in the middle)
-        for (i = 0, ii = gestureLogIndex; i < GESTURE_LOG_SIZE; i++, ii = (ii + 1) % GESTURE_LOG_SIZE) DrawText(gestureLog[ii], gestureLogPosition.x, gestureLogPosition.y + 410 - i*20, 20, (i == 0 ? gestureColor : LIGHTGRAY));
-        Color logButton1Color, logButton2Color;
-        switch (logMode)
-        {
-            case 3:  logButton1Color=MAROON; logButton2Color=MAROON; break;
-            case 2:  logButton1Color=GRAY;   logButton2Color=MAROON; break;
-            case 1:  logButton1Color=MAROON; logButton2Color=GRAY;   break;
-            default: logButton1Color=GRAY;   logButton2Color=GRAY;   break;
-        }
-        DrawRectangleRec(logButton1, logButton1Color);
-        DrawText("Hide", logButton1.x + 7, logButton1.y + 3, 10, WHITE);
-        DrawText("Repeat", logButton1.x + 7, logButton1.y + 13, 10, WHITE);
-        DrawRectangleRec(logButton2, logButton2Color);
-        DrawText("Hide", logButton1.x + 62, logButton1.y + 3, 10, WHITE);
-        DrawText("Hold", logButton1.x + 62, logButton1.y + 13, 10, WHITE);
-
-        // Draw protractor
-        DrawText("Angle", protractorPosition.x + 55, protractorPosition.y + 76, 10, BLACK);
-        const char *angleString = TextFormat("%f", currentAngleDegrees);
-        const int angleStringDot = TextFindIndex(angleString, ".");
-        const char *angleStringTrim = TextSubtext(angleString, 0, angleStringDot + 3);
-        DrawText( angleStringTrim, protractorPosition.x + 55, protractorPosition.y + 92, 20, gestureColor);
-        DrawCircle(protractorPosition.x, protractorPosition.y, 80.0f, WHITE);
-        DrawLineEx((Vector2){ protractorPosition.x - 90, protractorPosition.y }, (Vector2){ protractorPosition.x + 90, protractorPosition.y }, 3.0f, LIGHTGRAY);
-        DrawLineEx((Vector2){ protractorPosition.x, protractorPosition.y - 90 }, (Vector2){ protractorPosition.x, protractorPosition.y + 90 }, 3.0f, LIGHTGRAY);
-        DrawLineEx((Vector2){ protractorPosition.x - 80, protractorPosition.y - 45 }, (Vector2){ protractorPosition.x + 80, protractorPosition.y + 45 }, 3.0f, GREEN);
-        DrawLineEx((Vector2){ protractorPosition.x - 80, protractorPosition.y + 45 }, (Vector2){ protractorPosition.x + 80, protractorPosition.y - 45 }, 3.0f, GREEN);
-        DrawText("0", protractorPosition.x + 96, protractorPosition.y - 9, 20, BLACK);
-        DrawText("30", protractorPosition.x + 74, protractorPosition.y - 68, 20, BLACK);
-        DrawText("90", protractorPosition.x - 11, protractorPosition.y - 110, 20, BLACK);
-        DrawText("150", protractorPosition.x - 100, protractorPosition.y - 68, 20, BLACK);
-        DrawText("180", protractorPosition.x - 124, protractorPosition.y - 9, 20, BLACK);
-        DrawText("210", protractorPosition.x - 100, protractorPosition.y + 50, 20, BLACK);
-        DrawText("270", protractorPosition.x - 18, protractorPosition.y + 92, 20, BLACK);
-        DrawText("330", protractorPosition.x + 72, protractorPosition.y + 50, 20, BLACK);
-        if (currentAngleDegrees != 0.0f) DrawLineEx(protractorPosition, finalVector, 3.0f, gestureColor);
-
-        // Draw touch and mouse pointer points
-        if (currentGesture != GESTURE_NONE)
-        {
-            if ( touchCount != 0 )
-            {
-                for (i = 0; i < touchCount; i++)
-                {
-                    DrawCircleV(touchPosition[i], 50.0f, Fade(gestureColor, 0.5f));
-                    DrawCircleV(touchPosition[i], 5.0f, gestureColor);
-                }
-
-                if (touchCount == 2) DrawLineEx(touchPosition[0], touchPosition[1], ((currentGesture == 512)? 8 : 12), gestureColor);
-            }
-            else
-            {
-                DrawCircleV(mousePosition, 35.0f, Fade(gestureColor, 0.5f));
-                DrawCircleV(mousePosition, 5.0f, gestureColor);
-            }
-        }
-
-    EndDrawing();
-    //--------------------------------------------------------------------------------------
-}
-
-static char const *GetGestureName(int i)
-{
-    switch (i)
-    {
-        case 0:   return "None";        break;
-        case 1:   return "Tap";         break;
-        case 2:   return "Double Tap";  break;
-        case 4:   return "Hold";        break;
-        case 8:   return "Drag";        break;
-        case 16:  return "Swipe Right"; break;
-        case 32:  return "Swipe Left";  break;
-        case 64:  return "Swipe Up";    break;
-        case 128: return "Swipe Down";  break;
-        case 256: return "Pinch In";    break;
-        case 512: return "Pinch Out";   break;
-        default:  return "Unknown";     break;
+        case 0: return "None"; break;
+        case 1: return "Tap"; break;
+        case 2: return "Double Tap"; break;
+        case 4: return "Hold"; break;
+        case 8: return "Drag"; break;
+        case 16: return "Swipe Right"; break;
+        case 32: return "Swipe Left"; break;
+        case 64: return "Swipe Up"; break;
+        case 128: return "Swipe Down"; break;
+        case 256: return "Pinch In"; break;
+        case 512: return "Pinch Out"; break;
+        default:  return "Unknown"; break;
     }
 }
 
-static Color GetGestureColor(int i)
+// Get color for gesture value
+static Color GetGestureColor(int gesture)
 {
-    switch (i)
+    switch (gesture)
     {
-        case 0:   return BLACK;   break;
-        case 1:   return BLUE;    break;
-        case 2:   return SKYBLUE; break;
-        case 4:   return BLACK;   break;
-        case 8:   return LIME;    break;
-        case 16:  return RED;     break;
-        case 32:  return RED;     break;
-        case 64:  return RED;     break;
-        case 128: return RED;     break;
-        case 256: return VIOLET;  break;
-        case 512: return ORANGE;  break;
-        default:  return BLACK;   break;
+        case 0: return BLACK; break;
+        case 1: return BLUE; break;
+        case 2: return SKYBLUE; break;
+        case 4: return BLACK; break;
+        case 8: return LIME; break;
+        case 16: return RED; break;
+        case 32: return RED; break;
+        case 64: return RED; break;
+        case 128: return RED; break;
+        case 256: return VIOLET; break;
+        case 512: return ORANGE; break;
+        default: return BLACK; break;
     }
 }

examples/examples_list.txt

@@ -124,7 +124,7 @@ models;models_waving_cubes;★★★☆;2.5;3.7;2019;2025;"Codecat";@codecat
 models;models_heightmap_rendering;★☆☆☆;1.8;3.5;2015;2025;"Ramon Santamaria";@raysan5
 models;models_skybox_rendering;★★☆☆;1.8;4.0;2017;2025;"Ramon Santamaria";@raysan5
 models;models_textured_cube;★★☆☆;4.5;4.5;2022;2025;"Ramon Santamaria";@raysan5
-models;models_gpu_skinning;★★★☆;4.5;4.5;2024;2025;"Daniel Holden";@orangeduck
+models;models_animation_gpu_skinning;★★★☆;4.5;4.5;2024;2025;"Daniel Holden";@orangeduck
 models;models_bone_socket;★★★★;4.5;4.5;2024;2025;"iP";@ipzaur
 models;models_tesseract_view;★★☆☆;5.6-dev;5.6-dev;2024;2025;"Timothy van der Valk";@arceryz
 shaders;shaders_basic_lighting;★★★★;3.0;4.2;2019;2025;"Chris Camacho";@chriscamacho

examples/examples_template.c

@@ -36,8 +36,9 @@
 
     10. Have fun!
 
-    The following files should be updated when adding a new example, it's planned to create some
-    script to automatize this process but not available yet
+    The following files must be updated when adding a new example, 
+    but it can be automatically done using the raylib provided tool: rexm
+    So, no worries if just the .c/.png are provided when adding the example.
 
      - raylib/examples/<category>/<category>_example_name.c
      - raylib/examples/<category>/<category>_example_name.png

examples/models/models_animation_gpu_skinning.c

@@ -1,121 +1,121 @@
-/*******************************************************************************************
-*
-*   raylib [models] example - gpu skinning
-*
-*   Example complexity rating: [★★★☆] 3/4
-*
-*   Example originally created with raylib 4.5, last time updated with raylib 4.5
-*
-*   Example contributed by Daniel Holden (@orangeduck) and reviewed by Ramon Santamaria (@raysan5)
-*
-*   Example licensed under an unmodified zlib/libpng license, which is an OSI-certified,
-*   BSD-like license that allows static linking with closed source software
-*
-*   Copyright (c) 2024-2025 Daniel Holden (@orangeduck)
-*
-*   Note: Due to limitations in the Apple OpenGL driver, this feature does not work on MacOS
-*
-********************************************************************************************/
-
-#include "raylib.h"
-
-#include "raymath.h"
-
-#if defined(PLATFORM_DESKTOP)
-    #define GLSL_VERSION            330
-#else   // PLATFORM_ANDROID, PLATFORM_WEB
-    #define GLSL_VERSION            100
-#endif
-
-//------------------------------------------------------------------------------------
-// Program main entry point
-//------------------------------------------------------------------------------------
-int main(void)
-{
-    // Initialization
-    //--------------------------------------------------------------------------------------
-    const int screenWidth = 800;
-    const int screenHeight = 450;
-
-    InitWindow(screenWidth, screenHeight, "raylib [models] example - gpu skinning");
-
-    // Define the camera to look into our 3d world
-    Camera camera = { 0 };
-    camera.position = (Vector3){ 5.0f, 5.0f, 5.0f }; // Camera position
-    camera.target = (Vector3){ 0.0f, 2.0f, 0.0f };  // Camera looking at point
-    camera.up = (Vector3){ 0.0f, 1.0f, 0.0f };      // Camera up vector (rotation towards target)
-    camera.fovy = 45.0f;                            // Camera field-of-view Y
-    camera.projection = CAMERA_PERSPECTIVE;         // Camera projection type
-
-    // Load gltf model
-    Model characterModel = LoadModel("resources/models/gltf/greenman.glb"); // Load character model
-
-    // Load skinning shader
-    Shader skinningShader = LoadShader(TextFormat("resources/shaders/glsl%i/skinning.vs", GLSL_VERSION),
-                                       TextFormat("resources/shaders/glsl%i/skinning.fs", GLSL_VERSION));
-
-    characterModel.materials[1].shader = skinningShader;
-
-    // Load gltf model animations
-    int animsCount = 0;
-    unsigned int animIndex = 0;
-    unsigned int animCurrentFrame = 0;
-    ModelAnimation *modelAnimations = LoadModelAnimations("resources/models/gltf/greenman.glb", &animsCount);
-
-    Vector3 position = { 0.0f, 0.0f, 0.0f }; // Set model position
-
-    DisableCursor();                    // Limit cursor to relative movement inside the window
-
-    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, CAMERA_THIRD_PERSON);
-
-        // Select current animation
-        if (IsKeyPressed(KEY_T)) animIndex = (animIndex + 1)%animsCount;
-        else if (IsKeyPressed(KEY_G)) animIndex = (animIndex + animsCount - 1)%animsCount;
-
-        // Update model animation
-        ModelAnimation anim = modelAnimations[animIndex];
-        animCurrentFrame = (animCurrentFrame + 1)%anim.frameCount;
-        characterModel.transform = MatrixTranslate(position.x, position.y, position.z);
-        UpdateModelAnimationBones(characterModel, anim, animCurrentFrame);
-        //----------------------------------------------------------------------------------
-
-        // Draw
-        //----------------------------------------------------------------------------------
-        BeginDrawing();
-
-            ClearBackground(RAYWHITE);
-
-            BeginMode3D(camera);
-
-                // Draw character mesh, pose calculation is done in shader (GPU skinning)
-                DrawMesh(characterModel.meshes[0], characterModel.materials[1], characterModel.transform);
-
-                DrawGrid(10, 1.0f);
-
-            EndMode3D();
-
-            DrawText("Use the T/G to switch animation", 10, 10, 20, GRAY);
-
-        EndDrawing();
-        //----------------------------------------------------------------------------------
-    }
-
-    // De-Initialization
-    //--------------------------------------------------------------------------------------
-    UnloadModelAnimations(modelAnimations, animsCount); // Unload model animation
-    UnloadModel(characterModel);    // Unload model and meshes/material
-    UnloadShader(skinningShader);   // Unload GPU skinning shader
-
-    CloseWindow();                  // Close window and OpenGL context
-    //--------------------------------------------------------------------------------------
-
-    return 0;
+/*******************************************************************************************
+*
+*   raylib [models] example - animation gpu skinning
+*
+*   Example complexity rating: [★★★☆] 3/4
+*
+*   Example originally created with raylib 4.5, last time updated with raylib 4.5
+*
+*   Example contributed by Daniel Holden (@orangeduck) and reviewed by Ramon Santamaria (@raysan5)
+*
+*   Example licensed under an unmodified zlib/libpng license, which is an OSI-certified,
+*   BSD-like license that allows static linking with closed source software
+*
+*   Copyright (c) 2024-2025 Daniel Holden (@orangeduck)
+*
+*   Note: Due to limitations in the Apple OpenGL driver, this feature does not work on MacOS
+*
+********************************************************************************************/
+
+#include "raylib.h"
+
+#include "raymath.h"
+
+#if defined(PLATFORM_DESKTOP)
+    #define GLSL_VERSION            330
+#else   // PLATFORM_ANDROID, PLATFORM_WEB
+    #define GLSL_VERSION            100
+#endif
+
+//------------------------------------------------------------------------------------
+// Program main entry point
+//------------------------------------------------------------------------------------
+int main(void)
+{
+    // Initialization
+    //--------------------------------------------------------------------------------------
+    const int screenWidth = 800;
+    const int screenHeight = 450;
+
+    InitWindow(screenWidth, screenHeight, "raylib [models] example - animation gpu skinning");
+
+    // Define the camera to look into our 3d world
+    Camera camera = { 0 };
+    camera.position = (Vector3){ 5.0f, 5.0f, 5.0f }; // Camera position
+    camera.target = (Vector3){ 0.0f, 2.0f, 0.0f };  // Camera looking at point
+    camera.up = (Vector3){ 0.0f, 1.0f, 0.0f };      // Camera up vector (rotation towards target)
+    camera.fovy = 45.0f;                            // Camera field-of-view Y
+    camera.projection = CAMERA_PERSPECTIVE;         // Camera projection type
+
+    // Load gltf model
+    Model characterModel = LoadModel("resources/models/gltf/greenman.glb"); // Load character model
+
+    // Load skinning shader
+    Shader skinningShader = LoadShader(TextFormat("resources/shaders/glsl%i/skinning.vs", GLSL_VERSION),
+                                       TextFormat("resources/shaders/glsl%i/skinning.fs", GLSL_VERSION));
+
+    characterModel.materials[1].shader = skinningShader;
+
+    // Load gltf model animations
+    int animsCount = 0;
+    unsigned int animIndex = 0;
+    unsigned int animCurrentFrame = 0;
+    ModelAnimation *modelAnimations = LoadModelAnimations("resources/models/gltf/greenman.glb", &animsCount);
+
+    Vector3 position = { 0.0f, 0.0f, 0.0f }; // Set model position
+
+    DisableCursor();                    // Limit cursor to relative movement inside the window
+
+    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, CAMERA_THIRD_PERSON);
+
+        // Select current animation
+        if (IsKeyPressed(KEY_T)) animIndex = (animIndex + 1)%animsCount;
+        else if (IsKeyPressed(KEY_G)) animIndex = (animIndex + animsCount - 1)%animsCount;
+
+        // Update model animation
+        ModelAnimation anim = modelAnimations[animIndex];
+        animCurrentFrame = (animCurrentFrame + 1)%anim.frameCount;
+        characterModel.transform = MatrixTranslate(position.x, position.y, position.z);
+        UpdateModelAnimationBones(characterModel, anim, animCurrentFrame);
+        //----------------------------------------------------------------------------------
+
+        // Draw
+        //----------------------------------------------------------------------------------
+        BeginDrawing();
+
+            ClearBackground(RAYWHITE);
+
+            BeginMode3D(camera);
+
+                // Draw character mesh, pose calculation is done in shader (GPU skinning)
+                DrawMesh(characterModel.meshes[0], characterModel.materials[1], characterModel.transform);
+
+                DrawGrid(10, 1.0f);
+
+            EndMode3D();
+
+            DrawText("Use the T/G to switch animation", 10, 10, 20, GRAY);
+
+        EndDrawing();
+        //----------------------------------------------------------------------------------
+    }
+
+    // De-Initialization
+    //--------------------------------------------------------------------------------------
+    UnloadModelAnimations(modelAnimations, animsCount); // Unload model animation
+    UnloadModel(characterModel);    // Unload model and meshes/material
+    UnloadShader(skinningShader);   // Unload GPU skinning shader
+
+    CloseWindow();                  // Close window and OpenGL context
+    //--------------------------------------------------------------------------------------
+
+    return 0;
 }

examples/others/web_basic_window.c

@@ -1,6 +1,6 @@
 /*******************************************************************************************
 *
-*   raylib [core] example - Basic window (adapted for HTML5 platform)
+*   raylib [others] example - Basic window (adapted for HTML5 platform)
 *
 *   This example is prepared to compile for PLATFORM_WEB and PLATFORM_DESKTOP
 *   As you will notice, code structure is slightly different to the other examples...
@@ -37,7 +37,7 @@ int main()
 {
     // Initialization
     //--------------------------------------------------------------------------------------
-    InitWindow(screenWidth, screenHeight, "raylib [core] example - basic window");
+    InitWindow(screenWidth, screenHeight, "raylib [others] example - web basic window");
 
 #if defined(PLATFORM_WEB)
     emscripten_set_main_loop(UpdateDrawFrame, 0, 1);

projects/CMake/CMakeLists.txt

@@ -1,41 +0,0 @@
-cmake_minimum_required(VERSION 3.11) # FetchContent is available in 3.11+
-project(example)
-
-# Generate compile_commands.json
-set(CMAKE_EXPORT_COMPILE_COMMANDS ON)
-
-# Dependencies
-set(RAYLIB_VERSION 5.5)
-find_package(raylib ${RAYLIB_VERSION} QUIET) # QUIET or REQUIRED
-if (NOT raylib_FOUND) # If there's none, fetch and build raylib
-  include(FetchContent)
-  FetchContent_Declare(
-    raylib
-    DOWNLOAD_EXTRACT_TIMESTAMP OFF
-    URL https://github.com/raysan5/raylib/archive/refs/tags/${RAYLIB_VERSION}.tar.gz
-  )
-  FetchContent_GetProperties(raylib)
-  if (NOT raylib_POPULATED) # Have we downloaded raylib yet?
-    set(FETCHCONTENT_QUIET NO)
-    FetchContent_MakeAvailable(raylib)
-  endif()
-endif()
-
-# Our Project
-
-add_executable(${PROJECT_NAME} core_basic_window.c)
-#set(raylib_VERBOSE 1)
-target_link_libraries(${PROJECT_NAME} raylib)
-
-# Web Configurations
-if (${PLATFORM} STREQUAL "Web")
-    set_target_properties(${PROJECT_NAME} PROPERTIES SUFFIX ".html") # Tell Emscripten to build an example.html file.
-    set(CMAKE_EXE_LINKER_FLAGS "${CMAKE_EXE_LINKER_FLAGS} -s USE_GLFW=3 -s ASSERTIONS=1 -s WASM=1 -s ASYNCIFY -s GL_ENABLE_GET_PROC_ADDRESS=1")
-endif()
-
-# Checks if OSX and links appropriate frameworks (Only required on MacOS)
-if (APPLE)
-    target_link_libraries(${PROJECT_NAME} "-framework IOKit")
-    target_link_libraries(${PROJECT_NAME} "-framework Cocoa")
-    target_link_libraries(${PROJECT_NAME} "-framework OpenGL")
-endif()

projects/CMake/README.md

@@ -1,27 +0,0 @@
-# raylib CMake Project
-
-This provides a base project template which builds with [CMake](https://cmake.org).
-
-## Usage
-
-To compile the example, use one of the following dependending on your build target...
-
-### Desktop
-
-Use the following to build for desktop:
-
-``` bash
-cmake -B build
-cmake --build build
-```
-
-### Web
-
-Compiling for the web requires the [Emscripten SDK](https://emscripten.org/docs/getting_started/downloads.html):
-
-``` bash
-mkdir build
-cd build
-emcmake cmake .. -DPLATFORM=Web -DCMAKE_BUILD_TYPE=Release -DCMAKE_EXECUTABLE_SUFFIX=".html"
-emmake make
-```

projects/VS2022/raylib.sln

@@ -299,7 +299,7 @@ Project("{8BC9CEB8-8B4A-11D0-8D11-00A0C91BC942}") = "shapes_top_down_lights", "e
 EndProject
 Project("{8BC9CEB8-8B4A-11D0-8D11-00A0C91BC942}") = "shapes_rectangle_advanced", "examples\shapes_rectangle_advanced.vcxproj", "{FAFEE2F9-24B0-4AF1-B512-433E9590033F}"
 EndProject
-Project("{8BC9CEB8-8B4A-11D0-8D11-00A0C91BC942}") = "models_gpu_skinning", "examples\models_gpu_skinning.vcxproj", "{8245DAD9-D402-4D5C-8F45-32229CD3B263}"
+Project("{8BC9CEB8-8B4A-11D0-8D11-00A0C91BC942}") = "models_animation_gpu_skinning", "examples\models_animation_gpu_skinning.vcxproj", "{8245DAD9-D402-4D5C-8F45-32229CD3B263}"
 EndProject
 Project("{8BC9CEB8-8B4A-11D0-8D11-00A0C91BC942}") = "shaders_shadowmap_rendering", "examples\shaders_shadowmap_rendering.vcxproj", "{41BBCC10-6FDE-48A1-B2E0-A0EC6A668629}"
 EndProject

src/CMakeLists.txt

@@ -68,14 +68,6 @@ else()
                                )
 endif()
 
-if (${PLATFORM} MATCHES "Web")
-    target_link_options(raylib PUBLIC "-sUSE_GLFW=3" -sEXPORTED_RUNTIME_METHODS=ccall -sASYNCIFY)
-    if(${GRAPHICS} MATCHES "GRAPHICS_API_OPENGL_ES3")
-        target_link_options(raylib PUBLIC "-sMIN_WEBGL_VERSION=2")
-        target_link_options(raylib PUBLIC "-sMAX_WEBGL_VERSION=2")
-    endif()
-endif()
-
 set_target_properties(raylib PROPERTIES
                       PUBLIC_HEADER "${raylib_public_headers}"
                       VERSION ${PROJECT_VERSION}

src/shell.html

@@ -34,7 +34,7 @@
     <link rel="shortcut icon" href="https://www.raylib.com/favicon.ico">
 
     <style>
-      body { font-family: arial; margin: 0; padding: none; }
+      body { font-family: arial; margin: 0; padding: unset; }
 
       #header {
         width: 100%;