This Lesson is for PRO Members.

Subscribe today and get access to all lessons! Plus direct HD download
for offline use, member comment forums, and iTunes "podcast" RSS feed.
Level up your skills now!


Already subscribed? Sign In


Typed Arrays in High Performance JavaScript

We introduce a black-box render function which draws circles to the screen, explaining how the position information is represented in the memory for the renderer (a typed array of [x1, y1, r1, x2, y2, r2, …]). We draw a simple circle (at [0, 0, 100]), then many random circles to get a feel for passing rendering data by directly setting Typed Array memory. The details of the renderer are not discussed at all. We set up some simple dynamics and wall bounds, and then push the circle count up over 1,000,000 renders to demonstrate the performance of dealing with raw memory and WebGL.

Demo repo:

Note the demo is currently only supported in Chrome Canary with the Experimental Web Platform flag (chrome://flags/#enable-experimental-web-platform-feature) enabled due to the use of ES modules and WebGL 2.0.