Taking a new direction, today we start building a prototype of a particle emitter for the 3D engine. It’s not quite as simple in WebGL as it was in 2D, so we’ve added a new tool – “particletoy” – as a sandbox to play with new particle concepts.
Since we expect a lot of particles on the screen, we explore “instanced rendering” for the first time. Instanced rendering allows us to send an object’s geometry to the GPU only once, and then render it multiple times with different positions and colors by passing only the values that change to the GPU. It works great with plain ol' triangles today, and more complex objects like trees/tanks/dogs in the future.
Notes/highlights
- As usual, the WebGL2 Fundamentals guide on the subject was critically helpful https://webgl2fundamentals.org/webgl/lessons/webgl-instanced-drawing.html
- When using a matrix as an attribute in a GLSL shader, you have to allocate one attribute per 4 bytes of the matrix i.e. 4 shader attributes for a mat4 https://stackoverflow.com/questions/38853096/webgl-how-to-bind-values-to-a-mat4-attribute
- Classic photo printing technique “albumen printing” makes some really lovely images, and it can be done at home and developed with sunlight https://www.alternativephotography.com/albumen-printing/
- SNES Mortal Kombat swapped sweat for blood, and more than a mere palette swap as we thought, it actually helped reduce the number of sprites on the screen https://www.polygon.com/2019/9/13/20812985/nearly-30-years-ago-mortal-kombats-blood-forever-changed-the-video-game-industry
- This is our first usage of GL_DYNAMIC_DRAW for repeatedly updated attributes (particle rotation in this case) and we had to learn a bit about what different buffer usage actually means https://www.reddit.com/r/opengl/comments/57i9cl/examples_of_when_to_use_gl_dynamic_draw/
- Videos Dom sent to chat during the break:
- American Psycho-but-it’s-cats https://www.youtube.com/watch?v=D_HNpheUjBU
- This absolutely terrifying and perfect TikTok found by Jeff https://twitter.com/TaylorLorenz/status/1364707024647323648