axis3d
Minimal functional graphics library.
Last updated 3 years ago by werle .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install axis3d 
SYNC missed versions from official npm registry.

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

Example

import { Geometry, Material, Context, Frame, Mesh } from 'axis3d'
import { PerspectiveCamera } from 'axis3d/camera'
import Bunny from 'bunny'
import quat from 'gl-quat'

// scale vertices along the `y-axis` down a bit
for (const p of Bunny.positions) { p[1] = p[1] - 4 }

const ctx = new Context()
const rotation = quat.identity([])
const material = new Material(ctx)
const camera = new PerspectiveCamera(ctx)
const frame = new Frame(ctx)
const bunny = new Mesh(ctx, {geometry: new Geometry({complex: Bunny})})

// requestAnimationFrame loop helper with context injection
frame(scene)

// the scene drawn every frame
function scene({time}) {
  quat.setAxisAngle(angle, [0, 1, 0], 0.5*time)
  camera({rotation, position: [0, 0, 5]}() => {
    material(() => {
      bunny()
    })
  })
}

Comparisons

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

Axis3D

import { PerspectiveCamera, Context, Material, Frame, Mesh, } from 'axis3d'
import { BoxGeometry } from 'axis3d-geometry'
import quat from 'gl-quat'

const ctx = new Context()

const rotation = quat.identity([])
const geometry = new BoxGeometry({x: 10, y: 10, z: 10})
const material = new Material(ctx)
const camera = new PerspectiveCamera(ctx, {fov: 60, near: 0.1, far: 1000})
const frame = new Frame(ctx)
const mesh = new Mesh(ctx, {geometry})

frame(({time}) => {
  quat.setAxisAngle(rotation, [0, 1, 0], 0.5*time)
  camera({position: [0, 0, 5]}, () => {
    material({color: [0, 0, 1]}, () => {
      mesh({rotation})
    })
  })
})

THREE

const aspect = window.innerWidth/window.innerHeight
const near = 0.1
const far = 1000
const fov = 60

const renderer = new THREE.WebGLRenderer()
const geometry = new THREE.BoxGeometry(10, 10, 10)
const material = new THREE.MeshBasicMaterial({color: 0x0000ff, wireframe: true})
const camera = new THREE.PerspectiveCamera(fov, aspect, near, faar)
const scene = new THREE.Scene()
const mesh = new THREE.Mesh(geometry, material)

camera.position.z = 5
renderer.setSize(window.innerWidth, window.innerHeight)
scene.add(mesh)
document.body.appendChild(renderer.domElement)

frame()
function frame() {
  requestAnimationFrame(frame)
  mesh.rotation.y = 0.5*Date.now()
  renderer.render(scene, camera)
}

Contributors

Docs

TBD

See Also

License

MIT

Current Tags

  • 0.6.4                                ...           latest (3 years ago)

46 Versions

  • 0.6.4                                ...           3 years ago
  • 0.6.3                                ...           3 years ago
  • 0.6.2                                ...           3 years ago
  • 0.6.1                                ...           3 years ago
  • 0.6.0                                ...           3 years ago
  • 0.5.2                                ...           3 years ago
  • 0.5.1                                ...           3 years ago
  • 0.5.0                                ...           3 years ago
  • 0.4.1                                ...           3 years ago
  • 0.4.0                                ...           3 years ago
  • 0.3.12                                ...           3 years ago
  • 0.3.11                                ...           3 years ago
  • 0.3.10                                ...           3 years ago
  • 0.3.9                                ...           3 years ago
  • 0.3.8                                ...           3 years ago
  • 0.3.7                                ...           3 years ago
  • 0.3.6                                ...           3 years ago
  • 0.3.5                                ...           3 years ago
  • 0.3.4                                ...           3 years ago
  • 0.3.3                                ...           3 years ago
  • 0.3.1                                ...           3 years ago
  • 0.1.13                                ...           4 years ago
  • 0.1.12                                ...           4 years ago
  • 0.1.11                                ...           4 years ago
  • 0.1.10                                ...           4 years ago
  • 0.1.9                                ...           4 years ago
  • 0.1.8                                ...           4 years ago
  • 0.1.7                                ...           4 years ago
  • 0.1.6                                ...           4 years ago
  • 0.1.5                                ...           4 years ago
  • 0.1.4                                ...           4 years ago
  • 0.1.3                                ...           4 years ago
  • 0.1.2                                ...           4 years ago
  • 0.1.1                                ...           4 years ago
  • 0.1.0                                ...           4 years ago
  • 0.0.13                                ...           4 years ago
  • 0.0.12                                ...           4 years ago
  • 0.0.11                                ...           4 years ago
  • 0.0.10                                ...           4 years ago
  • 0.0.8                                ...           4 years ago
  • 0.0.9                                ...           4 years ago
  • 0.0.6                                ...           4 years ago
  • 0.0.5                                ...           4 years ago
  • 0.0.4                                ...           4 years ago
  • 0.0.3                                ...           4 years ago
  • 0.0.1                                ...           4 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 1
Last Day 0
Last Week 1
Last Month 1
Dependencies (29)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |