WebGL2绘制方式

### WebGL图形绘制教程 #### 创建WebGL上下文 为了使用WebGL进行图形绘制，首先需要创建一个`<canvas>`元素，并初始化其WebGL上下文。以下是创建和初始化WebGL上下文的代码示例： ```html <canvas id="myCanvas" width="400" height="400"></canvas> <script> const canvas = document.getElementById('myCanvas'); const gl = canvas.getContext('webgl'); if (!gl) { console.error('无法初始化WebGL'); } </script> ``` 上述代码片段展示了如何通过HTML中的`<canvas>`标签获取WebGL上下文[^3]。 --- #### 设置画布背景颜色 在WebGL中，可以通过调用`gl.clearColor()`方法设置清除颜色，并使用`gl.clear()`方法清空缓冲区。以下是一个简单的例子： ```javascript // 设置清除颜色为浅灰色 (R, G, B, A) gl.clearColor(0.8, 0.8, 0.8, 1.0); // 清除颜色缓冲区 gl.clear(gl.COLOR_BUFFER_BIT); ``` 此部分操作用于准备绘图区域以便后续绘制[^1]。 --- #### 编写顶点着色器与片元着色器 WebGL依赖于着色器程序完成几何体的变换以及像素的颜色计算。下面分别展示顶点着色器和片元着色器的例子： **顶点着色器** ```javascript const vertexShaderSource = ` attribute vec4 aPosition; void main() { gl_Position = aPosition; } `; ``` **片元着色器** ```javascript const fragmentShaderSource = ` precision mediump float; uniform vec4 uFragColor; void main() { gl_FragColor = uFragColor; } `; ``` 这两个着色器分别负责定义顶点位置和指定像素颜色[^5]。 --- #### 初始化着色器程序 将编写的着色器源码加载到WebGL环境中，并链接成完整的着色器程序： ```javascript function createShader(gl, type, source) { const shader = gl.createShader(type); gl.shaderSource(shader, source); gl.compileShader(shader); if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { throw new Error(gl.getShaderInfoLog(shader)); } return shader; } function initShaders(gl, vsSource, fsSource) { const vertexShader = createShader(gl, gl.VERTEX_SHADER, vsSource); const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fsSource); const program = gl.createProgram(); gl.attachShader(program, vertexShader); gl.attachShader(program, fragmentShader); gl.linkProgram(program); if (!gl.getProgramParameter(program, gl.LINK_STATUS)) { throw new Error(gl.getProgramInfoLog(program)); } return program; } const program = initShaders(gl, vertexShaderSource, fragmentShaderSource); gl.useProgram(program); ``` 这段代码实现了着色器的创建、编译及链接过程。 --- #### 绘制简单图形 最后一步是向GPU传递数据并执行实际的绘制命令。以下是如何绘制单个点的示例： ```javascript // 定义顶点坐标 (-0.5, -0.5, 0.0) const vertices = new Float32Array([-0.5, -0.5]); // 将顶点数据上传至显存 const bufferId = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, bufferId); gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); // 获取属性变量的位置并启用它 const positionAttributeLocation = gl.getAttribLocation(program, 'aPosition'); gl.enableVertexAttribArray(positionAttributeLocation); // 配置属性变量 gl.vertexAttribPointer( positionAttributeLocation, 2, // 每次迭代取两个值 (x,y) gl.FLOAT, // 数据类型为浮点数 false, // 是否标准化 0, // 单位之间的偏移量 0 // 数组的第一个单位的偏移量 ); // 设置统一变量颜色 const colorUniformLocation = gl.getUniformLocation(program, 'uFragColor'); gl.uniform4f(colorUniformLocation, 1.0, 0.0, 0.0, 1.0); // 红色 // 执行绘制命令 gl.drawArrays(gl.POINTS, 0, 1); ``` 以上代码完成了从数据传输到最终渲染的一系列步骤。 --- #### 映射坐标系 需要注意的是，在WebGL中使用的规范化设备坐标(NDC)，范围是从(-1,-1)到底右角(+1,+1)[^2]。因此，如果希望图形显示在整个`<canvas>`上，则需调整视口尺寸： ```javascript gl.viewport(0, 0, gl.canvas.width, gl.canvas.height); ``` 这一步骤确保了NDC能够正确映射到屏幕上的物理像素。 --- ### 总结 本节介绍了基于WebGL的基本图形绘制流程，涵盖了上下文初始化、着色器编写、数据绑定以及具体绘制等多个方面。这些知识点构成了进一步学习复杂场景渲染的基础。