Welcome to engine

Your guide to understanding the codebase

Learning Path

5 levels

16 learning units

Orchestration & APIs

  • Pipelines, workflows, public interfaces • 3 units

Entity Component System and Scene Graph

  • Architecture · 27

Graphics API and Application Lifecycle

  • Architecture · 10

Asset Management and Handler Registry

  • Data Model · 4

Core Logic & Data

  • Business rules, schemas, models • 3 units

Camera and Input Management

  • Data Model · 6

Mesh, Geometry, and Material Systems

  • Data Model · 9

Texture, Render Targets, and Compression

  • Data Model · 2

Interaction & Integration

  • UI components, external connectors • 3 units

Forward Renderer and Render Pass System

  • Architecture · 15

Lighting, Shadows, and Batch Rendering

  • Data Model · 1

Shader System and Bind Groups

  • Patterns · 8

Cross-Cutting Concerns

  • Auth, logging, config, testing • 3 units

Physics, Sound, and XR Integration

  • Integration · 8

Advanced Rendering and Tools

  • Workflow · 8

Animation, Particles, and Model Components

  • Workflow · 14

Edge Cases & Resilience

  • Error handling, fault tolerance • 1 units

Additional Data Model Patterns

  • Data Model · 12

Test Your Knowledge

Test your deep understanding of the codebase

Start Quiz

Progress 0/26 answered

Question Tiers· ordered for deep understanding

  1. Why - 8
  2. Purpose & Problem - Architecture - 10
  3. Design & Patterns - Code - 8
  4. Implementation - Hands-On Assignment - 45-75 minutes

Your Challenge

Extend the transform gizmo system to support a new scale gizmo mode that allows users to uniformly scale objects by dragging a central handle. The scale gizmo should follow the same interaction patterns as the existing transform gizmo, including hover states, drag behavior, and coordinate space transformations. Your implementation should integrate seamlessly with the existing gizmo architecture and provide visual feedback during scaling operations.

Starting Points

  1. src/extras/gizmo/transform-gizmo.js:1-118

    • Study the complete transform gizmo implementation to understand the entity structure, coordinate space handling, and interaction patterns

  2. src/extras/gizmo/transform-gizmo.js:20-45

    • Examine how the gizmo creates and manages its visual entities (root, axis entities). You'll need to add a scale handle entity here

  3. src/extras/gizmo/transform-gizmo.js:47-75

    • Look at the _createTransform method to understand how transformations are applied and how coordinate spaces are managed

  4. src/extras/gizmo/transform-gizmo.js:90-118

    • Study the attach method to see how the gizmo synchronizes with target nodes and handles coordinate space conversions

Success Criteria

  • A visible scale handle appears at the center of the gizmo when attached to an object
  • Dragging the scale handle uniformly scales the target object on all three axes
  • The scale handle provides hover feedback (color change or highlight)
  • Scaling works correctly in both world and local coordinate spaces
  • The gizmo's visual size remains constant relative to the camera (doesn't scale with the object)
  • Releasing the drag properly finalizes the scale transformation

Hints

  • Hint 1: Understanding the gizmo architecture conceptual
  • Hint 2: Visual representation approach implementation
  • Hint 3: Interaction and drag calculation implementation
  • Hint 4: Integration points code location

Prerequisites

  • Entity Component System basics
  • 3D transformations and coordinate spaces
  • Vector math and projections
  • Event handling patterns