Axis3D

Axis3D is a lightweight functional graphics library built on top of regl. It aims to be compatible with many components within the stack.gl ecosystem. It provides a set of components with sane defaults. It is not intended to replace existing libraries, but instead provide an alternative way for rendering graphics.

This library is heavily inspired by the underlying mechanics of regl and the functional/reactive component patterns introduced in react. The scene graph and transform state is implied by the declarative structure of the components.

Everything is a function that injects a regl context. Vectors and matrices are plain arrays that are compatible with gl-matrix and the like. Axis3D should feel familiar to three.js, but with less features.

Status

Stable - This project is in active development towards 1.0.0

Installation

1$ npm install axis3d

Features

• Everything is a function with predictable output based on some input
• Large focus on shaders with a standard GLSL library
• Reusable components
• Geometry with support for simplicial-complex modules (see: bunny)
• Declarative scene
  • Implicit TRS transform matrix
• regl compatibility
  • Command based (see: regl-commands)
  • Context injection

Example

1import { Geometry, Material, Context, Frame, Mesh } from 'axis3d'
2import { PerspectiveCamera } from 'axis3d/camera'
3import Bunny from 'bunny'
4import quat from 'gl-quat'
5
6// scale vertices along the `y-axis` down a bit
7for (const p of Bunny.positions) { p[1] = p[1] - 4 }
8
9const ctx = new Context()
10const rotation = quat.identity([])
11const material = new Material(ctx)
12const camera = new PerspectiveCamera(ctx)
13const frame = new Frame(ctx)
14const bunny = new Mesh(ctx, {geometry: new Geometry({complex: Bunny})})
15
16// requestAnimationFrame loop helper with context injection
17frame(scene)
18
19// the scene drawn every frame
20function scene({time}) {
21  quat.setAxisAngle(angle, [0, 1, 0], 0.5*time)
22  camera({rotation, position: [0, 0, 5]}() => {
23    material(() => {
24      bunny()
25    })
26  })
27}

Comparisons

The following are comparisons for effectively doing the same thing in Axis3D below.

Axis3D

1import { PerspectiveCamera, Context, Material, Frame, Mesh, } from 'axis3d'
2import { BoxGeometry } from 'axis3d-geometry'
3import quat from 'gl-quat'
4
5const ctx = new Context()
6
7const rotation = quat.identity([])
8const geometry = new BoxGeometry({x: 10, y: 10, z: 10})
9const material = new Material(ctx)
10const camera = new PerspectiveCamera(ctx, {fov: 60, near: 0.1, far: 1000})
11const frame = new Frame(ctx)
12const mesh = new Mesh(ctx, {geometry})
13
14frame(({time}) => {
15  quat.setAxisAngle(rotation, [0, 1, 0], 0.5*time)
16  camera({position: [0, 0, 5]}, () => {
17    material({color: [0, 0, 1]}, () => {
18      mesh({rotation})
19    })
20  })
21})

THREE

1const aspect = window.innerWidth/window.innerHeight
2const near = 0.1
3const far = 1000
4const fov = 60
5
6const renderer = new THREE.WebGLRenderer()
7const geometry = new THREE.BoxGeometry(10, 10, 10)
8const material = new THREE.MeshBasicMaterial({color: 0x0000ff, wireframe: true})
9const camera = new THREE.PerspectiveCamera(fov, aspect, near, faar)
10const scene = new THREE.Scene()
11const mesh = new THREE.Mesh(geometry, material)
12
13camera.position.z = 5
14renderer.setSize(window.innerWidth, window.innerHeight)
15scene.add(mesh)
16document.body.appendChild(renderer.domElement)
17
18frame()
19function frame() {
20  requestAnimationFrame(frame)
21  mesh.rotation.y = 0.5*Date.now()
22  renderer.render(scene, camera)
23}

Contributors

• Joseph Werle
• Vanessa Pyne

Docs

TBD

See Also

• regl - Functional WebGL
• glslify - A node.js-style module system for GLSL
• stackgl - Modular WebGL components
• simplicial-complex

License

MIT