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
$ 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
// scale vertices along the `y-axis` down a bitfor const p of Bunnypositions p1 = p1 - 4 const ctx = const rotation = quatconst material = ctxconst camera = ctxconst frame = ctxconst bunny = ctx geometry: complex: Bunny // requestAnimationFrame loop helper with context injection // the scene drawn every frame { quat }
Comparisons
The following are comparisons for effectively doing the same thing in Axis3D below.
Axis3D
const ctx = const rotation = quatconst geometry = x: 10 y: 10 z: 10const material = ctxconst camera = ctx fov: 60 near: 01 far: 1000const frame = ctxconst mesh = ctx geometry
THREE
const aspect = windowinnerWidth/windowinnerHeightconst near = 01const far = 1000const fov = 60 const renderer = const geometry = 10 10 10const material = color: 0x0000ff wireframe: trueconst camera = fov aspect near faarconst scene = const mesh = geometry material camerapositionz = 5rendererscenedocumentbody { meshrotationy = 05*Date renderer}
Contributors
Docs
TBD
See Also
- regl - Functional WebGL
- glslify - A node.js-style module system for GLSL
- stackgl - Modular WebGL components
- simplicial-complex
License
MIT