C The Engine

Welcome!

Hi, I'm Raphael, and welcome to this interactive demo! You can also check out my GitHub here or main portfolio here. The graphics engine powering this demo was built entirely from the ground up in C and then compiled to WebAssembly (WASM) for web compatibility. The viewable models were made in Blender and are dynamically loaded and rendered by the engine.

Here's the brief gist of how it works: The C code generates an array of pixel values based on a set of vertices, normals, colors, and polygons and dynamically figuring out where to put the viewer and light source, essentially creating an image from scratch. These pixel values are then displayed on the canvas. In a non-web environment, the pixel values would be saved as an image file (or series of files for an animation).

Below the main demo are some more scenes. These examples highlight the engine's versatility using various Blender models, custom-built primitive shapes, and a variety of shading techniques. Keep scrolling past the scenes for a little more of an in depth description of the core capabilities.

I also am currently working on integrating using an IMU to move the models around. You can check out this demo (please ignore the sounds of my dog):

Some Other Example Images and Scenes

A chalice created using a combination of Bezier Surface and cylinder primitives built into the engine and shaded with Phong Shading.

The same chalice shaded with Gooch Shading

The same chalice shaded with Cel/Toon Shading

This highlights the edges for Gooch Shading (same process for Cel Shading) since the chalices are on a black background. It's done as a post-processing step using sobel filters for edge detection. This was somewhat difficult as some models have tons of edges inside, so the filters were ran on a version shaded with one color per model and the edges were mapped back onto the image.

A Phong shaded version for comparison

Some space ships floating around. The spheres are built in primitives created by subdividing an octahedron

A few farm related models put together

Here are some of the different asteroid shapes you can get with the random perturbations. Apologies, the gif compression makes the colors not so great here

A fun mario animation created during z-buffer development.

An early version of the chalice when adding in Bezier Curves and Surfaces.

An early Bezier Surface test, although as seen in the chalice, the final product had a slight change to break each rectangle at the final level of subdivision up into two triangles.

This was made as a test of the hierarchical modeling system, with three modules of three ships each, each ship with a sail, body, and three shields.

A 3D version.

A little campfire scene made when testing the 3D viewing pipeline.

Another test of the 3D viewing pipeline.

This was also part of the viewing pipeline testing, but only in 2D.

This and the two adjcent images were some of the first ones created. The boat scene here uses a gradient fill to achieve the transition from sand to water and early scanline fill for the rest.

Another one of the first images created, using a basic circle primitive for the wheels.

Another early image, the shapes were drawn using Bresenham's line algorithm, and then filled in with a flood fill.

Capabilities

The engine uses a hierarchical modeling system to quickly compose and render complex scenes using various elements such as lines, polygons, and Bezier surfaces. Predefined functions for creating primitives were added too for things like:

Basic shapes like cubes, cylinders, etc.
Bezier Surfaces
Spheres generated by subdividing octahedrons
Asteroids created by applying random perturbations to the spheres during the subdivision process
PLY importing for custom models

Shading Techniques

The engine offers a few different shading techniques:

Phong shading
Gouraud shading
Gooch shading
Cel (Toon) shading
Depth-based shading
Wireframe rendering
Constant shading

Built from Scratch

Every aspect of the rendering pipeline was built from the ground up. This includes (but isn't limited to):

Line drawing algorithms
Scanline and barycentric filling for polygon rendering
Mathematical functions for all required transformations in the pipeline
Lighting and shading calculations

Scene Composition

The process to render more complex scenes than the demo using C code can be summarized as follows:

Set up the scene parameters, including image size, colors, lighting, and view properties and handle any 3D model imports from PLY files
Use a loop to generate multiple frames with slight variations (or just render one image)
For each frame

Set up the view transformation matrix with the 3D perspective pipeline
Create modules for different scene pieces and formations (e.g., spaceships, planets, groups of primitives)
Add elements like polygons, transformations, colors, shading properties, etc. to modules
Define a shading type and render the scene by traversing through the modules

Save each frame as a separate image file
After generating all frames, use a system command to convert the series of images into an animated GIF or any other conversions you might want