Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/spritejs/spritejs

A cross platform high-performance graphics system.
https://github.com/spritejs/spritejs

2d 3d canvas rendering webgl webgl2

Last synced: 5 days ago
JSON representation

A cross platform high-performance graphics system.

Host: GitHub
URL: https://github.com/spritejs/spritejs
Owner: spritejs
License: mit
Created: 2017-07-05T07:04:45.000Z (over 7 years ago)
Default Branch: master
Last Pushed: 2024-06-09T14:25:58.000Z (7 months ago)
Last Synced: 2024-12-31T00:07:49.566Z (12 days ago)
Topics: 2d, 3d, canvas, rendering, webgl, webgl2
Language: JavaScript
Homepage: http://spritejs.com
Size: 40.8 MB
Stars: 5,346
Watchers: 109
Forks: 324
Open Issues: 75
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

awesome - spritejs/spritejs - A cross platform high-performance graphics system. (JavaScript)
awesome-github-star - spritejs - performance graphics system. | spritejs | 5245 | (JavaScript)
awesome-made-by-chinese - spritejs

README

        


  



spritejs.com


[![npm status](https://img.shields.io/npm/v/spritejs.svg)](https://www.npmjs.org/package/spritejs)

[![build status](https://api.travis-ci.org/spritejs/spritejs.svg?branch=master)](https://travis-ci.org/spritejs/spritejs)

[![Package Quality](http://npm.packagequality.com/shield/spritejs.svg?v=3)](http://packagequality.com/#?package=spritejs)

[![Maintainability](https://api.codeclimate.com/v1/badges/8327f502ee8ba003c6b8/maintainability)](https://codeclimate.com/github/spritejs/spritejs/maintainability)

[![License](https://img.shields.io/npm/l/spritejs.svg)](LICENSE)

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](https://spritejs.com/#/en/guide/worker).

- Work with [d3](https://github.com/d3/d3).

- [Server-side rendering](https://spritejs.com/#/en/guide/platforms).

- [Vue](http://vue.spritejs.com).

## Quick Start

**SpriteJS** - spritejs.com

```html



    const imgUrl = 'https://s5.ssl.qhres2.com/static/ec9f373a383d7664.svg'

    const {Scene, Sprite} = spritejs;

    const container = document.getElementById('container');

    const paper = new Scene({

      container,

      width: 400,

      height: 400,

    })

    const sprite = new Sprite(imgUrl)

    sprite.attr({

      bgcolor: '#fff',

      pos: [0, 0],

      size: [400, 400],

      borderRadius: '200'

    })

    paper.layer().appendChild(sprite)

```

Learn more at spritejs.com 


## Usage

In browser:

```html

```

With Node.js:

```bash

npm install spritejs --save

```

```js

import * as spritejs from 'spritejs';

```

## 3D

SpriteJS^Next can render 3D elements through [3D extension library](https://github.com/spritejs/sprite-extend-3d).

```html

```

Or from NPM

```js

import {Scene} from 'spritejs';

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

```

## Examples

### Basic

- [Overview](http://spritejs.com/demo/)

- [Sprites](http://spritejs.com/demo/#basic_sprites)

- [Path & Group](http://spritejs.com/demo/#path_groups)

- [Labels](http://spritejs.com/demo/#labels)

- [Button](http://spritejs.com/demo/#button)

- [Transforms](http://spritejs.com/demo/#transforms)

- [Events](http://spritejs.com/demo/#events)

- [Filters](http://spritejs.com/demo/#filters)

- [Animations](http://spritejs.com/demo/#animations)

- [SVG Paths](http://spritejs.com/demo/#svg_path)

- [Offset API](http://spritejs.com/demo/#offset_api)

### With D3

Compatible with [d3.js](https://github.com/d3/d3).

- [Bar Graph](http://spritejs.com/demo/#/d3/bar)

- [Hierarchy](http://spritejs.com/demo/#/d3/hierarchy)

- [Map](http://spritejs.com/demo/#/d3/map)

- [Force Links](http://spritejs.com/demo/#/d3/links)

### 3D Extension

- [3D Cube](http://spritejs.com/demo/#/3d/basic)

- [Camera](http://spritejs.com/demo/#/3d/camera2)

- [Cube Map](http://spritejs.com/demo/#/3d/cubemap)

- [Physically Based Rendering](http://spritejs.com/demo/#/3d/pbr)

- [Geometry](http://spritejs.com/demo/#/3d/geometry)

- [Geometry Model](http://spritejs.com/demo/#/3d/geometry3)

- [Model & Texture](http://spritejs.com/demo/#/3d/model_texture)

- [Groups](http://spritejs.com/demo/#/3d/group3)

- [Skydom](http://spritejs.com/demo/#/3d/skydom)

- [Video](http://spritejs.com/demo/#/3d/video)

- [Shadow](http://spritejs.com/demo/#/3d/shadow)

- [Post channel](http://spritejs.com/demo/#/3d/post)

- [GPGPU](http://spritejs.com/demo/#/3d/gpgpu)

### [Q-Charts](https://github.com/spritejs/q-charts)

A visulization library based on spritejs.

- [QCharts basic](https://www.qcharts.cn/#/demo/line/default)

- [Lines](https://www.qcharts.cn/#/demo/line/multi)

- [Smooth Lines](https://www.qcharts.cn/#/demo/line/smooth)

- [Lines & Bars](https://www.qcharts.cn/#/more/line-mixLineAndBar)

- [Area Chart](https://www.qcharts.cn/#/demo/area/stack)

- [Pie Chart](https://www.qcharts.cn/#/demo/pie/default)

- [Rose Chart](https://www.qcharts.cn/#/demo/polarBar/group)

- [Radar Chart](https://www.qcharts.cn/#/demo/radar/default)

- [Bubble Chart](https://www.qcharts.cn/#/demo/scatter/bubble)

### Ecosystem & Extensions

| **Project**                         | **Description**                           |

| ------------------------------- | ----------------------------------- |

| [sprite-vue](https://github.com/spritejs/sprite-vue)| SpriteJS for Vue.js. |

| [sprite-react](https://github.com/spritejs/sprite-react)| Rendering spritejs elements with React. |

| [q-charts](https://github.com/spritejs/q-charts) | A visulization library based on spritejs |

| [cat-charts-vue](https://github.com/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.

![架构图](https://s0.ssl.qhres2.com/static/fe2ee3b6fd1aa59f.svg)

### Build

Build with NPM

```bash

npm run build

```

Build Doc

```bash

npm run build-doc

```

### Tests

```bash

npm test

```

# V2

[SpriteJS v2.0](https://github.com/spritejs/spritejs/tree/v2)

# Compatibility

Compatible for most modern browsers.

You should import [babel-polyfill](https://cdn.baomitu.com/babel-polyfill) for early browers(i.e. iOS 8).

## Contributors

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

| | | | | | | |

| :---: | :---: | :---: | :---: | :---: | :---: | :---: |

| [
_betseyliu](https://github.com/betseyliu)
[💻](https://github.com/spritejs/spritejs/commits?author=betseyliu "Code") [📖](https://github.com/spritejs/spritejs/commits?author=betseyliu "Documentation") | [
_Shero0311](https://github.com/Shero0311)
[📖](https://github.com/spritejs/spritejs/commits?author=Shero0311 "Documentation") | [
_有马](https://github.com/makeco)
[📖](https://github.com/spritejs/spritejs/commits?author=makeco "Documentation") [💻](https://github.com/spritejs/spritejs/commit/e2ef39bafd81ee09494f5ebbaf0f8319dbd85122 "Code")| [
_文蔺](https://github.com/AngusFu)
[💻](https://github.com/spritejs/spritejs/commits?author=AngusFu "Code") [🐛](https://github.com/spritejs/spritejs/issues/30 "Bug reports") | [
_蔡斯杰](https://github.com/SijieCai)
[💻](https://github.com/spritejs/sprite-core/commits?author=SijieCai "Code") [📖](https://github.com/spritejs/spritejs/commits?author=SijieCai "Documentation") | [
_{Shaofei Cheng}](https://github.com/wintercn)
[💻](https://github.com/spritejs/sprite-core/commits?author=wintercn "Code") [📖](https://github.com/spritejs/spritejs/commits?author=wintercn "Documentation") | [
_摇太阳](https://github.com/yaotaiyang)
[📖](https://github.com/spritejs/spritejs/commits?author=yaotaiyang "Documentation")  

| [
_公子](https://github.com/lizheming)
[💻](https://github.com/spritejs/sprite-core/commits?author=lizheming "Code") |  [
_justemit](https://github.com/justemit)
[💻](https://github.com/spritejs/sprite-extend-shapes/commits?author=justemit "Code")  [📖](https://github.com/spritejs/sprite-extend-shapes/commits?author=justemit "Documentation") [🐛](https://github.com/spritejs/sprite-core/issues/34 "Bug reports") | [
_{Welefen Lee}](https://github.com/welefen)
[💻](https://github.com/spritejs/sprite-flex-layout "Code")   | [
_YUPENG12138](https://github.com/YUPENG12138)
[📖](https://github.com/spritejs/spritejs/issues/52 "Documentation")| [
_xinde](https://github.com/xinde)
[🐛](https://github.com/spritejs/spritejs/issues/59 "Bug reports")| [
_ggvswild](https://github.com/ggvswild)
[🐛](https://github.com/spritejs/spritejs/issues/70 "Bug reports")| [
_liulinboyi](https://github.com/liulinboyi)
[💻](https://github.com/spritejs/spritejs/commits?author=liulinboyi "Code")|

| [
_Lulzx](https://github.com/Lulzx)
[💻](https://github.com/spritejs/sprite-core/commits?author=Lulzx "Code") |  [
_asidar](https://github.com/asidar)
[💻](https://github.com/spritejs/sprite-extend-shapes/commits?author=asidar "Code")  | [
_alphatr](https://github.com/alphatr)
[💻](https://github.com/spritejs/sprite-extend-shapes/commits?author=alphatr "Code")   | [
_W-Qing](https://github.com/W-Qing)
[📖](https://github.com/spritejs/spritejs/commits?author=W-Qing "Documentation") |

## Credits and Acknowledgements

- [svg-path-contours](https://github.com/mattdesl/svg-path-contours) Approximates an SVG path into a discrete list of 2D contours (polylines). 

- [extrude-polyline](https://github.com/mattdesl/extrude-polyline) Extrudes a 2D polyline with a given line thickness and the desired join/cap types. 

- [triangulate-contours](https://github.com/mattdesl/triangulate-contours) Triangulates a series of contours using Tess2.js. 

- [OGL](https://github.com/oframe/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](LICENSE)