As the underlying rendering engine of AntV, G is dedicated to provide consistent and high performance 2D / 3D graphics rendering capabilities for upper layer products, adapting all underlying rendering APIs (Canvas2D / SVG / WebGL / WebGPU / CanvasKit / Node.js) on the web side. In particular, it provides GPGPU support for algorithms suitable for parallel computing in graph scenarios.

Features

Easy-to-use API。The graphics and event system is compatible with DOM Element & Event API, and the animation system is compatible with Web Animations API, which can be adapted to the existing ecology of Web side such as D3, Hammer.js gesture library, etc. at a very low cost.

Support multiple rendering environments。Support Canvas2D / SVG / WebGL / WebGPU / CanvasKit and runtime switching, and also server-side rendering.

High performance rendering and computing。WebGPU-based GPGPU support for parallelizable algorithms. webgpu-graph is a library of graph analysis algorithms using GPU acceleration.

Extensible plug-in mechanism and rich set of plug-ins：

• Rendering Related
  • g-plugin-canvas-renderer Rendering 2D graphics based on Canvas2D.
  • g-plugin-canvaskit-renderer Rendering 2D graphics based on Skia.
  • g-plugin-svg-renderer Rendering 2D graphics based on SVG.
  • g-plugin-device-renderer Rendering 2D graphics based on GPUDevice.
  • g-plugin-html-renderer Rendering DOM with HTML.
  • g-plugin-3d Extended 3D capabilities.
  • g-plugin-rough-canvas-renderer Perform hand-drawn style rendering with rough.js and Canvas2D.
  • g-plugin-rough-svg-renderer Perform hand-drawn style rendering with rough.js and SVG.
• Picking
  • g-plugin-canvas-picker Do picking with Canvas2D and mathematical calculations.
  • g-plugin-svg-picker Do picking with SVG and DOM API.
• Accessibility
  • g-plugin-a11y Provides SEO, screen reader support and keyboard navigation.
• Interaction
  • g-plugin-dom-interaction Binds event listeners with DOM API.
  • g-plugin-control Provides camera interaction for 3D scenes.
  • g-plugin-dragndrop Provides Drag 'n' Drop based on PointerEvents.
• Physics Engine
  • g-plugin-box2d Based on Box2D.
  • g-plugin-matterjs Based on matter.js.
  • g-plugin-physx Based on PhysX.
• Layout Engine
  • g-plugin-yoga Provides Flex layout capabilities based on Yoga.
• GPGPU
  • g-plugin-gpgpu Provides GPGPU capabilities based on WebGPU.
• CSS Selector
  • g-plugin-css-select Supports for retrieval in the scene graph using CSS selectors.

Full API Spec.

Usage

We currently support both CDN and NPM Module usage.

CDN

Import the core and renderer code in UMD format:

<!-- G Core -->
<script
    src="https://unpkg.com/@antv/g/dist/index.umd.min.js"
    type="application/javascript"
></script>
<!-- G Renderers, such as Canvas2D, SVG and WebGL -->
<script
    src="https://unpkg.com/@antv/g-canvas/dist/index.umd.min.js"
    type="application/javascript"
></script>
<!-- <script src="https://unpkg.com/@antv/g-svg/dist/index.umd.min.js" type="application/javascript"></script>
<script src="https://unpkg.com/@antv/g-webgl/dist/index.umd.min.js" type="application/javascript"></script> -->

Then we can use some core objects such as Canvas and Circle under the namespace window.G:

const { Circle, Canvas, CanvasEvent } = window.G;

// create a Canvas2D renderer
const canvasRenderer = new window.G.Canvas2D.Renderer();

// create a canvas
const canvas = new Canvas({
    container: 'container',
    width: 600,
    height: 500,
    renderer: canvasRenderer,
});

// create a Circle
const circle = new Circle({
    style: {
        r: 50,
        fill: '#1890FF',
        stroke: '#F04864',
        lineWidth: 4,
        cursor: 'pointer',
    },
});

// wait for the initialization of Canvas
canvas.addEventListener(CanvasEvent.READY, () => {
    // append a Circle to canvas
    canvas.appendChild(circle);
});

Demo in CodeSandbox

NPM Module

Install core and renderer from NPM：

# Core
$ npm install @antv/g --save

# Canvas2D Renderer
$ npm install @antv/g-canvas --save
# SVG Renderer
$ npm install @antv/g-svg --save
# WebGL Renderer
$ npm install @antv/g-webgl --save

Then we can import some core objects such as Canvas and Circle from @antv/g:

import { Canvas, CanvasEvent, Circle } from '@antv/g';
import { Renderer } from '@antv/g-canvas';

const canvas = new Canvas({
    container: 'container',
    width: 600,
    height: 500,
    renderer: new Renderer(),
});

const circle = new Circle({
    style: {
        r: 50,
        fill: '#1890FF',
        stroke: '#F04864',
        lineWidth: 4,
        cursor: 'pointer',
    },
});

canvas.addEventListener(CanvasEvent.READY, () => {
    canvas.appendChild(circle);
});

DEMO in CodeSandbox

DEMO in StackBlitz