Native Rendering Engine

Status: ✅ Complete - All 5 Phases Implemented
Purpose: Hybrid rendering engine for native UI rendering and Node.js application execution

Overview

The Native Rendering Engine is a hybrid architecture rendering system that combines:

  • ASM (Assembly) for performance-critical hot paths
  • C/C++ for complex algorithms and maintainability
  • Node.js for application runtime and UI framework
Important: This is NOT a web browser. It's a native rendering and application runtime engine for the FreeWorld OS.

Architecture: Three-Layer Design

Core Layer (ASM) - `kernel/graphics/render_core.asm`

Purpose: Maximum performance for pixel-level operations

  • Framebuffer management (direct VESA access)
  • High-performance blitting (fast, scaled, color-key)
  • Advanced primitives (circle, filled circle, line)
  • Clipping calculations
  • Fast rectangle fill
  • Color blending operations

Performance: Optimized assembly for hot paths

Rendering Engine (C) - `kernel/graphics/render_engine.c`

Purpose: Complex rendering algorithms and effects

  • Multi-layer compositing
  • 12 blend modes (normal, multiply, screen, overlay, darken, lighten, etc.)
  • Per-pixel alpha blending
  • Double buffering with vsync
  • Rendering pipeline hooks (pre/post render)
  • Advanced transformations (rotate around point, scale around point)
  • Enhanced dirty region tracking

Font System (C) - `kernel/graphics/font_loader.c`

Purpose: Font loading and text rendering

  • Bitmap font loading (8x8 default)
  • Font metrics calculation
  • Text rendering to framebuffer
  • Font management and caching

Status: Basic fonts working, TTF/OTF support can be added

Image System (C) - `kernel/graphics/image_decoder.c`

Purpose: Image loading, scaling, and operations

  • BMP decoder (full support)
  • Enhanced ICO loader (PNG + BMP)
  • Format detection (PNG, JPEG, ICO, BMP)
  • Multiple scaling algorithms (nearest, bilinear)
  • Image operations (crop, rotate)
  • Image caching (LRU, 32 entries)

Layout Engine (C) - `kernel/graphics/layout_engine.c`

Purpose: UI component positioning and layout

  • 7 layout algorithms (absolute, vbox, hbox, grid, flow, border, flexbox)
  • Alignment system (start, center, end, stretch)
  • Spacing system (padding, margin)
  • Constraint solving
  • Size calculations (preferred, min, max)
  • Layout utilities (bounds, remove, clear)

Phase 1: Core Rendering (ASM) - Complete ✅

File: kernel/graphics/render_core.asm

