基于WebGL的Canvas元素2D绘制加速

• 作者: 张宇 聂芸 谢贤博 邓红艳
• 来源期刊: 软件
• 学科: 工学
• 关键词: 计算机图形学 WebGL绘制 设计与实现 高性能渲染 HTML5
• 年，卷（期）: 2016,（12）
• 所属期刊栏目: 设计研究与应用
• 页码范围: 146-152
• 页数: 7页
• 分类号: TP391.41
• 字数: 5865字
• 语种: 中文
• DOI: 10.3969/j.issn.1003-6970.2016.12.031

摘要

HTML5中的 Canvas 元素极大地丰富了网页所能呈现的图像信息。Canvas 元素具有两种绘图模式：Canvas2D接口类似于画布，用于渲染2D内容，使用简单，可由浏览器负责硬件加速；WebGL接口类似于OpenGL-ES，负责渲染3d场景，使用复杂，但可以直接使用硬件。当绘制的2D基本图元数量较多时，实时性要求高时，Canvas2D接口性能不足。本文将以WebGL为基础，提出一种优化思想，通过缓冲技术、常量属性化技术、帧间缓存技术、DMA技术，加速不同2D基本图元的绘制。本文对不同的2D图元绘制方式性能进行对比实验，证实以WebGL加速Canvas的2D绘制是可行并且有效的，并且给出一个实际应用实例。