clay/examples/GLES3-GLFW-video-demo/README.md
Luke 10X 24b42b7b1c 📦 GLES3 renderer and demo examples using it
- **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
2025-12-19 12:52:38 -05:00

56 lines
1.8 KiB
Markdown

GLES3 Renderer Video Demo (Using GLFW)
======================================
This directory contains a standard Video-Demo example
using work-in-progress GLES3 renderer.
While it still needs refinement, the renderer is already functional and demonstrates the core rendering pipeline.
Current features
- Supports all draw commands except custom.
- In the best-case scenario (no clipping):
- All quad-based commands (Rectangle, Image, Border) are rendered in a single draw call.
- All glyphs belonging to the same font are rendered in one instanced draw call.
- When clipping (scissoring) is used:
- The renderer flushes draw calls before and after each scissor region.
- Supports up to 4 fonts and 4 image textures.
- Image textures may also be used as texture atlases.
- Custom UserData provides per-image UV coordinates, allowing multiple images to share a single OpenGL texture.
- Uses stb_image.h and stb_truetype.h as single-header dependencies for asset loading.
- The loading layer is modular and can be replaced with a different asset pipeline if needed.
Currently builds on:
- Emscripten
- clang++ / macOS
- CMake support is not available yet.
Windowing and platform support
This example uses GLFW, and the renderer is framework agnostic
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