block by monfera 85aa9627de1ae521d3ac5b26c9cd1c49

Shapes and WebGL tweening

Full Screen

Code from codepen.io/monfera/pen/GjOBkJ

Update: now it uses the WebGL extension OES_standard_derivatives for antialiasing, if avaliable. There’s also Z ordering and alpha blending, to support antialiasing with the alpha smoothstepping method. There’s a slight trick, fwidth is applied on dist rather than r so as to avoid artifacts where the formula yields near-zero radii.

It shows:

  1. A simple use of the outstanding regl library - the below techniques can alternatively work with direct WebGL too
  2. Efficient tweening of possibly large amounts of data by loading two geometries (here, squeezed into one vec4 position attribute) to the GPU, and calculating the tweening on the GPU (contrast this to refreshing geometry in a rAF loop
  3. The use of smoothstep and smootherstep as a quick&dirty alternative to a configurable tweening function; enough for 90% of purposes
  4. Rendering marker shapes with the fragment shader - each point is one element in the vertex buffer, no need for representing shapes via a mesh
  5. Use of the so-called “superformula” generalization for shape definition - neat, but in practice it’s both limiting and slow (too much trig in the frag shader)
  6. Similar to the geometry tweening, there’s also shape tweening (via uniform tweening)
  7. Use of scijs/ndarray for a numpy-like interface, pretending that native typed JS arrays are multidimensional arrays (syntactic sugar in this case)

It’s not meant to be efficient as it’s more of a test for various features. It can be made much faster/nicer in various ways.

Links:

Uploaded with blockbuilder.org

index.html