Suzanne 🐒 - Dependency-free 3D Software Renderer

See demos

Features 🐵

- Programmable Vertex and Fragment shaders
- Perspective correct varying interpolation
- Texture mapping
- OBJ model loader
- API similar to WebGL
- Works in the browser and node.js
- Provides TypeScript type declarations

Use cases 🙈

- Server-side 3D rendering
- Set your CPU on 🔥

Todo 🙊

• [ ] Implement clipping
• [ ] Support .mtl files
• [ ] Improve performance
• [ ] Antialiasing
• [ ] Mipmapping

Usage 🍌

npm install suzanne

Importing

Node.js

const suz = require('suzanne');

Browser

<script src='./node_modules/suzanne/dist/suzanne.js'></script>

Webpack, Parcel...

import { Context, VertexArray, ... } from 'suzanne';

Basic example

To draw something, a new Context must be created

Suzanne internally stores pixel data in a Uint8ClampedArray in RGBA

const sz = new suz.Context(400, 300, {
        draw: bitmap => {
        // draw bitmap (to a file or in an html canvas)
    }
});

const triangle = {
    vertices: [
        suz.vec3(-1, -1, 2),
        suz.vec3(1, -1, 2),
        suz.vec3(0, 1, 2)
    ],
    indices: new Uint8Array([0, 1, 2]),
    attributes: {
        color: [ //suz.colors are just suz.vec4 instances
            suz.colors.red,
            suz.colors.green,
            suz.colors.blue
        ]
    }
};

// create a Vertex Array Object from our triangle
const VAO = suz.VertexArray.fromModel(triangle);

// Use a perspective projection matrix to transform the triangle's vertices
const proj = suz.Matrix4.perspective(suz.radians(70), sz.width / sz.height, 0.1, 1000);

// declare a uniform variable (accessible from both shaders)
VAO.setUniform('mvp', proj);

// Attach shaders to our Canvas3D
sz.useProgram({
    vertex_shader: vertex => {
        // interpolate the color attribute
        vertex.varyings.color = vertex.attributes.color;

        // return our transformed vertex position
        return vertex.uniforms.mvp.transform(vertex.position);
    },
    fragment_shader: (varyings, uniforms) => {
        return varyings.color;
    }
});

// bind our VAO to our Canvas3D
sz.bindVertexArray(VAO);

// clear the canvas to black
sz.clear(suz.colors.black);

// draw the triangle in indexed mode
sz.drawElements(suz.DrawingMode.TRIANGLES, 0, triangle.indices.length);

// update the canvas
sz.draw();

Result - A magnificent colored triangle 🔻

Going further

https://github.com/nathsou/SuzanneDemos/