Code: Three.js Traversible Nodes

November 2021

A long time ago I took a stab at making my own small js library for WebGL development. That taught me a ton but in this modern world, the people developing three.js vastly surpass in their time what you can roll on your own in yours. They made all the classes. I toyed with three.js back in 2016 but quickly reached limits with what was renderable on my old hardware (TBH my current setup is a 2012 macbookpro w/8g m and a 128 SSD…super representative). Since then, they added a class called InstancedMesh which puts the rendering lift of many individual 3d forms directly on the computer’s GPU. Enter BufferGeometry.

The first example is my first implementation of the three.js InstancedMesh class. It renders 4096 “reasonably complex” elements (at 22fps on my setup) with rotations in more or less real time.

The second example builds on that with some other fun stuff. The fun stuff includes a use of their(three.js) SVGLoader class-> the ambition being loading SVG’s directly into a WebGL context which, as you can imagine, is stupid enticing for a person that’s done unimaginable amounts of work in illustrator. It is a traversible space; exploring in 3d the same multiple-choice narrative strategy as the AEROSOL project does in 2d.

Example 1: https://scottandrecampbell.com/static/base.html

These are the the pulps (still wip):

Example 2: https://scottandrecampbell.com/static/index-nice.html (desktop for full events)

PS: WebGL is a rasterization engine (not orthodox here, look for more vector-based solutions) :).

Leave a Reply

Your email address will not be published.