返回

使用WebGL原生技术打造炫酷3D矩形

前端

一、WebGL简介

WebGL（全称Web Graphics Library）是一种3D图形API，它允许您在网页上创建和渲染高质量的3D图形。WebGL基于OpenGL ES 2.0规范，可以在各种设备上运行，包括台式机、笔记本电脑、智能手机和平板电脑。

二、WebGL基本概念

在学习如何使用WebGL原生技术之前，我们先来了解一些基本概念。

  • 顶点着色器 ：顶点着色器是一种程序，用于处理每个顶点的数据。它可以执行各种操作，如变换顶点的位置、颜色和纹理坐标。
  • 片元着色器 ：片元着色器是一种程序，用于处理每个片元（像素）的数据。它可以执行各种操作，如计算片元的颜色、透明度和深度。
  • 变换矩阵 ：变换矩阵是一种矩阵，用于将顶点从模型空间变换到世界空间、从世界空间变换到观察空间，以及从观察空间变换到裁剪空间。
  • 缓冲对象 ：缓冲对象是一种数据结构，用于存储顶点数据、索引数据和纹理数据。

三、使用WebGL原生技术绘制矩形

现在，我们已经了解了WebGL的基本概念，就可以开始使用WebGL原生技术绘制矩形了。

  1. 创建WebGL上下文

首先，我们需要创建一个WebGL上下文。WebGL上下文是WebGL API的实例，它允许我们与WebGL进行交互。

const canvas = document.getElementById('webgl-canvas');
const gl = canvas.getContext('webgl');
  1. 创建顶点着色器

接下来，我们需要创建一个顶点着色器。顶点着色器是一个GLSL程序，它将顶点数据转换为裁剪空间坐标。

attribute vec3 position;

uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;

void main() {
  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
  1. 创建片元着色器

然后，我们需要创建一个片元着色器。片元着色器是一个GLSL程序，它将裁剪空间坐标转换为屏幕坐标，并计算片元颜色。

precision mediump float;

uniform vec4 color;

void main() {
  gl_FragColor = color;
}
  1. 创建程序对象

程序对象是顶点着色器和片元着色器的集合。我们需要将顶点着色器和片元着色器链接到程序对象中，才能使用它们。

const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
  1. 创建缓冲对象

接下来，我们需要创建两个缓冲对象，一个用于存储顶点数据，一个用于存储索引数据。

const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

const indexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);
  1. 配置顶点属性

现在，我们需要配置顶点属性。顶点属性告诉WebGL如何解释顶点数据。

const positionAttributeLocation = gl.getAttribLocation(program, 'position');
gl.enableVertexAttribArray(positionAttributeLocation);
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.vertexAttribPointer(positionAttributeLocation, 3, gl.FLOAT, false, 0, 0);
  1. 配置变换矩阵

接下来，我们需要配置变换矩阵。变换矩阵告诉WebGL如何将顶点从模型空间变换到世界空间、从世界空间变换到观察空间，以及从观察空间变换到裁剪空间。

const modelViewMatrix = gl.getUniformLocation(program, 'modelViewMatrix');
const projectionMatrix = gl.getUniformLocation(program, 'projectionMatrix');

gl.uniformMatrix4fv(modelViewMatrix, false, new Float32Array(modelViewMatrixData));
gl.uniformMatrix4fv(projectionMatrix, false, new Float32Array(projectionMatrixData));
  1. 设置颜色

最后，我们需要设置颜色。颜色告诉WebGL如何计算片元颜色。

const colorUniformLocation = gl.getUniformLocation(program, 'color');
gl.uniform4fv(colorUniformLocation, new Float32Array([1.0, 0.0, 0.0, 1.0]));
  1. 绘制矩形

现在，我们已经完成了所有准备工作，就可以开始绘制矩形了。

gl.useProgram(program);
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT, 0);

四、示例代码

以下是一个使用WebGL原生技术绘制矩形的完整示例代码：

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <canvas id="webgl-canvas" width="600" height="400"></canvas>

  <script>
    const canvas = document.getElementById('webgl-canvas');
    const gl = canvas.getContext('webgl');

    const vertexShader = gl.createShader(gl.VERTEX_SHADER);
    gl.shaderSource(vertexShader, `
      attribute vec3 position;

      uniform mat4 modelViewMatrix;
      uniform mat4 projectionMatrix;

      void main() {
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
      }
    `);
    gl.compileShader(vertexShader);

    const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
    gl.shaderSource(fragmentShader, `
      precision mediump float;

      uniform vec4 color;

      void main() {
        gl_FragColor = color;
      }
    `);
    gl.compileShader(fragmentShader);

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

    const vertexBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
      -1.0, -1.0, 0.0,
       1.0, -1.0, 0.0,
      -1.0,  1.0, 0.0,
       1.0,  1.0, 0.0,
    ]), gl.STATIC_DRAW);

    const indexBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array([
      0, 1, 2,
      1, 2, 3,
    ]), gl.STATIC_DRAW);

    const positionAttributeLocation = gl.getAttribLocation(program, 'position');
    gl.enableVertexAttribArray(positionAttributeLocation);
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
    gl.vertexAttribPointer(positionAttributeLocation, 3, gl.FLOAT, false, 0, 0);

    const modelViewMatrix = gl.getUniformLocation(program, 'modelViewMatrix');
    const projectionMatrix = gl.getUniformLocation(program, 'projectionMatrix');

    gl.uniformMatrix4fv(modelViewMatrix, false, new Float32Array([
      1.0, 0.0, 0.0, 0.0,
      0.0, 1.0, 0.0, 0.0,
      0.0, 0.0, 1.0, 0.0,