• Overview
• Quick Start
• Features & Toolingling
• Controls

"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.

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.

• SVG Drawing: No as> 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.

• 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.

• 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.

• 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.