WebGL: Pushing Pixels

A Small project post mortem

Tl;dr: check it out here

Overview:

Motivation

I wanted to make a simple physics "engine" (equations of motion, basic collision) as an exercise

I was inspired to do so after watching this presentation by Steven Witten

It's worth your time if you're interested in math or graphics All his presentations, along with a host of interesting toys and articles, can be found on his incredibly polished site

The Gist

The fundamental idea of a physics system is very simple: incoporate the appropriate physical law (gravity, hookes law, w/e) and numerically integrate.

Pushing around pixels in practice however is hard with a capital H and this is just a simulation of frictionless colliding rigid bodies (no rotation, multiple contact point collisions, or constrained simulation)

As usual, the underpinning rendering and programming routines were all implemented from scratch (webgl, seperating axis theorem, impulse collision response, euler integration etc)

In the future, time/ interest willing, I hope to improve upon this first stab and dig deeper into the subject.

Rendering Side of Things:

  • Vanilla WebGL with some boilerplate code and glMatrix as my vector and matrix library.
  • Wireframe shader via barycentric coordinates from vertices.

A glaringly missed component is not setting current state of renderer from the interpolation between the two physics states. This results in some flickering artifacts. Also, if I were to do this as a fuller project I'd like to add instancing/ batch rendering to be able to stress test the simulation.

Programming Side of Things:

Visualization tests or articles for each main component:

Resources: