利用WebGL绘制简单几何

最新推荐文章于 2025-06-20 13:29:21 发布

梭影の

最新推荐文章于 2025-06-20 13:29:21 发布

阅读量1.1k

点赞数 11

CC 4.0 BY-SA版权

分类专栏：可视化技术文章标签： webgl

本文链接：https://blog.youkuaiyun.com/qq_48607161/article/details/136840887

可视化技术专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了WebGL的基本概念，图形系统的绘图流程，特别是如何通过WebGLAPI在HTML5canvas上实现最简单的几何图形绘制，包括创建WebGL上下文、编写和链接着色器、设置缓冲区和执行渲染过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

利用WebGL绘制最简单的几何图形

一、WebGL简介

WebGL是一种用于在网页上渲染交互式3D和2D图形的JavaScript API。它基于OpenGL ES 2.0，提供了一种在浏览器中使用硬件加速图形的方式。

二、图形系统绘图流程

图形系统的通用绘图流程会包括六个部分：

输入设备
中央处理单元：首先，数据经过 CPU 处理，成为具有特定结构的几何信息。
图形处理单元：然后，这些信息会被送到 GPU 中进行处理。
存储器
帧缓存：光栅信息会输出到帧缓存中
输出设备

在这里插入图片描述

光栅（Raster）：几乎所有的现代图形系统都是基于光栅来绘制图形的，光栅就是指构成图像的像素阵列。
像素（Pixel）：一个像素对应图像上的一个点，它通常保存图像上的某个具体位置的颜色等信息。
帧缓存（Frame Buffer）：在绘图过程中，像素信息被存放于帧缓存中，帧缓存是一块内存地址。
CPU（Central Processing Unit）：中央处理单元，负责逻辑计算。
GPU（Graphics Processing Unit）：图形处理单元，负责图形计算。

三、渲染管线

渲染管线（Rendering Pipeline）是指计算机图形学中用于生成图像的一系列阶段和处理步骤。它描述了从输入几何数据到最终呈现图像的整个过程。渲染管线通常包括以下几个主要阶段：

应用阶段（Application Stage）：在这个阶段，程序接收输入数据，例如顶点数据、纹理信息等。这些数据通常由应用程序提供，例如游戏引擎或者图形应用。
几何处理阶段（Geometry Processing Stage）：在这个阶段，输入的几何数据（例如顶点、线段、三角形等）经过一系列变换（如模型变换、视图变换、投影变换等）和剪裁（Clipping），最终形成裁剪后的几何图形。
光栅化阶段（Rasterization Stage）：在这个阶段，几何图形被转换为像素的集合，即光栅化。光栅化的过程包括确定每个像素的位置和颜色，以及应用纹理映射等操作。
片段处理阶段（Fragment Processing Stage）：在这个阶段，对光栅化后的像素进行处理，计算最终的颜色值。这包括应用光照模型、纹理采样、深度测试、融合操作等。
输出阶段（Output Stage）：最终生成的像素数据被发送到图形硬件的输出缓冲区，呈现在屏幕上。

在这里插入图片描述

四、WebGL绘图流程

1、创建获取WebGL上下文

const gl = document.querySelector("canvas").getContext("webgl");

2、创建WebGL程序（WebGL Program）

编写着色器

   //顶点着色器
    const vertex = `
    attribute vec2 position;

    void main(){
        gl_PointSize = 1.0;
        gl_Position = vec4(position,0.0,1.0);
    }
    `;
    // 片元着色器
    const fragment = `
    precision mediump float;
    void main(){
        gl_FragColor = vec4(1.0,0.0,0.0,1.0);
    }
    `;

创建shader对象

    //创建顶点着色器
    const vertexShader = gl.createShader(gl.VERTEX_SHADER);
    gl.shaderSource(vertexShader, vertex);
    gl.compileShader(vertexShader);

    //创建片元着色器
    const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
    gl.shaderSource(fragmentShader, fragment);
    gl.compileShader(fragmentShader);

创建WebGLProgram对象

    //创建WebGLPrgame对象
    const program = gl.createProgram();
    gl.attachShader(program, vertexShader);
    gl.attachShader(program, fragmentShader);

连接并启用WebGLProgram对象

    gl.linkProgram(program);
    gl.useProgram(program); //启用webglProgram对象

3、将数据存入缓冲区

创建一个缓存对象

    const triangle = new Float32Array([-1, -1, 0, 1, 1, -1]);
    const bufferId = gl.createBuffer();

绑定为当前操作对象

    gl.bindBuffer(gl.ARRAY_BUFFER, bufferId);

当前数据写入缓存对象

    gl.bufferData(gl.ARRAY_BUFFER, triangle, gl.STATIC_DRAW);

4、将缓冲区数据读取到GPU

    //获取顶点着色器的position的变量位置下标
    const vPosition = gl.getAttribLocation(program, "position");
    gl.vertexAttribPointer(vPosition, 2, gl.FLOAT, false, 0, 0);//从bindBuffer绑定的缓冲区中读取数据
    gl.enableVertexAttribArray(vPosition);//激活这个变量

5、GPU执行WebGL程序，输出结果

    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.drawArrays(gl.TRIANGLES, 0, triangle.length / 2);

五、完整代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <canvas width="500" height="500"></canvas>
  </body>
  <script type="module">
    const gl = document.querySelector("canvas").getContext("webgl");
    //顶点着色器
    const vertex = `
    attribute vec2 position;

    void main(){
        gl_PointSize = 1.0;
        gl_Position = vec4(position,0.0,1.0);
    }
    `;
    // 片元着色器
    const fragment = `
    precision mediump float;
    void main(){
        gl_FragColor = vec4(1.0,0.0,0.0,1.0);
    }
    `;

    //创建顶点着色器
    const vertexShader = gl.createShader(gl.VERTEX_SHADER);
    gl.shaderSource(vertexShader, vertex);
    gl.compileShader(vertexShader);

    //创建片元着色器
    const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
    gl.shaderSource(fragmentShader, fragment);
    gl.compileShader(fragmentShader);

    //创建WebGLPrgame对象
    const program = gl.createProgram();
    gl.attachShader(program, vertexShader);
    gl.attachShader(program, fragmentShader);
    gl.linkProgram(program);
    gl.useProgram(program); //启用webglProgram对象

    //创建一个三角形坐标数据,并存入缓冲区
    const triangle = new Float32Array([-1, -1, 0, 1, 1, -1]);
    const bufferId = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, bufferId);
    gl.bufferData(gl.ARRAY_BUFFER, triangle, gl.STATIC_DRAW);

    //获取顶点着色器的position的变量位置下标
    const vPosition = gl.getAttribLocation(program, "position");
    gl.vertexAttribPointer(vPosition, 2, gl.FLOAT, false, 0, 0);//从bindBuffer绑定的缓冲区中读取数据
    gl.enableVertexAttribArray(vPosition);//激活这个变量

    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.drawArrays(gl.TRIANGLES, 0, triangle.length / 2);
  </script>
</html>

六、顶点着色器向片元着色器传值

    // 顶点着色器
    const vertex = `
    attribute vec2 position;
    varying vec3 color;

    void main(){
        gl_PointSize = 1.0;
        color = vec3(0.5 + position * 0.5 , 0.0);
        gl_Position = vec4(position*0.5,1.0,1.0);
    }`;

    // 片元着色器
    const fragment = `
    precision mediump float;
    varying vec3 color;
    void main(){
        gl_FragColor = vec4(color,1.0);
    }`;

在这里插入图片描述