JS-3D-Engine banner

JS-3D-Engine

Created by: Guagyyy
1 devlog
19m 40s

JS-3D Engine is a high-performance, from-scratch graphics renderer built in vanilla JavaScript and WebGL2, featuring a custom Quaternion-based camera and a manual OBJ parser.

Disclaimer: Although this project has 20 minutes of time logged, far…

JS-3D Engine is a high-performance, from-scratch graphics renderer built in vanilla JavaScript and WebGL2, featuring a custom Quaternion-based camera and a manual OBJ parser.

Disclaimer: Although this project has 20 minutes of time logged, far more (over 100 hours) was spent on coding and debugging process alone. The reason for this is that Hackatime wouldn’t work on my ancient computer (2014 MacBook Pro OS 11), however I was able to get a little bit of time logged so I would still be able to submit the project.

The standout feature is its real-time Stencil Shadow Volume system, which utilizes CPU-driven silhouette detection and the Z-Fail algorithm to achieve pixel-perfect volumetric shadows. It offers a professional-grade light manager for Point, Spot, and Directional sources, demonstrating deep control over the manual graphics pipeline without any external libraries.

This project uses AI

Claude AI was used only for debugging issues, automating long and tedious tasks (such as pipeline variables), and for explaining vector math.

Demo Repository

README

Loading README...
Guagyyy
Guagyyy shipped JS-3D-Engine
about 2 months ago

Shipped this project!

Built from the ground up using vanilla JavaScript and WebGL2, this project is a deep dive into the raw math that governs 3D space.

The Hardest Part: Implementing the Z-Fail Stencil Shadow logic. Manually extruding silhouettes from complex geometry and managing the stencil buffer passes required surgical precision in the graphics pipeline to avoid flickering and buffer overflows.

The Best Feature: The Real-Time Level Inspector. It allows you to dynamically inject Point, Spot, and Directional lights into a scene, instantly recalculating volumetric shadows and Gouraud shading on the fly for any imported OBJ model.

Guagyyy
Guagyyy worked on JS-3D-Engine
about 2 months ago
0h 19m logged

JS-3D Engine is a raw WebGL2 renderer built from scratch to push the limits of vanilla JavaScript. By bypassing high-level libraries, I’ve implemented low-level graphics math usually reserved for C++ engines.

Major Milestones
Z-Fail Stencil Shadows: Implemented “Carmack’s Reverse” to create pixel-perfect volumetric shadows by extruding mesh silhouettes into the stencil buffer.

Quaternion Camera: Built a 6-DOF camera system using quaternions and Gram-Schmidt orthogonalization to ensure smooth, gimbal-lock-free navigation.

Manual Pipeline: Created a custom .obj parser and a CPU-side clipping engine to handle geometry and vertex-normal averaging for high-fidelity lighting.

Integrated Light Manager: Developed a real-time inspector for Point, Spot, and Directional lights, allowing for instant scene manipulation and intensity scaling.

Mesh Loading & Performance
Please note that the initial plane model loaded is single-sided. Since the current lighting and shadow extrusion logic is not optimized for paper-thin, flat planes, lighting artifacts may occur on the reverse side. I strongly encourage users to utilize the OBJ Loader to import manifold 3D geometry; loading complex, solid models is the best way to truly test the engine’s architectural limits and the precision of the volumetric shadow system.

The Vision
The goal is to prove that a modern, feature-rich 3D engine can be lightweight, dependency-free, and highly performant using only the browser’s native capabilities.

Attachment
Attachment
0