Shapes and WebGL tweening

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:

• plot.ly and Étienne Tétreault-Pinard with whom the discussion for non-mesh shapes came up
• Mikola Lysenko, author of regl and much of scijs
• Ricky Reusser also at Plotly who suggested wzrd.in and also a scijs/ndarray contributor
• Superformula implementation and uses in D3.js
• Otherworldly superformula animas from sifbuilder
• regl-tween for an encapsulated tweening abstraction atop of regl
• my dataviz, generative and game dev related tweets

Uploaded with blockbuilder.org