mesh-js / mesh.js

A graphics system born for visualization 😘.

Mesh.js

A graphics system born for visualization 😘.

As simple as Canvas2D and as FAST as WebGL/WebGPU.

Why mesh.js

• Blazing fast rendering massive sprites. See our benchmark.
• Cross platform. Support both canvas2d and webgl.
• Support SVG Path.
• Support gradients and filters.
• Support Worker and OffscreenCanvas.

Learn more at meshjs.webgl.group.

Installation

From CDN:

<script src="https://unpkg.com/@mesh.js/core/dist/mesh.js"></script>

Use NPM:

npm i @mesh.js/core --save;

import {Renderer, Figure2D, Mesh2D} from '@mesh.js/core';

Usage

👉🏻 online demo

const {Renderer, Figure2D, Mesh2D} = meshjs;

const canvas = document.querySelector('canvas');
const renderer = new Renderer(canvas);

const figure = new Figure2D();
figure.rect(50, 50, 100, 100);

const mesh1 = new Mesh2D(figure, canvas);
mesh1.setFill({
  color: [1, 0, 0, 1],
});

const mesh2 = new Mesh2D(figure, canvas);
mesh2.setFill({
  color: [0, 0, 1, 1],
});

function update(t) {
  mesh2.setTransform(1, 0, 0, 1, 50, 50);
  mesh2.rotate(t * 0.001 * Math.PI, [150, 150]);
  renderer.drawMeshes([mesh1, mesh2]);
  requestAnimationFrame(update);
}

update(0);

Roadmap

• Complete documentations
• More demos and benchmark.
• Unit tests.
• Figure3D and Mesh3D.
• Optimize mesh compressor.
• WebGPU.
• Work with Worker+OffscreenCanvas.

LICENSE

MIT

mesh.js's Issues

mesh.isPointInStroke & mesh.isPointInFill

Check the point(x, y) is in any of the mesh's triangles or not.

Benchmarks comparison info

Hi! I've noticed you have a "benchmark" point in Roadmap list in readme.

I wanted to share an example. A year ago I've made a simple demo of different canvas engines. And this summer I had a PR with Mesh.js. And it appeared that Mesh.js performs as the fastest library (previously it was Pixi.js that was the fastest one). That's really cool!

https://benchmarks.slaylines.io

Low performance compared to three.js

I tested the performance of mesh.js and three.js by drawing thousands of circles.

• mesh.js demo
• three.js demo

The result shows three.js outperforms mesh.js.
When drawing 10,000 circles, fps of three.js remain around 38.
But mesh.js only has 17 fps.
Do you have any ideas about the reason of performance difference and how to improve mesh.js?

MeshBundle class

const meshBundle = new MeshBundle(meshes);

MeshBundle creates compressed meshDatas, and provide api to handle meshes.

mesh-cloud transformColors

transformColors & Color Filters

feature: filter?

Implement the filters: canvas filter.

See: webgl-image-filter

Maybe we should use canvas2d context to set blur and drop-shadow instead of use shader?

Fix global alpha rendering different between webgl & 2d.

RT

meshjs.org is expired

Register this before someone steals the domain!! I would do it myself and restore the old nameservers/dns records but the server that was pointed at from dns14.hichina.com is also down.

 dig +all www.meshjs.org @dns14.hichina.com

; <<>> DiG 9.11.3-1ubuntu1.13-Ubuntu <<>> +all www.meshjs.org @dns14.hichina.com
;; global options: +cmd
;; Got answer:
;; ->>HEADER<<- opcode: QUERY, status: NOERROR, id: 57654
;; flags: qr aa rd; QUERY: 1, ANSWER: 1, AUTHORITY: 0, ADDITIONAL: 1
;; WARNING: recursion requested but not available

;; OPT PSEUDOSECTION:
; EDNS: version: 0, flags:; udp: 4096
;; QUESTION SECTION:
;www.meshjs.org.                        IN      A

;; ANSWER SECTION:
www.meshjs.org.         600     IN      A       47.91.170.222

$ whois meshjs.org
Domain Name: MESHJS.ORG
Registry Domain ID: D402200000011249644-LROR
Registrar WHOIS Server: whois.pir.org
Registrar URL: http://whois.pir.org/
Updated Date: 2020-10-01T09:30:03Z
Creation Date: 2019-08-24T09:01:59Z
Registry Expiry Date: 2021-08-24T09:01:59Z
Registrar Registration Expiration Date:
Registrar: Alibaba Cloud Computing (Beijing) Co., Ltd.
Registrar IANA ID: 420
Registrar Abuse Contact Email: [email protected]
Registrar Abuse Contact Phone: [phone]
Reseller:
Domain Status: pendingDelete https://icann.org/epp#pendingDelete
Domain Status: serverHold https://icann.org/epp#serverHold
Domain Status: redemptionPeriod https://icann.org/epp#redemptionPeriod
Registrant Organization: Wu Liang
Registrant State/Province: bei jing
Registrant Country: CN
Name Server: EXPIRENS3.HICHINA.COM
Name Server: EXPIRENS4.HICHINA.COM
DNSSEC: unsigned
URL of the ICANN Whois Inaccuracy Complaint Form https://www.icann.org/wicf/)
>>> Last update of WHOIS database: 2020-10-22T04:28:40Z <<<

pir.org is the organization that manages .org domains, and this domain is expired.

Radial gradient

Add mesh.setRadialGradient support.

mesh.setRadialGradient({
  vector: [x0, y0, r0, x1, y1, r1],
  colors: [
    {offset: 0, color: [1, 0, 0, 1]},
    {offset: 1, color: [0, 1, 0, 1]},
  ],
  type: 'fill',
});

renderer.globalTransform

renderer.setGlobalTransform(...m);
renderer.globalTransform(...m);
renderer.globalTranslate(x, y);
renderer.globalRotate(rad, origin);
renderer.globalScale(x, y, origin);
renderer.globalSkew(x, y, origin);

Create and use buffers for compressed meshes.

RT

renderer.grid(rows, cols) & renderer.overlapGrid(rows, cols)

We can use grids model to draw patterns.

There are two types of grids:

• grid
• overlappedGrid

If we use grids, the shader will repeatedly drawing all meshes to each grid.

Implement MeshCloud in webgl context and polyfill it to 2d context.

We use WebGL2 instanced arrays for MeshCloud.

We can implement MeshCloud in WebGL context as well.

There are two ways to do this.

The one is to use ANGLE_instanced_arrays.

The other is to extract meshData and compressed before passing to webgl renderer.

I don't know which is better.

May be we can try both?