场景介绍
WebGL的全称为Web Graphic Library(网页图形库),主要用于交互式渲染2D图形。目前HarmonyOS中使用的WebGL是基于OpenGL裁剪的OpenGL ES,可以在HTML5的Canvas元素对象中使用,无需使用插件,支持跨平台。WebGL程序是由JavaScript代码组成的,其中使用的API可以利用用户设备提供的GPU硬件完成图形渲染和加速。
说明
目前该功能仅支持使用兼容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 float | 32位的IEEE标准的浮点数。 |
GLclampf | unrestricted float | 限值32位IEEE浮点数。 |
接口说明
接口名 | 描述 |
---|---|
canvas.getContext | 获取canvas对象上下文。 |
webgl.createBuffer(): WebGLBuffer | null | 创建与初始化WebGL数据缓冲区。 |
webgl.bindBuffer(target: GLenum, buffer: WebGLBuffer | null): void | 将WebGL数据缓冲区与目标进行绑定。 |
webgl.bufferData(target: GLenum, srcData: ArrayBufferView, usage: GLenum, srcOffset: GLuint, length?: GLuint): void | 创建并初始化WebGL的数据存储区。 |
webgl.getAttribLocation(program: WebGLProgram, name: string): GLint | 从给定WebGL着色程序中获取着色器中attribute变量的地址。 |
webgl.vertexAttribPointer(index GLuint, size: GLint, type: GLenum, normalized: GLboolean, stride: GLsizei, offset: GLintptr): void | 将缓冲区对象分配给变量。 |
webgl.enableVertexAttribArray(index: GLuint): void | 连接变量与分配给它的缓冲区对象。 |
webgl.clearColor(red: GLclampf, green:GLclampf, blue: GLclampf, alpha: GLclampf): void | 清空<canvas>指定的颜色。 |
webgl.clear(mask: GLbitfield): void | 清空<canvas>。 |
webgl.drawArrays(mode: GLenum, first:;GLint, count: GLsizei): void | 执行数据绘制。 |
webgl.flush(): void | 刷新数据至GPU,清空缓冲区。 |
webgl.createProgram(): WebGLProgram | null | 创建着色器程序对象。 |
开发步骤
如下以实现一个彩色正方形为例,来演示使用WebGL绘制2D图形的过程。
-
使用WebGL进行3D渲染前,首先需要一个Canvas元素。以下示例创建了一个Canvas元素并设置一个onclick事件处理程序来初始化WebGL上下文。
<div class="container"> <canvas ref="canvas1" style="width : 400px; height : 400px; background-color : lightyellow;"></canvas> <button class="btn-button" onclick="BtnColorTriangle">BtnColorTriangle</button> </div>
-
设置WebGL的上下文。
-
JavaScript 代码中的 main() 函数将会在文档加载完成之后被调用。它的任务是设置WebGL上下文并开始渲染内容。
-
当获取到canvas之后,会调用getContext函数并向它传递 "webgl" 参数,来尝试获取WebGLRenderingContext。如果浏览器不支持WebGL, getContext将会返回null,如果WebGL上下文成功初始化,变量'gl'会用来引用该上下文。
function main() { const canvas = document.querySelector("#glcanvas"); // 初始化WebGL上下文 const gl = canvas.getContext("webgl"); // 确认WebGL支持性 if (!gl) { alert("你的浏览器、操作系统或硬件等可能不支持WebGL。"); return; } // 使用完全不透明的黑色清除所有图像 gl.clearColor(0.0, 0.0, 0.0, 1.0); // 用上面指定的颜色清除缓冲区 gl.clear(gl.COLOR_BUFFER_BIT); }
-
-
定义顶点着色器。
顶点着色器需要对顶点坐标进行必要的转换,在每个顶点基础上进行其他调整或计算,然后通过将其保存在由GLSL提供的特殊变量中来返回变换后的顶点。
const vsSource = ` attribute vec4 aVertexPosition; uniform mat4 uModelViewMatrix; uniform mat4 uProjectionMatrix; void main() { gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition; } `;
-
定义片段着色器。
片段着色器在顶点着色器处理完图形的顶点后,会被要绘制的每个图形的每个像素点调用一次。
const fsSource = ` void main() { gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0); } `;
-
将着色器传递给WebGL。
定义顶点着色器与片段着色器之后,需要将它们传递给WebGL,并将其编译连接在一起。
如下代码通过调用 loadShader(),为着色器传递类型和来源。创建了两个着色器。然后创建一个附加着色器的程序,将它们连接在一起。如果编译或链接失败,代码将弹出alert。
// 初始化着色器程序,让WebGL知道如何绘制数据 function initShaderProgram(gl, vsSource, fsSource) { const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource); const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource); // 创建着色器程序 const shaderProgram = gl.createProgram(); gl.attachShader(shaderProgram, vertexShader); gl.attachShader(shaderProgram, fragmentShader); gl.linkProgram(shaderProgram); // 如果创建失败,将会弹出alert if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) { alert( "无法初始化着色器程序: " + gl.getProgramInfoLog(shaderProgram), ); return null; } return shaderProgram; } // 创建指定类型的着色器,上传source源码并编译 function loadShader(gl, type, source) { const shader = gl.createShader(type); // 将资源发送到着色器对象 gl.shaderSource(shader, source); // 编译着色器程序 gl.compileShader(shader); // 查看是否编译成功 if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { alert( "编译着色器时出错:" + gl.getShaderInfoLog(shader), ); gl.deleteShader(shader); return null; } return shader; }
-
查找WebGL返回分配的输入位置。
-
在创建着色器程序之后,需要查找WebGL返回分配的输入位置。上述有一个属性和两个Uniform。
-
属性从缓冲区接收值。顶点着色器的每次迭代都从分配给该属性的缓冲区接收下一个值。
-
Uniform类似于JavaScript全局变量。它们在着色器的所有迭代中保持相同的值。由于属性的位置是特定于单个着色器程序的,因此将它们存储在一起以易于传递。
const programInfo = { program: shaderProgram, attribLocations: { vertexPosition: gl.getAttribLocation(shaderProgram, "aVertexPosition"), }, uniformLocations: { projectionMatrix: gl.getUniformLocation(shaderProgram, "uProjectionMatrix"), modelViewMatrix: gl.getUniformLocation(shaderProgram, "uModelViewMatrix"), }, };
-
-
创建缓冲器对象。
-
在画正方形前,需要创建一个缓冲器来存储它的顶点。
-
首先调用gl的成员函数createBuffer()得到缓冲对象并存储在顶点缓冲器。然后调用 bindBuffer() 函数绑定上下文。
-
创建一个Javascript数组去记录每一个正方体的每一个顶点。然后将其转化为WebGL浮点型类型的数组,并将其传到gl对象的bufferData()方法来建立对象的顶点。
function initBuffers(gl) { const positionBuffer = initPositionBuffer(gl); return { position: positionBuffer, }; } function initPositionBuffer(gl) { // 为正方形的位置创建一个缓冲区。 const positionBuffer = gl.createBuffer(); // 选择positionBuffer作为应用缓冲区的位置。 gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); // 创建一个正方形的位置数组。 const positions = [1.0, 1.0, -1.0, 1.0, 1.0, -1.0, -1.0, -1.0]; //将位置列表传递给WebGL以构建形状。 gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW); return positionBuffer; } export { initBuffers };
-
-
渲染场景。
-
用背景色擦除画布,然后建立摄像机透视矩阵。设置45度的视图角度,并且设置一个适合实际图像的宽高比。指定在摄像机距离0.1到100单位长度的范围内的物体可见。
-
加载特定位置,并把正方形放在距离摄像机6个单位的位置。然后,绑定正方形的顶点缓冲到上下文,并配置好,再通过调用drawArrays()方法来画出对象。
function drawScene(gl, programInfo, buffers) { gl.clearColor(0.0, 0.0, 0.0, 1.0); gl.clearDepth(1.0); // 清除所有内容。 gl.depthFunc(gl.LEQUAL); // 清除画布。 gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); //创建透视矩阵用于模拟相机中的透视变形。 const fieldOfView = (45 * Math.PI) / 180; const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight; const zNear = 0.1; const zFar = 100.0; const projectionMatrix = mat4.create(); mat4.perspective(projectionMatrix, fieldOfView, aspect, zNear, zFar); // 将绘制位置设置为标识点,即场景的中心。 const modelViewMatrix = mat4.create(); // 开始绘制正方形。 mat4.translate( modelViewMatrix, // 目标矩阵 modelViewMatrix, // 要转换的矩阵 [-0.0, 0.0, -6.0], ); { const numComponents = 2; const type = gl.FLOAT; const normalize = false; const stride = 0; // 从一组值到下一组值需要多少字节 const offset = 0; gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position); gl.vertexAttribPointer( programInfo.attribLocations.vertexPosition, numComponents, type, normalize, stride, offset, ); gl.enableVertexAttribArray(programInfo.attribLocations.vertexPosition); } gl.useProgram(programInfo.program); gl.uniformMatrix4fv( programInfo.uniformLocations.projectionMatrix, false, projectionMatrix, ); gl.uniformMatrix4fv( programInfo.uniformLocations.modelViewMatrix, false, modelViewMatrix, ); { const offset = 0; const vertexCount = 4; gl.drawArrays(gl.TRIANGLE_STRIP, offset, vertexCount); } } // 告诉WebGL如何从位置中拉出位置缓冲到vertexPosition属性中。 function setPositionAttribute(gl, buffers, programInfo) { const numComponents = 2; const type = gl.FLOAT; const normalize = false; const stride = 0; // 从一组值到下一组值需要多少字节 const offset = 0; gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position); gl.vertexAttribPointer( programInfo.attribLocations.vertexPosition, numComponents, type, normalize, stride, offset, ); gl.enableVertexAttribArray(programInfo.attribLocations.vertexPosition); } export { drawScene };
-
最终实现效果示意如下: