Rishov Sarkar’s Software 3D Renderer

This is the first project for the Professor Aaron Lanterman’s Summer 2020 offering of Georgia Tech’s ECE 4795: GPU Programming for Video Games.

My implementation of this project is written in TypeScript using the React framework and Redux for state management.

Usage

It’s simple!

1. To load a model, drag a model file onto this page, or just click here to select a model file. You can also choose a preset below.
2. Drag the model around or play with the controls on the left.
3. ???
4. Profit!

Presets

These presets load the specified model with hand-tuned parameters that make them easy to view. A small image of the rendered output is shown below each as a preview.

• Shark
  
• Mew
  
• Mewtwo
  
• Chief
  
• Eiffel
  

Technical Details

You can download this project’s source code here.

Code Highlights

For this project, I decided to write a custom Matrix class inspired by Python’s NumPy library. In particular, my matrix class supports broadcasting and strided arrays, which I use throughout the code. The code for this matrix class can be found in src/util/matrix.ts. (Sidenote: when reading matrix code, please note that I use multiply() to refer to matrix multiplication and scale() to refer to elementwise multiplication.)

My Transform3D class is a utility class with static methods to create 3-D transformation matrices, such as translations, rotations, and look-at matrices. These transforms all assume a left-handed coordinate system, where the positive z-axis points into the screen. You can find the code in src/util/transform3d.ts.

src/features/loader/fileSlice.ts takes care of loading model files and parsing them into 2-D arrays, which become matrices in later parts of the code.

src/features/canvas/rendererSlice.ts contains the code that defines the state of all parts of the 3-D renderer besides the model itself. This is where you’ll find, for example, the code that updates the camera position when you drag the mouse.

Last but not least, the Canvas React component, defined in src/features/canvas/Canvas.tsx, is where the magic happens. This file takes the vertices directly from the file that was loaded in and applies all the necessary transforms before painting them to a 2-D <canvas>. This includes the code to compute the world transform, view transform, projection transform, and viewport transform, as well as the code to calculate lighting information for each triangle and the code to clip out-of-bounds triangles.

Running Locally

To build and run this project locally, you’ll need to have Node.js installed. You can download it here.

Node.js comes with the package manager npm, and this is sufficient for building and running the project. However, I personally use and recommend the yarn package manager. In my experience, yarn is faster in running commands, faster in installing packages, and has nicer UX.

Now, once you’re set up:

1. From the project directory, run yarn install or npm install to install dependencies.
2. Run yarn start or npm start to start a development server on http://localhost:3000/.
3. You can now make changes to the code, if you’d like. Changes will show up in real time on the development server.
4. If you’d like to export to a static site for publishing on a platform like GitHub Pages or Netlify, run yarn build or npm run build to generate the static site in the project’s build/ directory.