G Graphics Rendering Engine

G is a high-performance 2D/3D graphics rendering engine used by AntV. It provides a consistent API across multiple underlying rendering technologies including Canvas2D, SVG, WebGL, WebGPU, CanvasKit, and Node.js.

Key Features:

• Compatible API: Graphics and event systems are compatible with DOM Element & Event API; animation system is compatible with Web Animations API.
• Multi-environment Support: Supports runtime switching between renderers and server-side rendering.
• High Performance: Includes WebGPU-based GPGPU support for parallelizable algorithms in graph scenarios.
• Extensible Plugin System: A rich ecosystem of plugins for rendering, picking, interaction, physics, layout, and more.

The @antv/g-lite graphics and event system is designed for high compatibility with existing Web ecosystems.

Key features include:

• DOM & Event Compatibility: Compatible with the DOM Element & Event API, allowing easy integration with libraries like D3 or Hammer.js.
• Animation Compatibility: The animation system is compatible with the Web Animations API (WAAPI).

Core abstractions include:

• Canvas: The main drawing surface.
• Camera: Manages the view transformation.
• DisplayObject: The base class for all graphical objects.
• Events: The system for handling user and system interactions.
• Animation: The system for driving temporal changes to properties.

G is a high-performance visualization rendering engine with several key capabilities:

Rendering Environments

Supports Canvas2D, SVG, CanvasKit, WebGL, and WebGPU, with support for runtime switching and Server-Side Rendering (SSR).

Plugin Ecosystem

• Rendering: canvas-renderer, svg-renderer, device-renderer (GPUDevice), html-renderer, canvaskit-renderer (Skia), and g-plugin-3d.
• Interaction & Picking: canvas-picker, svg-picker, dom-interaction, g-plugin-control (3D camera), and g-plugin-dragndrop.
• Physics: g-plugin-box2d, g-plugin-matterjs, and g-plugin-physx.
• Layout: g-plugin-yoga (Flexbox layout).
• GPGPU: g-plugin-gpgpu (WebGPU accelerated).
• Utilities: g-plugin-css-select (CSS selector retrieval in scene graph).

@antv/g-lite provides an easy-to-use API for graphics. Its design philosophy focuses on compatibility with existing Web ecosystems:

• Graphics, Event System, and DOM: Compatible with DOM Element and Event APIs, allowing low-cost integration with libraries like D3 or Hammer.js.
• Animation System: Compatible with the Web Animations API (WAAPI).

To use @antv/g-lite, you must pair it with a Renderer to draw the graphics onto a screen.

import { Canvas, Circle } from '@antv/g-lite';

The @antv/g-canvas package provides a context based on the HTML5 Canvas2D API. It is a specialized implementation of the G engine that integrates three core plugins to provide a complete rendering and interaction experience:

1. canvas-renderer: Uses the Canvas2D context to render various graphical elements.
2. dom-interaction: Listens to browser events and translates them into standard pointer-series events.
3. canvas-picker: Implements element picking (selection/hit detection) based on the Canvas2D API.

The canvas-path-generator plugin provides utilities to draw the paths of various shapes using CanvasRenderingContext2D. This is useful for final rendering or for drawing on off-screen canvases to perform hit testing with isPointInPath().

The plugin exposes two tokens for dependency injection via Syringe:

1. PathGeneratorFactory: A factory function used to retrieve a specific path generator for a given shape.
2. PathGenerator: The type definition for the actual drawing function.

G uses different renderers to draw various graphics via underlying rendering APIs. The available renderers include:

• g-canvas: Based on Canvas2D
• g-canvaskit: Based on Canvaskit / Skia
• g-svg: Based on SVG
• g-webgl: Based on WebGL 2/1
• g-webgpu: Based on WebGPU

A renderer consists of a rendering context and a set of plugins that can be dynamically extended at runtime.

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

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

The svg-renderer allows you to draw various graphics using SVG. It manages the lifecycle of SVGElement objects through the following mechanisms:

• mounted: Uses DOM APIs to create SVGElement instances.
• unmounted: Removes SVGElement instances from the DOM.
• renderFrame: Applies transformations and sets SVGElement attributes for every graphic.
• attributeChanged: Updates SVGElement attributes. Note that if a z-index change occurs, the SVGElement must be reordered in the DOM.