WebGL-Html5画布概述

WebGL是基于OpenGL ES 2.0的JavaScript API，它允许在浏览器中使用GPU加速2D和3D图形。在HTML5中，可以通过使用canvas元素设置WebGL上下文实现基于Web的图形渲染。

WebGL的主要特点

WebGL的主要特点如下：

• 在现代图形硬件上进行高性能渲染
• 基于OpenGL ES 2.0 API设计
• 使用JavaScript语言编写
• 可以由浏览器内置或作为插件运行

WebGL的基本结构

WebGL在HTML5中使用canvas元素来设置上下文。要创建一个WebGL上下文，需要使用以下代码片段：

const canvas = document.createElement('canvas');
const gl = canvas.getContext('webgl');

这个代码创建一个新的canvas元素，并将其上下文类型设置为WebGL。如果浏览器不支持WebGL，则返回null。否则，您可以使用此输出对象进行高性能图形渲染。

使用WebGL绘制简单图形

下面是一个使用WebGL绘制三角形的基本例子：

1. 设置canvas元素属性

<canvas id="myCanvas" width="500" height="400"></canvas>

2. 创建WebGL上下文并编写顶点着色器和片段着色器

const canvas = document.getElementById('myCanvas');
const gl = canvas.getContext('webgl');

const vsSource = `
  attribute vec4 aVertexPosition;

  void main() {
    gl_Position = aVertexPosition;
  }
`;

const fsSource = `
  void main() {
    gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
  }
`;

3. 编译并连接顶点着色器和片段着色器

const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vsSource);
gl.compileShader(vertexShader);

const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fsSource);
gl.compileShader(fragmentShader);

const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);

4. 填充缓冲区并绘制三角形

const buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
const vertices = [
  0.0, 0.5, 0.0,
  -0.5, -0.5, 0.0,
  0.5, -0.5, 0.0,
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

const positionAttributeLocation = gl.getAttribLocation(program, 'aVertexPosition');
gl.enableVertexAttribArray(positionAttributeLocation);

const size = 3;
const type = gl.FLOAT;
const normalize = false;
const stride = 0;
const offset = 0;
gl.vertexAttribPointer(positionAttributeLocation, size, type, normalize, stride, offset);

gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

const primitiveType = gl.TRIANGLES;
const offset = 0;
const count = 3;
gl.drawArrays(primitiveType, offset, count);

这个代码片段使用顶点着色器和片段着色器来绘制一个白色的三角形。首先，从canvas元素中获取WebGL上下文，并获取顶点着色器和片段着色器的源代码。然后，顶点着色器将定义如何指定三角形的顶点，片段着色器将定义如何绘制它们。接下来，代码将编译和连接两个着色器，并使用缓冲区指定三角形的顶点。最后，清除画布并使用drawArrays方法绘制三角形。