A high-performance 3D graphics renderer built with Rust, compiled to WebAssembly, and displayed in the browser using a React and TypeScript frontend. This project explores various rendering techniques, including rasterization and ray tracing, along with interactive scene manipulation.

Access the live demo right here in your browser!

This project's 3D graphics engine, written in Rust and compiled to WebAssembly, offers two distinct rendering methods and several advanced features:

• Core Engine & Parallelism:

  • The engine combines a real-time rasterizer with a path-tracing ray tracer. Both rendering pipelines are accelerated using Rayon for CPU-based multithreading.

• Advanced Ray Tracing Capabilities:

  • Implements a path tracer with for photorealistic light simulation. It uses Multiple Importance Sampling (MIS) with direct light sampling via probabilistic Monte Carlo integration to reduce noise, as well as Russian Roulette path termination.
  • Ray intersections are accelerated by a Bounding Volume Hierarchy (BVH). This is represented contiguously in memory as a flattened tree for better cache properties.
  • Supports physically inspired materials including dielectrics (glass with Snell's Law refraction and Schlick's Fresnel approximation), metals (configurable roughness), emissives, and a two-layer clear coat. Also realistically models depth of field camera effects.

• Real-Time Rasterization Techniques:

  • Features a real-time scanline triangle rasterizer with Z-buffering, perspective-correct interpolation, and near-plane clipping.
  • Includes*shadow mapping for multiple lights with basic filtering for softer shadows.
  • Applies Phong lighting and a fast screen-space post-processing depth of field effect.

• Interactive Scene Editing & Control:

  • Web-based interface for real-time scene interaction. Users can move through the scene, pan around, and zoom in.
  • Users can choose from pre-defined scenes, or import their own 3D models in a GLB format. They can also add basic geometry and modify existing scene objects.

• Core Logic: Rust (with Rayon for parallelism)
• Frontend Logic: TypeScript, React
• UI Components: Shadcn and Tailwind

• Rust toolchain, available here
• A specific Rust nightly toolchain: nightly-2024-08-02. This can be installed via the terminal command rustup toolchain install nightly-2024-08-02.
• wasm-pack, available here
• Node.js and npm

1. Clone the repository:

   git clone https://github.com/ElliottF05/3D-Graphics.git
   cd 3D-Graphics

2. Build the WebAssembly module: Navigate to the wasm-graphics directory and run the build script:

   cd wasm-graphics
   ./build.sh 

   This will compile the Rust code into WebAssembly and place the output in the web/wasm directory.

3. Install frontend dependencies: Navigate to the web directory:

   cd web
   npm install

4. Run the development server:

   cd web
   npm run dev

   This will start the Vite dev server, from which you can access the application in your browser (usually at http://localhost:5173).

The online demo is deployed on GitHub Pages. Specifically, pushing to the main branch will trigger the GitHub Actions workflow defined in .github/workflows/deploy.yml to build and deploy the web/dist folder.

• Port the rendering logic to the GPU using WebGPU and the wgpu Rust crate to massively speed up rendering.

• Inspired by various resources on computer graphics, including "Ray Tracing in One Weekend" series, as well as the many hours I've spent playing 3D video games :)