I previously posted about incorporating P5.js sketches and hosting them on a NextJS based blog. P5 is great for quick canvas based animations and example tutorials, however, for larger abstractions for simulating distributed systems it can feel limited. I found myself writing and designing a animation update/draw loop, declarative UI components - all things that exist everywhere already.

ThreeJS and React-Three-Fiber

There are plenty of HTML and WebGL based canvas libraries, but ThreeJS is one of the most established and flexible. ThreeJS includes a collection of libraries that abstract the mesh, material, and geometry constructs in WebGL. The object hierarchy created from these classes represents the 3D (or 2D) model that will be rendered.

React-Three-Fiber is a React binding for these classes. It provides a very lightweight, automated wrapper over the ThreeJS classes. I saw automated because it uses an automatic process of converting ThreeJS classes to React components. Reach Three Fiber then uses the a React custom rendered to convert the React component tree to a ThreeJS object graph.

React isn't adding much, if any, overhead here as it's just used for the initial scene creation. The actual animation is often done inside this tree, without triggering a React re-render. It's common to see React Three Fiber code that mutates transformation and position properties using a custom frame callback.

Declarative Scenes and Simulators

Rather than creating our own component model standard under P5.js, with React we have a ready made framework for reusing primitives, along with a declarative way of describing the scene or a full simulator. There are plenty of libraries available providing these building blocks.

For example, it's simple enough to use the existing Text component from Drei, along with with RoundedBox and create a versatile labeled block, a foundational piece of any diagraming tool. And... because this is WebGL, it's very simple to add reflections, a background 'environment' and shadows.

The orange base above is a simple React component with a position and size (we're using [x,y,z] arrays here). The text is placed on the front and center of the block by default.

<TextBlock position={[0, 0, 15]} size={[5, 1, 5]} text="Base" radius={0.2} color="orange" castShadow />

With a bit of component composition it's easy to imagine building a library of common features of design and architectural diagrams.