This Lesson is for PRO Members

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

Unlock This Lesson

Already subscribed? Sign In

Autoplay
Hide playlist

    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: https://github.com/guybedford/wasm-demo

    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.

    You must be a Member to view code