零基础也能懂WebGL（一）

前端

2023-11-26 21:19:09

引言

WebGL是一种强大的技术，它允许开发者在浏览器中创建交互式3D图形。虽然掌握WebGL可能看起来很困难，但通过理解其基础知识，即使是初学者也能轻松入门。

GPU 与 CPU

要理解WebGL，首先需要了解GPU（图形处理单元）与CPU（中央处理单元）之间的区别。CPU负责处理计算机的整体操作，而GPU则专门设计用于处理图形数据。GPU具有大量的并行处理器，使其能够快速有效地处理大量数据。

GLSL 语言

WebGL使用GLSL（OpenGL着色器语言）编写代码，这是一种专门设计用于编写GPU代码的语言。GLSL允许开发者创建着色器，这些着色器是定义如何处理图形数据的小程序。

着色器基础

着色器有两种主要类型：

顶点着色器： 处理顶点数据，例如位置和颜色。
片元着色器： 处理像素数据，例如颜色和纹理。

着色器包含两种主要函数：

主函数： 处理图形数据。
内置函数： 提供额外的功能，例如数学运算和纹理映射。

WebGL 的本质

WebGL本质上是一个JavaScript API，它允许开发者与浏览器中的GPU进行交互。通过编写GLSL着色器并使用WebGL API，开发者可以创建交互式3D图形，而无需安装额外的软件或插件。

步骤：

创建画布元素： 创建 <canvas> 元素并将其添加到页面中。
获取 WebGL 上下文： 使用 canvas.getContext("webgl") 获取 WebGL 上下文。
创建着色器程序： 创建顶点和片元着色器并将其链接到着色器程序中。
设置顶点数据： 创建一个包含顶点数据的缓冲区对象 (VBO)。
绘制图形： 使用 drawArrays() 或 drawElements() 方法绘制图形。

示例：

// 创建画布元素
const canvas = document.createElement('canvas');

// 获取 WebGL 上下文
const gl = canvas.getContext('webgl');

// 创建顶点着色器
const vertexShaderSource = `
    attribute vec3 position;
    void main() {
        gl_Position = vec4(position, 1.0);
    }
`;
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);

// 创建片元着色器
const fragmentShaderSource = `
    void main() {
        gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
    }
`;
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);

// 创建着色器程序
const shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);

// 创建顶点数据
const vertices = [
    -0.5, -0.5, 0.0,
    0.5, -0.5, 0.0,
    0.0, 0.5, 0.0,
];
const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

// 绑定顶点数据到顶点着色器
const positionAttributeLocation = gl.getAttribLocation(shaderProgram, 'position');
gl.enableVertexAttribArray(positionAttributeLocation);
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.vertexAttribPointer(positionAttributeLocation, 3, gl.FLOAT, false, 0, 0);

// 绘制图形
gl.useProgram(shaderProgram);
gl.drawArrays(gl.TRIANGLES, 0, 3);