Table of Contents

Overview
Quick Start
Features & Tooling
Controls
Overview

"Down with canvas!" is an experimental 3D software rasterizer built from scratch. Instead of relying on hardware-accelerated graphics APIs, it manually calculates matrices, projections, and lighting on the CPU. The final 3D scene is projected into 2D space and injected directly into the DOM as formatted SVG paths every frame.
Quick Start

Running Locally

To run the engine locally, ensure you have Node.js installed.
1. Clone the repository
git clone https://github.com/Sekqies/down-with-canvas.git
cd down-with-canvas
2. Install dependencies
npm install
3. Start the development server
npm run dev
The application will be available in your browser, typically at http://localhost:5173.
Features & Tooling

The Engine

SVG Drawing: No <canvas> elements. Geometry is projected to screen coordinates and rendered using a dynamic DOM string buffer. The string buffer is then converted into one, or multiple, svg paths. Supports colored and wireframe meshes.
Lighting System: Supports point lights with adjustable intensity, radius, and color. Raytracing for shadows is supported, but not recommended for high-poly scenes. Raytrace at your own discretion!
Component Animations: Components can be individually animated through the Oscilator, Rotator and Orbit behavior, each of which have parameters for center, speed, and other relevant tools.
The Editor

Primitives: Generates UV spheres, 3D n-gons, frustums, antiprisms, and tori with adjustable parameters for n, radius, etc.
OBJ Importer: A parser that loads vertex and normal information from an outside .obj file extension, like those produced by Blender.
Live Inspector: A UI panel to dynamically tweak object translation, rotation, scale, material colors, and light properties.
Interactive Gizmos: 3D translation arrows that allow for visual, mouse-driven movement of objects along their axes.
Controls

Camera Navigation

Left Click + Drag (Background): Orbit the camera around the central target. By default, the central target is (0,0,0).
Mouse Wheel: Zoom the camera in and out by adjusting the orbital radius.
Scene Manipulation

Left Click (Object): Select an object. This activates the 3D gizmo and populates the Inspector panel.
Click + Drag (Gizmo): Visually translates the selected object along its X, Y, or Z axis.
Keyboard Nudging: While an object is selected, use hotkeys to move it relative to the world:
- W / S: Move along the Z-axis.
- A / D: Move along the X-axis.
- Q / E: Move along the Y-axis.