Browser graphics

November 20, 2015 — January 18, 2023

computers are awful
faster pussycat
photon choreography
Figure 1

1 Vector graphics

See javascript vector graphics.

2 Javascript statistical/mathematical graphing

See plotting on the web.

3 3D

3D graphics in the browser are convenient and somewhat performant. And you can do 3d dance parties in the browser, which is surely the benchmark.

Two common options use OpenGL ES, the mobile- and browser-friendly option.

  • Scenejs seems to specialize in loading up geometries and shapes and physics for realistic scene modelling
  • three.js does the same things, but does more abstract stuff with them
  • shadertoy supports writing raw GSL shaders in the browser.
  • Use.GPU reimagines GPU scene painting via javascript FRP idioms

Everything supports lens flare, which is the main thing.

For desktop apps and a larger OpenGL subset there is was a desktop option, Plask which seems to be some kind of particle-system-friendly macOS app, with spurty no ongoing development but many elegant applications.

3.1 Handy tools

  • cables.gl attempts to create a VVVV-style patcher in javascript.

    cables is your model kit for creating beautiful interactive content. With an easy to navigate interface and results in real time, it allows for fast prototyping and prompt adjustments.

    Working with cables is just as easy as creating cable spaghetti:

    You are provided with a given set of operators such as mathematical functions, shapes and materials. Connect these to each other using virtual cables to create the scene you have in mind. Easily export your piece of work at any time. Embed it into your website or use it for any kind of creative installation.

  • Threefab designs THREE.js scenes.

  • Nunustudio does too (source code)

  • Livecodelab (source)

  • Threenodes.js (source) also attempts to create a VVVV-style patcher in javascript

  • neuroglancer

    Neuroglancer is a WebGL-based viewer for volumetric data. It is capable of displaying arbitrary (non axis-aligned) cross-sectional views of volumetric data, as well as 3-D meshes and line-segment based models (skeletons).

  • p5.js a port of processing to js. Seems CPU profligate.

  • centi.js hmm.