EUAN HAM

EUAN HAM

euanham/projects/graphics.md

Graphics

p5.jsWebGLGLSLProcessingHTMLCSSJavaScript

Matrix Stack and Projection

Matrix Stack and Project Basic graphics library including matrix stack and model/view/project pipelines for graphics in JavaScript. This implements parts of OpenGL such as initializing the matrix stack, transformations, matrix push and pop operations, ortho, perspective, begin/end shape, and vertex.

Rasterizer

Rasterizer Triangle rasterizer with per-vertex coloring for linearly interpolated colors. This rasterizer implements begin/end shape and vertex similar to OpenGL, utilizing scanline rendering rather than using a Barycentric approach!

Shader

Shader This is an extension of the triangle rasterizer, adding Z-buffers for per-pixel depth as well as diffuse, ambient and specular terms to determine the shading of the surfaces. This supports constant shading, flat shading, Gouraud interpolation and Phong interpolation.

GPU Programming

Fractal

This is a small collection of GLSL fragment/vertex shaders. The main highlight of the collection is the fractal chain pictured above. It's an implementation of the iteration zₙ₊₁ = c · sin(zₙ) in a fragment shader, where z and c are complex numbers. It uses the complex sine formula: sin(z) = sin(z.re) · cosh(z.im) + i · cos(z.re) · sinh(z.im). The complex parameter c is passed allowing the fractal to change shape over time.

Polygon Mesh

Polygon Mesh Interactive program that builds polyhedral models and can modify them using the truncation operator. Directed edge operations such as next, previous, opposite, and swing are visualized through key binds. This implementation utilizes indexesd vertice and face lists supporting the .obj format and uses the half-edge data structure for fast adjacency queries.