WebGL 入门

创作时间:

作者:

@小白创作中心

WebGL 入门

引用

CSDN

https://m.blog.csdn.net/qq_34820371/article/details/143264002

WebGL是一种在浏览器中渲染3D图形的技术，使开发者可以通过JavaScript创建互动的3D场景。本文将带你快速入门WebGL，帮助你了解其基础原理并创建一个简单的3D应用。

1. 什么是 WebGL？

WebGL（Web Graphics Library）是基于OpenGL ES 2.0的一个JavaScript API，支持在浏览器中绘制2D和3D图形。它与HTML5完全兼容，适用于Chrome、Firefox、Safari等主流浏览器，无需插件即可渲染高质量图形。通过WebGL，开发者可以实现：

3D渲染：创建复杂的3D场景和模型。
硬件加速：通过GPU渲染，提供高性能图形处理。
跨平台：支持跨平台的网页和Web应用图形渲染。

2. WebGL 工作原理

WebGL的核心原理是使用GPU进行渲染，它通过OpenGL的着色器编程来实现图形绘制。WebGL的渲染过程主要包括以下几个步骤：

创建上下文：使用JavaScript创建WebGL渲染上下文（WebGLRenderingContext）。
加载着色器：定义顶点着色器和片段着色器，控制图形的形状和颜色。
缓冲区管理：定义和加载顶点数据到缓冲区。
绘制图形：调用WebGL API绘制出图形并将其显示在画布上。

3. 创建一个简单的 WebGL 程序

我们将使用WebGL创建一个简单的彩色三角形，以帮助你理解WebGL的基础用法。

步骤 1：设置 HTML 画布

在HTML文件中添加一个用于渲染的<canvas>元素：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WebGL 入门</title>
  </head>
  <body>
    <canvas id="glcanvas" width="640" height="480"></canvas>
    <script src="webgl.js"></script>
  </body>
</html>

步骤 2：初始化 WebGL 上下文

创建webgl.js文件，用于初始化WebGL上下文并配置画布：

const canvas = document.getElementById('glcanvas');
const gl = canvas.getContext('webgl');
if (!gl) {
  console.error('WebGL 初始化失败，浏览器可能不支持 WebGL。');
}

步骤 3：定义着色器

编写顶点着色器和片段着色器代码，并将其加载到WebGL程序中。顶点着色器负责定义三角形的三个顶点位置，而片段着色器定义顶点的颜色：

// 顶点着色器源码
const vertexShaderSource = `
    attribute vec2 a_position;
    void main() {
        gl_Position = vec4(a_position, 0, 1);
    }
`;
// 片段着色器源码
const fragmentShaderSource = `
    precision mediump float;
    uniform vec4 u_color;
    void main() {
        gl_FragColor = u_color;
    }
`;

步骤 4：编译和连接着色器

将着色器代码编译为WebGL程序，以便在GPU中运行：

function createShader(gl, type, source) {
  const shader = gl.createShader(type);
  gl.shaderSource(shader, source);
  gl.compileShader(shader);
  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
    console.error('着色器编译失败：', gl.getShaderInfoLog(shader));
    gl.deleteShader(shader);
    return null;
  }
  return shader;
}
const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
const fragmentShader = createShader(
  gl,
  gl.FRAGMENT_SHADER,
  fragmentShaderSource,
);
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
  console.error('程序链接失败：', gl.getProgramInfoLog(program));
}
gl.useProgram(program);

步骤 5：创建三角形顶点数据

将三角形的顶点位置传入WebGL的缓冲区：

const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
const positions = [0, 1, -1, -1, 1, -1];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

步骤 6：将数据绑定到着色器属性并绘制图形

最后，绑定顶点数据，并通过WebGL绘制出三角形：

const positionAttributeLocation = gl.getAttribLocation(program, 'a_position');
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);
const colorUniformLocation = gl.getUniformLocation(program, 'u_color');
gl.uniform4f(colorUniformLocation, 0, 0.5, 0.5, 1); // 设置颜色
gl.clearColor(0, 0, 0, 0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES, 0, 3);