clay/examples/GLES3-SDL2-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

39 lines
1.4 KiB
Markdown

GLES3 Renderer Video Demo (Using SDL2)
======================================
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 SDL2, but the renderer is framework agnostic.
For sake of example you can also build it with
hand-crafted Makefile.macos
make -f Makefile.emscripten test
and then navigate to http://localhost:8080
On Emscripten it works well.