[Renderers/GLES3] 📦 GLES3 renderer and demo examples using it (#565)

- **Initialize Window**:
  - Successfully created a GLFW window with dimensions 1280x720.
  - Set up window hints for OpenGL version and core profile, enabling multisampling, and enabling depth testing.

- **Setup Renderer**:
  - Initialized the Clay rendering context with a memory arena and dimensions.
  - Set up the measure text and render text functions using stb_image.h and stb_truetype.h.
  - Initialized the GLES3 renderer with 4096 texture units.
  - Loaded a Roboto-Regular font atlas and set it as the default font for rendering.

- **Main Loop**:
  - Called `Clay_UpdateScrollContainers` to handle scroll events.
  - Set the layout dimensions and cleared the color buffer and depth buffer.
  - Render the Clay video demo layout.
  - Swapped the window buffers to display the rendered video.

- **Cleanup**:
  - Cleaned up the GLFW window and renderer resources when the application is closed.

This setup provides a basic framework for rendering videos in GLES3 with GLFW, leveraging stb_image.h for asset loading and Clay for the rendering engine.

- Configure GLFW and SDL2 in the main files
- Fix the video bugs in the main file

🪝 Stb dependency to be managed with cmake in examples

💀 Allow clients to configure headers, also expose Gles3_Renderer through
header-only mode

🧹 Quality of life: automatically set screen dimensions to renderer

Before users had to set them manually

📚 **🎨 Renderers/GLES3:** Improve round-rectangle clipping with uniform border thickness

Implemented improvements to the renderer for GLES3, ensuring better handling of rounded rectangles with borders, making the layout more visually appealing.

- Added two new functions `RenderHeaderButton1`, `RenderHeaderButton2`, and `RenderHeaderButton3` for creating header buttons with different styles.
- Updated the `CreateLayout` function to include these new buttons in the right panel.
- Added a TODO note for handling the outer radius calculation, as it seems to be incorrect in the current implementation.

- Replace `bl_i + B` and `br_i + B` with `bl` and `br` respectively to simplify the code.
- Simplify the logic for checking pixel inside the inner rounded rect by directly using `innerLocal`.

📥 Change borders to be inset

- Fixed incorrect border calculation in the shader.
- Added support for inset borders by adjusting the boundary calculations based on `CLAY_BORDERS_ARE_INSET`.

This change also gives the renderer more choice in handling different border styles.

🏗️ CMake builds for GLES3 renderer examples

examples/GLES3-SDL2-sidebar-scrolling-container/.gitignore

@@ -0,0 +1,3 @@
+/build/
+/website-demo-macos-sdl2*
+/macos-sidebar-scrolling-container*

examples/GLES3-SDL2-sidebar-scrolling-container/CMakeLists.txt

@@ -0,0 +1,82 @@
+cmake_minimum_required(VERSION 3.27)
+set(CMAKE_C_STANDARD 99)
+project(GLES3_SDL2_sidebar_scrolling_container C)
+
+# -------------------------------------------------
+# FetchContent
+# -------------------------------------------------
+include(FetchContent)
+set(FETCHCONTENT_QUIET FALSE)
+
+# -------------------------------------------------
+# STB (header-only)
+# -------------------------------------------------
+FetchContent_Declare(
+    stb
+    GIT_REPOSITORY https://github.com/nothings/stb.git
+    GIT_TAG master
+)
+FetchContent_MakeAvailable(stb)
+
+# -------------------------------------------------
+# SDL2
+# -------------------------------------------------
+FetchContent_Declare(
+    SDL2
+    GIT_REPOSITORY "https://github.com/libsdl-org/SDL.git"
+    GIT_TAG "release-2.30.10"
+    GIT_PROGRESS TRUE
+    GIT_SHALLOW TRUE
+)
+FetchContent_MakeAvailable(SDL2)
+
+# -------------------------------------------------
+# Executable
+# -------------------------------------------------
+add_executable(GLES3_SDL2_sidebar_scrolling_container main.c)
+target_compile_options(GLES3_SDL2_sidebar_scrolling_container PUBLIC)
+target_include_directories(GLES3_SDL2_sidebar_scrolling_container
+    PUBLIC
+        .  # This renderer
+        ../.. # Clay
+        ${stb_SOURCE_DIR} # STB header only depencency that does not have its own CMake build
+
+)
+
+# -------------------------------------------------
+# Link libraries
+# -------------------------------------------------
+target_link_libraries(GLES3_SDL2_sidebar_scrolling_container PUBLIC
+    SDL2::SDL2main
+    SDL2::SDL2-static
+)
+
+# -------------------------------------------------
+# Platform-specific OpenGL / GLES
+# -------------------------------------------------
+find_package(SDL2 REQUIRED)
+find_library(OPENGL_FRAMEWORK OpenGL)
+target_link_libraries(GLES3_SDL2_sidebar_scrolling_container
+    PRIVATE
+        ${OPENGL_FRAMEWORK}
+)
+
+# -------------------------------------------------
+# Build flags (kept minimal)
+# -------------------------------------------------
+if(MSVC)
+    set(CMAKE_C_FLAGS_DEBUG "${CMAKE_C_FLAGS_DEBUG}")
+else()
+    set(CMAKE_C_FLAGS_DEBUG "${CMAKE_C_FLAGS_DEBUG}")
+    set(CMAKE_C_FLAGS_RELEASE "${CMAKE_C_FLAGS_RELEASE}")
+endif()
+
+# -------------------------------------------------
+# Copy resources
+# -------------------------------------------------
+add_custom_command(
+    TARGET GLES3_SDL2_sidebar_scrolling_container POST_BUILD
+    COMMAND ${CMAKE_COMMAND} -E copy_directory
+    ${CMAKE_CURRENT_SOURCE_DIR}/resources
+    ${CMAKE_CURRENT_BINARY_DIR}/resources
+)

examples/GLES3-SDL2-sidebar-scrolling-container/Makefile.emscripten

@@ -0,0 +1,36 @@
+# vim: set tabstop=4 shiftwidth=4 expandtab noexpandtab:
+
+#
+# PROGRAM COMPONENTS
+# 
+
+CXX = emcc
+
+CXXFLAGS = -std=c99
+CXXFLAGS += -O0
+CXXFLAGS += -I../..
+CXXFLAGS += -I./build/_deps/stb-src
+
+LDLIBS += -s USE_ZLIB=1
+LDLIBS += -s USE_SDL=2
+LDLIBS += -s FULL_ES2=1 -s USE_WEBGL2=1
+LDLIBS += -s ALLOW_MEMORY_GROWTH=1 -s GL_UNSAFE_OPTS=0
+LDLIBS += -s STACK_SIZE=2048kb
+LDLIBS += -s EXPORTED_FUNCTIONS=['_main']
+LDLIBS += -s ASSERTIONS=1 -s SAFE_HEAP=1
+LDLIBS += --preload-file $(PWD)/resources/profile-picture.png@resources/profile-picture.png
+LDLIBS += --preload-file $(PWD)/resources/millbank.jpeg@resources/millbank.jpeg
+LDLIBS += --preload-file $(PWD)/resources/Roboto-Regular.ttf@resources/Roboto-Regular.ttf
+LDLIBS += --preload-file $(PWD)/resources/RobotoMono-Medium.ttf@resources/RobotoMono-Medium.ttf
+
+main:
+	mkdir -p build/emscripten
+	time $(CXX) $(CXXFLAGS) \
+		$(PWD)/main.c \
+	    $(LDLIBS) -o build/emscripten/index.html 
+
+test:
+	make -f Makefile.emscripten main \
+		&& (cd build/emscripten && python3 -mhttp.server)
+	
+.PHONY: main 

examples/GLES3-SDL2-sidebar-scrolling-container/Makefile.macos

@@ -0,0 +1,28 @@
+# vim: set tabstop=4 shiftwidth=4 expandtab noexpandtab:
+
+CXX = clang
+
+CXXFLAGS = -std=c99
+CXXFLAGS += -g -O0 -fno-omit-frame-pointer
+CXXFLAGS += -ferror-limit=1
+CXXFLAGS += -I../..
+CXXFLAGS += -I./build/_deps/stb-src
+CXXFLAGS += -DGL_SILENCE_DEPRECATION
+
+# SDL2 (Homebrew)
+CXXFLAGS += -I$(shell brew --prefix sdl2)/include/SDL2
+LDLIBS   += -L$(shell brew --prefix sdl2)/lib -lSDL2
+
+# macOS system frameworks (OpenGL needs these)
+LDLIBS += -framework OpenGL
+LDLIBS += -framework Cocoa
+LDLIBS += -framework IOKit
+LDLIBS += -framework CoreVideo
+
+main:
+	mkdir -p build
+
+	time $(CXX) $(CXXFLAGS) \
+		$(PWD)/main.c \
+		$(LDLIBS) \
+		-o build/macos-sidebar-scrolling-container-sdl2

examples/GLES3-SDL2-sidebar-scrolling-container/README.md

@@ -0,0 +1,57 @@
+GLES3 Renderer Scrolling Container (Using SDL2)
+===============================================
+
+This directory contains a complete example thatn can me used to test all different draw commands
+using work-in-progress GLES3 renderer.
+While it still needs refinement, the renderer is already functional and demonstrates the core rendering pipeline.
+
+The images used as resources in this example, namely:
+
+- millbank.jpeg a window with a panoramic city view;
+- and profile-picture.png showing objects aligned in a circle;
+
+are taken with my phone camera and are dedicated to the Public Domain.
+
+How to build it with CMake?
+---------------------------
+
+Cmake build is the easiest way to build it:
+
+    mkdir build
+    cmake -S . -B ./build
+
+How to build and run on Emscripten:
+----------------------------------
+
+For Emscripten the build is a bit custom,
+but it depends on CMakeBuild to install header-stb dependency.
+So you still need to build it with CMake first.
+
+And then you have to source the Emscripten SDK:
+
+    source /path/to/emscripten/emsdk/emsdk_env.sh
+
+Then build it with hand-crafted Makefile.emscripten:
+
+    make -f Makefile.emscripten test
+
+and then navigate to http://localhost:8080
+
+How to build and run on Mac:
+----------------------------
+
+Requires SDL2:
+
+    brew install sdl2
+
+Requires STB:
+
+    cmake -B build
+
+Build it with:
+
+    make -f Makefile.macos
+
+And run with:
+
+    ./macos-sidebar-scrolling-container-sdl2