logo

G

  • 教程
  • API
  • 示例
  • 插件
  • 所有产品antv logo arrow
  • 6.1.26
  • 画布
    • 简介
    • 初始化参数
    • 场景图能力与生命周期
    • 内置对象
    • 坐标系
    • 画布事件
    • OffscreenCanvas 和服务端渲染
    • CustomElementRegistry
    • 常见问题
  • 渲染器
    • 简介
    • Canvas 渲染器
    • Canvaskit 渲染器
    • SVG 渲染器
    • WebGL 渲染器
    • WebGPU 渲染器
    • 自定义渲染器
  • 相机
    • 简介
    • 相机参数
    • 相机动作
    • 相机动画
  • 事件
    • 简介
    • 事件对象
    • 手势和拖放
    • 常见问题
  • 动画
    • Web Animations API
    • Lottie 动画
  • 基础图形
    • 基础概念
    • DisplayObject
    • Group 图形分组
    • Text 文本
    • Circle 圆形
    • Ellipse 椭圆
    • Rect 矩形
    • Image 图片
    • Line 直线
    • Polygon 多边形
    • Polyline 折线
    • Path 路径
    • HTML 内容
  • 样式系统
    • 简介
    • 继承机制
    • CSS Typed OM
    • CSS Properties & Values API
    • CSS Layout API
    • Pattern
    • Gradient
  • 三维世界
    • 材质
    • 几何
    • 光源
    • Mesh
    • 雾
    • 交互
  • 内置对象
    • EventTarget
    • Node
    • Element
    • Document
    • MutationObserver
    • 工具方法
  • GPGPU
    • 简介
    • 编程模型
    • Kernel API
    • 经典 GPGPU 的实现原理
    • webgpu-graph
  • 声明式用法
    • 使用 Web Components
  • 开发调试工具
    • G 开发者工具
    • 内置的渲染统计信息
    • 第三方开发调试工具

WebGL 渲染器

上一篇
SVG 渲染器
下一篇
WebGPU 渲染器

资源

Ant Design
Galacea Effects
Umi-React 应用开发框架
Dumi-组件/文档研发工具
ahooks-React Hooks 库

社区

体验科技专栏
seeconfSEE Conf-蚂蚁体验科技大会

帮助

GitHub
StackOverflow

more products更多产品

Ant DesignAnt Design-企业级 UI 设计语言
yuque语雀-知识创作与分享工具
EggEgg-企业级 Node 开发框架
kitchenKitchen-Sketch 工具集
GalaceanGalacean-互动图形解决方案
xtech蚂蚁体验科技
© Copyright 2025 Ant Group Co., Ltd..备案号:京ICP备15032932号-38

Loading...

使用 WebGLRenderingContext 或者 WebGL2RenderingContext 渲染。相比 Canvas 渲染器和 SVG 渲染器 拥有更强大的渲染能力,在大规模数量图形以及 3D 场景下有明显的优势。

使用方式

和 @antv/g 一样,也有以下两种使用方式。

NPM Module

安装 @antv/g-webgl 后可以从中获取渲染器:

import { Canvas } from '@antv/g';
import { Renderer } from '@antv/g-webgl';
const webglRenderer = new Renderer();
const canvas = new Canvas({
container: 'container',
width: 600,
height: 500,
renderer: webglRenderer,
});

CDN 方式

<script
src="https://unpkg.com/@antv/g-webgl/dist/index.umd.min.js"
type="application/javascript">

从 G.WebGL 命名空间下可以获取渲染器:

const webglRenderer = new window.G.WebGL.Renderer();

初始化配置

targets

选择渲染环境。默认值为 ['webgl2', 'webgl1'] 并自动按该优先级自动降级。

例如在某些特殊环境下,仅选择在 WebGL1 环境下运行:

const webglRenderer = new WebGLRenderer({
targets: ['webgl1'],
});

onContextLost

如果浏览器检测到与 WebGLRenderingContext 对象关联的图形缓冲区已丢失,则会触发 WebGL API 中的 webglcontextlost 事件,此时 onContextLost 回调函数会被触发:

https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/webglcontextlost_event

const webglRenderer = new WebGLRenderer({
onContextLost: (e: Event) => {},
});

onContextRestored

当 WebGLRenderingContext 恢复时,会触发 webglcontextrestored 事件,此时 onContextRestored 回调函数会被触发:

https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/webglcontextrestored_event

const webglRenderer = new WebGLRenderer({
onContextRestored: (e: Event) => {},
});

onContextCreationError

当 WebGLRenderingContext 创建失败时,会触发 webglcontextcreationerror 事件,此时 onContextCreationError 回调函数会被触发:

https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/webglcontextcreationerror_event

const webglRenderer = new WebGLRenderer({
onContextCreationError: (e: Event) => {},
});

内置插件

该渲染器内置了以下插件:

  • g-plugin-device-renderer 基于 GPUDevice 提供渲染能力
  • g-plugin-webgl-device 基于 WebGLRenderingContext 和 WebGL2RenderingContext 实现 GPUDevice 能力
  • g-plugin-dom-interaction 基于 DOM API 绑定事件

可选插件

除了内置插件,还可以选择以下插件。

3D 渲染能力

g-plugin-3d 提供 3D 渲染能力,包括 Mesh Material Geometry 等常见对象。

相机交互

g-plugin-control 为 3D 场景提供相机交互,内部使用 Hammer.js 响应鼠标移动、滚轮事件。根据不同的 相机类型,提供不同的交互效果。

目前暂不支持的特性

  • filter
  • clipPath
  • lineDash 应用 lineJoin,例如开启 lineJoin: 'round' 后每个小线段都应该有圆角效果