spritejs.org

Spritejs is a cross platform high-performance graphics system, which can render graphics on web, node, desktop applications and mini-programs.

Spritejs^Next is the new version of spritejs. It is renderer agnostic enabling the same api to render in multiple contexts: webgl2, webgl, and canvas2d.

Manipulate the sprites in canvas as you do with the DOM elements.

Features

• Manipulate the sprites element as you do with the DOM elements.
• Rendering by WebGL2 context.
• Multiple layers.
• DOM Events.
• Object Oriented Programmed Development with ES6+.
• OffscreenCanvas and Web Worker.
• Work with d3.
• Server-side rendering.
• Vue.

Quick Start

SpriteJS - spritejs.org

Usage

In browser:

With Node.js:

npm install spritejs --save

import * as spritejs from 'spritejs';

3D

SpriteJS^Next can render 3D elements through 3D extension library.

Or from NPM

import {Scene} from 'spritejs';
import {Cube, shaders} from 'sprite-extend-3d';

Examples

Basic

• Overview
• Sprites
• Path & Group
• Labels
• Button
• Transforms
• Events
• Filters
• Animations
• SVG Paths
• Offset API

With D3

Compatible with d3.js.

• Bar Graph
• Hierarchy
• Map
• Force Links

3D Extension

• 3D Cube
• Camera
• Cube Map
• Physically Based Rendering
• Geometry
• Geometry Model
• Model & Texture
• Groups
• Skydom
• Video
• Shadow
• Post channel
• GPGPU

Q-Charts

A visulization library based on spritejs.

• QCharts basic
• Lines
• Smooth Lines
• Lines & Bars
• Area Chart
• Pie Chart
• Rose Chart
• Radar Chart
• Bubble Chart

Ecosystem & Extensions

| Project | Description | | ------------------------------- | ----------------------------------- | | sprite-vue| SpriteJS for Vue.js. | | sprite-react| Rendering spritejs elements with React. | | q-charts | A visulization library based on spritejs | | cat-charts-vue| A visulization library based on spritejs , qcharts and Vue. |

Architecture

Spritejs^Next provides several kinds of basic sprite elements, which can be operated on the layer like DOM elements.

Build

Build with NPM

npm run build

Build Doc

npm run build-doc

Tests

npm test

V2

SpriteJS v2.0

Compatibility

Compatible for most modern browsers.

You should import babel-polyfill for early browers(i.e. iOS 8).

Contributors

Thanks goes to these wonderful people (emoji key):

| | | | | | | | | :---: | :---: | :---: | :---: | :---: | :---: | :---: | |
_betseyliu
💻 📖 |
_Shero0311
📖 |
_有马
📖 💻|
_文蔺
💻 🐛 |
_蔡斯杰
💻 📖 |
_{Shaofei Cheng}
💻 📖 |
_摇太阳
📖
|
_公子
💻 |
_justemit
💻 📖 🐛 |
_{Welefen Lee}
💻 |
_YUPENG12138
📖|
_xinde
🐛|
_ggvswild
🐛|
_liulinboyi
💻| |
_Lulzx
💻 |
_asidar
💻 |
_alphatr
💻 |
_W-Qing
📖 |

Credits and Acknowledgements

• svg-path-contours Approximates an SVG path into a discrete list of 2D contours (polylines).

• extrude-polyline Extrudes a 2D polyline with a given line thickness and the desired join/cap types.

• triangulate-contours Triangulates a series of contours using Tess2.js.

• OGL OGL is a small, effective WebGL library aimed at developers who like minimal layers of abstraction, and are comfortable creating their own shaders.

License

MIT