上车 WebGL —— 绘制基础图形

2023-12-27 08:11:23

上车 WebGL —— 绘制基础图形

WebGL 是一种 JavaScript API，可以用来在浏览器中渲染交互式 3D 图形。它基于 OpenGL ES 2.0 规范，并允许开发人员使用 JavaScript 语言来创建和操纵 3D 场景。WebGL 是一个强大的工具，可以用来创建各种各样的 3D 应用，包括游戏、可视化工具和模拟器。

在本文中，我们将介绍 WebGL 的基础知识，并通过一个简单的示例来演示如何使用 WebGL 来绘制基本图形。

WebGL 的基本概念

WebGL 使用一种叫做着色器语言（shader language）的特殊语言来 3D 场景。着色器语言是一种类似于 C 语言的编程语言，但它专门用于图形渲染。WebGL 有两种类型的着色器：顶点着色器和片元着色器。顶点着色器用于处理顶点数据，而片元着色器用于处理片元数据。

顶点数据是指 3D 模型中的顶点的位置、颜色和法线等信息。片元数据是指 3D 模型中的每个像素的颜色和深度等信息。

WebGL 还使用一种叫做纹理（texture）的技术来提高渲染效率。纹理是一种图像，可以被应用到 3D 模型的表面上，以使模型看起来更加逼真。

绘制基本图形

现在，我们来使用 WebGL 来绘制一个简单的图形——一个三角形。

首先，我们需要创建一个 WebGL 上下文。WebGL 上下文是一个对象，它代表了 WebGL 渲染器。我们可以在 HTML 页面中使用 <canvas> 标签来创建一个 WebGL 上下文。

<canvas id="canvas"></canvas>

接下来，我们需要加载顶点着色器和片元着色器。顶点着色器和片元着色器都是文本文件，它们包含了用着色器语言编写的代码。我们可以使用 fetch() 函数来加载顶点着色器和片元着色器。

fetch("vertexShader.glsl")
  .then((response) => response.text())
  .then((vertexShaderSource) => {
    // 编译顶点着色器
    const vertexShader = gl.createShader(gl.VERTEX_SHADER);
    gl.shaderSource(vertexShader, vertexShaderSource);
    gl.compileShader(vertexShader);

    // 检查顶点着色器是否编译成功
    if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
      console.error("Error compiling vertex shader:", gl.getShaderInfoLog(vertexShader));
    }

    fetch("fragmentShader.glsl")
      .then((response) => response.text())
      .then((fragmentShaderSource) => {
        // 编译片元着色器
        const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
        gl.shaderSource(fragmentShader, fragmentShaderSource);
        gl.compileShader(fragmentShader);

        // 检查片元着色器是否编译成功
        if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
          console.error("Error compiling fragment shader:", gl.getShaderInfoLog(fragmentShader));
        }

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

        // 检查着色器程序是否链接成功
        if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
          console.error("Error linking program:", gl.getProgramInfoLog(program));
        }

        // 使用着色器程序
        gl.useProgram(program);

        // 创建顶点数据
        const vertices = [
          -1.0, -1.0,
          1.0, -1.0,
          0.0, 1.0,
        ];

        // 创建顶点缓冲区对象
        const vertexBufferObject = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, vertexBufferObject);
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

        // 设置顶点属性指针
        const positionAttributeLocation = gl.getAttribLocation(program, "a_position");
        gl.enableVertexAttribArray(positionAttributeLocation);
        gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);

        // 清除画布
        gl.clearColor(0.0, 0.0, 0.0, 1.0);
        gl.clear(gl.COLOR_BUFFER_BIT);

        // 绘制三角形
        gl.drawArrays(gl.TRIANGLES, 0, 3);
      });
  });