【HarmonyOS实战开发】使用WebGL绘制图形

场景介绍

WebGL的全称为Web Graphic Library（网页图形库），主要用于交互式渲染2D图形。目前HarmonyOS中使用的WebGL是基于OpenGL裁剪的OpenGL ES，可以在HTML5的Canvas元素对象中使用，无需使用插件，支持跨平台。WebGL程序是由JavaScript代码组成的，其中使用的API可以利用用户设备提供的GPU硬件完成图形渲染和加速。更多信息请参考WebGL™标准。

说明

目前该功能仅支持使用兼容JS的类Web开发范式开发。

基本概念

着色器程序

将缓冲区中的数据推送到着色器中还需涉及“着色器程序”，一个负责关联着色器和缓冲区的JavaScript对象。一个WebGLProgram对象由两个编译过后的 WebGLShader组成，即顶点着色器和片元着色器（均由GLSL语言所写）。

着色器

着色器可以理解为运行在显卡中的指令和数据。在WebGL中，着色器是用OpenGL ES着色语言（GLSL）编写的。

完整的着色器包括顶点着色器和片元着色器。顶点着色器和片元着色器的交互则涉及到图片光栅化。

• 顶点着色器：最基本的任务是接收三维空间中点的坐标，将其处理为二维空间中的坐标并输出。

• 片元着色器：最基本的任务是对需要处理的屏幕上的每个像素输出一个颜色值。

图片光栅化

将顶点着色器输出的二维空间中的点坐标，转化为需要处理的像素并传递给片元着色器的过程。

帧缓冲对象

帧缓冲区对象为绘图缓冲区提供替代呈现目标。它们是颜色、字母、深度和模板缓冲区的集合，通常用于渲染图像。

纹理

纹理是一种图像，可以应用到3D模型的表面上。WebGL中的纹理有许多属性，包括宽度、高度、格式和类型。在使用纹理时，需要将其加载到WebGL中，并将其绑定到一个纹理单元上。

变量与接口说明

变量类型

类型	对应Web IDL类型	描述
GLenum	unsigned long	用于枚举。
GLboolean	boolean	纹理true或者false。
GLbitfield	unsigned long	无符号整数，可以包含多个位标志。每个位标志都代表一个特定的选项
GLbyte	byte	纹理八位（一个字节），2的补码表示的有符号整数。
GLshort	short	16位2的补码表示的有符号整数。
GLint	long	32位2的补码表示的有符号整数。
GLsizei	long	用来描述尺寸（例如：绘画缓冲drawing buffer 的宽和高）。
GLintptr	long long	用来表示指针的特殊类型。
GLsizeiptr	long long	用来表示指针的特殊类型。
GLubyte	octet	八位（一个字节）2的补码表示的无符号整数。
GLushort	unsigned short	16位2的补码表示的无符号整数。
GLuint	unsigned short	32位2的补码表示的有符号整数。
GLfloat	unrestricted flo