← Back to Overview
TypeScript 3D Engine

Small World Engine

A modular, high-performance 3D engine for WebGL & WebGPU. Co-designed with Gemini.

github.com/rottensteiner-stefan/small-world
Next Slide: Space or → Previous Slide: ←
vga_pixel.asm 
mov ax, 0013h   ; Mode 13h (320x200)
int 10h         ; VGA BIOS Service
mov ax, 0A000h  ; VRAM Segment
mov es, ax      ; ES Points to VRAM
mov di, 320*100 ; Line 100, Col 0
mov cx, 320     ; Draw full line (320px)
mov al, 04h     ; Pixel Color (Red)
draw_line:
mov [es:di], al ; Write pixel to VRAM
inc di          ; Go to next pixel
loop draw_line  ; Loop until CX = 0
xor ah, ah      ; Wait for keypress
int 16h         ; BIOS Keyboard Interrupt
Architecture & Features

Features & Architecture

Modular structure, modern graphics pipelines, and flexible control mechanisms

Hybrid Rendering Pipeline

  • Support for state-of-the-art WebGPU with seamless fallback to WebGL 2 and WebGL 1.
  • Physically-based PBR shading pipeline (Cook-Torrance BRDF) for high-precision metalness and roughness representation.
  • Advanced glass effects with screen-space refraction (SSR) and light absorption (Beer's law).
  • Shadow mapping with PCF (Percentage-Closer Filtering) for soft, smooth shadows.

Camera & Behavior System

  • Strategy-based Cameras: Flexible switching between Smooth-Follow, stiff fixed, Isometric, or FPS control.
  • Modular ZoomController, Camera-Shake (earthquake effects), and Camera-Flash (procedural lightning effects).
  • Callback-driven Component Behaviors to encapsulate application logic like FlickerBehavior or collision sensors.
Co-Creation Part I

Co-Creation with Gemini

From initial draft to a clean architectural skeleton

The entire project was conceived and implemented from the ground up in close partnership with Gemini. Gemini acted not just as a coding assistant, but as a true co-architect: from planning the folder structure and defining strictly typed interfaces (TypeScript strict: true) to aligning on design patterns (like the modular camera strategy system).

📌 Key Takeaways

  • Precise and polite
  • Anything that can go wrong will go wrong - just faster with an AI
  • Set clear boundaries
  • Planning mode and well-thought-out work packages
  • Adhere to official best practices of the domain
Co-Creation Part II

Co-Creation with Gemini

Complex Algorithms, Hot-Path Optimization & Resume

To maximize render performance, time-critical paths were optimized: Gemini assisted in developing highly efficient WGSL/GLSL shaders, implementing screen-space refraction for real-time glass, and designing a MathPool. This object pool completely eliminates garbage collection overhead during the render loop.

📌 Key Takeaways

  • Blue or red pill? Desires, lies & hallucinations
  • Analyze strengths, habits, and weaknesses (Sun Tzu)
  • Working with AI is teamwork, with you as the leader.
  • AGENTS.md

LOADING DAMAGED HELMET PBR MODEL (WebGPU / WebGL)...

GLTF Damaged Helmet Showcase
Real-time PBR StandardMaterial, Roughness/Metallic & Environment Mapping
🕹️ Drag with mouse to rotate | WASD to move
1 / 5
00:00