Monthly Archives: August 2017

WebGL 2 Development with PicoGL.js, Part 5: A Particle System

particles

This post is part of the series WebGL 2 Development with PicoGL.js.

We’ve now covered all the basic drawing tools of PicoGL.js. We’ll finish off the series by using those tools to implement a simple particle system that does a gravitational simulation on the GPU using transform feedback. Our simulation will consist a large number of particles attracted to three centers of gravity. We’ll be updating our particles using the equation for gravitational accelerationg = GM/r2, where M is the mass of one of our gravitational centers, r is the distance between it and a given particle, and G is the gravitational constant.

Continue reading WebGL 2 Development with PicoGL.js, Part 5: A Particle System

Advertisements

WebGL 2 Development with PicoGL.js, Part 4: Transform Feedback

transformfeedback

This post is part of the series WebGL 2 Development with PicoGL.js.

In part 3, we learned how to use uniform buffers and instanced drawing to make our rendering more efficient. Transform feedback is another WebGL 2 feature that targets performance and can significantly improve the performance of animations. In WebGL 1, you would normally have to update object transforms on the CPU, which meant iterating over them serially. With transform feedback, we can capture vertex shader outputs from one frame into a buffer and use them as inputs for the next frame. This allows us to move our animation updates to the GPU, taking advantage of its massive parallelism.

Continue reading WebGL 2 Development with PicoGL.js, Part 4: Transform Feedback

WebGL 2 Development with PicoGL.js, Part 3: Uniform Buffers and Instanced Drawing

ubo

This post is part of the series WebGL 2 Development with PicoGL.js.

In the last lesson, we rounded out our core rendering toolkit with textures and framebuffers. In this lesson, we’ll look at some new WebGL 2 features that don’t introduce new functionality, but let us draw the things we can already draw much more efficiently. We’ll start with uniform buffers, which allows us to load all our uniforms into a block of memory that stays on the GPU, rather than updating them individually on each draw call. Then we’ll take a look at instanced drawing, which allows us to draw multiple copies of an object in a single draw call.

Continue reading WebGL 2 Development with PicoGL.js, Part 3: Uniform Buffers and Instanced Drawing