JSPM – @thi.ng/scenegraph@2.0.27

Package Exports

@thi.ng/scenegraph
@thi.ng/scenegraph/anode
@thi.ng/scenegraph/api
@thi.ng/scenegraph/hiccup
@thi.ng/scenegraph/node2
@thi.ng/scenegraph/node3

Readme

npm downloads

[!NOTE] This is one of 210 standalone projects, maintained as part of the @thi.ng/umbrella monorepo and anti-framework.

🚀 Please help me to work full-time on these projects by sponsoring me on GitHub. Thank you! ❤️

About
Status
Related packages
Installation
Dependencies
Usage examples
API
Authors
License

About

Extensible 2D/3D scene graph with @thi.ng/hiccup-canvas support.

Status

ALPHA - bleeding edge / work-in-progress

Search or submit any issues for this package

@thi.ng/hdom-canvas - @thi.ng/hdom component wrapper for declarative canvas scenegraphs
@thi.ng/hiccup - HTML/SVG/XML serialization of nested data structures, iterables & closures
@thi.ng/hiccup-canvas - Hiccup shape tree renderer for vanilla Canvas 2D contexts
@thi.ng/hiccup-svg - SVG element functions for @thi.ng/hiccup & related tooling
@thi.ng/rdom-canvas - @thi.ng/rdom component wrapper for @thi.ng/hiccup-canvas and declarative canvas drawing

Installation

yarn add @thi.ng/scenegraph

ESM import:

import * as sg from "@thi.ng/scenegraph";

Browser ESM import:

<script type="module" src="https://esm.run/@thi.ng/scenegraph"></script>

JSDelivr documentation

For Node.js REPL:

const sg = await import("@thi.ng/scenegraph");

Package sizes (brotli'd, pre-treeshake): ESM: 1.11 KB

Dependencies

Note: @thi.ng/api is in most cases a type-only import (not used at runtime)

Usage examples

Four projects in this repo's /examples directory are using this package:

Description	Live demo	Source
2D scenegraph & shape picking	Demo	Source
2D scenegraph & image map based geometry manipulation	Demo	Source
Basic 2D scenegraph example with pan/zoom functionality	Demo	Source
Minimal shader graph developed during livestream #2	Demo	Source

API

Generated API docs

TODO

Authors

Karsten Schmidt

If this project contributes to an academic publication, please cite it as:

@misc{thing-scenegraph,
  title = "@thi.ng/scenegraph",
  author = "Karsten Schmidt",
  note = "https://thi.ng/scenegraph",
  year = 2016
}

@thi.ng/scenegraph