Features

  • Framebuffer Management: Direct access to VESA framebuffer
  • High-Performance Blitting:
    • Fast memory copy (optimized 32-bit operations)
    • Scaled blitting (nearest-neighbor, fixed-point math)
    • Color-key blitting (transparency support)
  • Advanced Primitives:
    • Circle drawing (midpoint algorithm, 8-point symmetry)
    • Filled circles (horizontal scan with integer sqrt)
    • Line drawing (optimized Bresenham's algorithm)
  • Clipping: Rectangle clipping calculations
  • Color Operations: Color blending with alpha

API

// Framebuffer
void* render_get_framebuffer(void);
uint32_t render_get_width(void);
uint32_t render_get_height(void);
uint32_t render_get_pitch(void);

// Blitting
void render_blit_fast(void* dest, const void* src, size_t size);
void render_blit_scaled(...);
void render_blit_colorkey(...);

// Primitives
void render_fill_rect_fast(uint32_t x, uint32_t y, uint32_t w, uint32_t h, uint32_t color);
void render_draw_circle(uint32_t cx, uint32_t cy, uint32_t radius, uint32_t color);
void render_fill_circle(uint32_t cx, uint32_t cy, uint32_t radius, uint32_t color);
void render_draw_line(uint32_t x1, uint32_t y1, uint32_t x2, uint32_t y2, uint32_t color);

// Color
uint32_t render_blend_colors(uint32_t color1, uint32_t color2, uint8_t alpha);

Phase 2: Rendering Engine (C) - Complete ✅

File: kernel/graphics/render_engine.c

Features

  • Compositing: Multi-layer compositing system
  • Blend Modes (12 modes):
    • Normal, Multiply, Screen, Overlay
    • Darken, Lighten, Color Dodge, Color Burn
    • Hard Light, Soft Light, Difference, Exclusion
  • Double Buffering:
    • Front/back buffer management
    • Buffer swapping
    • VSync support
  • Pipeline Hooks: Pre-render and post-render callbacks
  • Transformations:
    • Rotation around arbitrary point
    • Scale around arbitrary point
    • Rectangle transformation (bounding box)
  • Dirty Regions: Enhanced tracking and merging

API

// Compositing
void render_composite_layers(render_layer_t* layers, size_t count, void* output_fb);

// Blend Modes
void render_blend_layer_mode(..., render_blend_mode_t mode, ...);

// Double Buffering
int render_double_buffer_init(uint32_t w, uint32_t h, uint32_t pitch);
void* render_get_back_buffer(void);
void render_swap_buffers(void);
void render_set_vsync(bool enabled);

// Transformations
void render_transform_rotate_around(..., float cx, float cy);
void render_transform_scale_around(..., float cx, float cy);

Phase 3: Font System (C) - Complete ✅

File: kernel/graphics/font_loader.c

Features

  • Bitmap font loading (8x8 default)
  • Font metrics (width, height, ascent, descent)
  • Text rendering to framebuffer
  • Font management and caching

API

render_font_t* render_font_load(const char* path);
void render_font_render_text(render_font_t* font, void* fb, 
                             uint32_t x, uint32_t y, 
                             const char* text, uint32_t color);
void render_font_get_metrics(render_font_t* font, 
                              uint32_t* width, uint32_t* height, 
                              uint32_t* ascent, uint32_t* descent);

Phase 4: Image System (C) - Complete ✅

File: kernel/graphics/image_decoder.c

Features

  • Format Support:
    • BMP decoder (full support)
    • Enhanced ICO loader (PNG + BMP)
    • Format detection (PNG, JPEG, ICO, BMP)
  • Scaling Algorithms:
    • Nearest-neighbor (fast, pixel-perfect)
    • Bilinear (smooth, better quality)
  • Image Operations:
    • Image cropping
    • Image rotation (90, 180, 270 degrees)
  • Caching: LRU cache (32 entries)

API

// Loading
render_image_t* render_image_load_memory(const uint8_t* data, size_t size, 
                                         render_image_format_t format);

// Scaling
render_image_t* render_image_scale(render_image_t* src, 
                                   uint32_t new_width, uint32_t new_height);
render_image_t* render_image_scale_algorithm(render_image_t* src,
                                             uint32_t new_width, uint32_t new_height,
                                             render_scale_algorithm_t algorithm);

// Operations
render_image_t* render_image_crop(render_image_t* src, 
                                  uint32_t x, uint32_t y,
                                  uint32_t width, uint32_t height);
render_image_t* render_image_rotate(render_image_t* src, int degrees);

// Caching
void render_image_cache_add(const char* key, render_image_t* image);
render_image_t* render_image_cache_get(const char* key);

Phase 5: Layout Engine (C) - Complete ✅

File: kernel/graphics/layout_engine.c

Features

  • Layout Algorithms (7 types):
    • Absolute (no layout)
    • VBox (vertical stacking)
    • HBox (horizontal arrangement)
    • Grid (grid arrangement)
    • Flow (text-like wrapping)
    • Border (center, top, bottom, left, right)
    • Flexbox (horizontal/vertical with justify options)
  • Alignment System:
    • Start, Center, End, Stretch
    • Independent X and Y alignment
  • Spacing System:
    • Padding (top, right, bottom, left)
    • Margin (top, right, bottom, left)
  • Utilities:
    • Get bounds (bounding box)
    • Remove component
    • Clear layout

API

// Layout Algorithms
void render_layout_absolute(render_layout_t* layout);
void render_layout_vbox(render_layout_t* layout, uint32_t spacing);
void render_layout_hbox(render_layout_t* layout, uint32_t spacing);
void render_layout_grid(render_layout_t* layout, uint32_t cols, uint32_t spacing);
void render_layout_flow(render_layout_t* layout, uint32_t spacing);
void render_layout_flexbox(render_layout_t* layout, bool horizontal, 
                          uint32_t spacing, uint32_t justify_content);

// Alignment
void render_layout_align_component(render_component_t* comp,
                                   uint32_t container_width, uint32_t container_height,
                                   render_align_t align_x, render_align_t align_y);

// Spacing
void render_layout_apply_spacing(render_component_t* comp,
                                  const render_padding_t* padding,
                                  const render_margin_t* margin);

Integration

The rendering engine integrates with:

  • VESA Driver: Direct framebuffer access
  • Graphics Bridge: Node.js integration
  • GUI System: Window management and components
  • Kernel: System calls and memory management

Performance

  • ASM Hot Paths: Maximum performance for pixel operations
  • C Algorithms: Efficient and maintainable
  • Double Buffering: Eliminates tearing, enables smooth animation
  • Caching: Reduces redundant operations

File Structure

kernel/graphics/
├── render_core.asm          # Phase 1 - Core (ASM)
├── render_core.h             # Phase 1 - API
├── render_engine.c           # Phase 2 - Engine (C)
├── render_engine.h           # Phase 2 - API
├── font_loader.c              # Phase 3 - Fonts (C)
├── font_loader.h              # Phase 3 - API
├── image_decoder.c            # Phase 4 - Images (C)
├── image_decoder.h            # Phase 4 - API
├── layout_engine.c            # Phase 5 - Layout (C)
├── layout_engine.h            # Phase 5 - API
├── render.h                   # Main integration
├── render.c                   # Main integration
└── Makefile                   # Build system

Status

Phase 1 (ASM Core)
✅ Complete
Phase 2 (C Engine)
✅ Complete
Phase 3 (Fonts)
✅ Complete
Phase 4 (Images)
✅ Complete
Phase 5 (Layout)
✅ Complete

Total: ~2,500 lines of production code

Future Enhancements

  • TTF/OTF font support
  • PNG/JPEG decoders (full implementation)
  • Bicubic scaling
  • Hardware acceleration
  • Advanced layouts (Flexbox enhancements)
  • Vector graphics (SVG support)