Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Typed Arrays in High Performance JavaScript

    javascriptJavaScript

    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.