WebGL可视化基础（一）

最新推荐文章于 2024-12-25 18:48:57 发布

原创最新推荐文章于 2024-12-25 18:48:57 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #可视化 #WebGL

本文详细介绍了WebGL的基本绘图原理，包括图形绘制流程、顶点与片元着色器的作用，以及如何使用WebGL API绘制一个简单的三角形。

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

WebGL可视化基础（一）

图形是如何绘制的

一个通用的计算机图形系统主要包括6个设备，分别是输入设备/中央处理单元/图形处理单元/存储器/帧缓存/输出设备
在这里插入图片描述

首先，数据经过CPU处理，转换为特定结构的几何信息，然后将这些信息送到GPU中进行处理。在GPU中要经过两个步骤生成光栅信息。这些光栅信息会输出到缓存中，最后渲染到屏幕上。

在这里插入图片描述

这个绘图过程主要做了2件事情，一是对给定的数据结合绘图的场景要素（例如相机/光源/遮挡物体等等）进行计算，最终将图形变为屏幕空间的2D坐标。二是为屏幕空间的每个像素点进行着色，把最终完成的图形输出到显示设备上。这整个过程是一步一步进行的，前一步的输出就是后一步的输入，所以我们也把这个过程叫做渲染管线（RenderPipelines）

如何用WebGL绘制三角形

浏览器提供的WebGL API是IpenGL ES的 JavaScript绑定版本，它赋予开发者操作GPU的能力。

创建WebGL 上下文
创建WebGL 程序
将数据存入缓冲区
将缓冲区的数据读取到GPU
GPU执行WebGL程序，输出结果

步骤一：创建WebGL上下文

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

步骤二：创建WebGL 程序

这里需要创建一个WebGLProgram 对象，它是给GPU最终运行着色器的程序。
这里首先要编写两个着色器（Shader）。

const vertex = `
	attribute vec2 position;
	
  void main() {
		gl_PointSize = 1.0;
    gl_Position = vec4(position. 1.0, 1.0)
  }
`;

const fragment = `
  precision mediump float;
	
	void main() 
  {
    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
  }
`;

为什么需要两个着色器呢？这就需要理解顶点和图元的概念。在绘图的时候，WebGL是以顶点和四个图元来描述图形几何信息的。顶点就是几何图形的顶点，比如，三角形有三个顶点，四边形有四个顶点。图元是WebGL可直接处理的图形单元，由WebGL的糊涂模式决定，有点/线/三角形等等。

所以，顶点和图元是绘图过程中必不可少的。因此，WebGL绘制一个图形的过程，一般都需要用到两段着色器。一段叫顶点着色器负责处理图形的顶点信息，另一段叫片元着色器负责处理图形的像素信息。

我们可以把顶点着色器理解为处理顶点的GPU程序代码。他可以改变顶点的信息（如顶点的坐标/法线方向/材质等等），从而改变我们绘制出来的图形的形状或者大小等

顶点处理完之后，WebGL就会根据顶点和绘图模式指定的图元，计算出需要着色的像素点，然后对它们进行执行片元着色器程序。

这里其实很好理解，顶点是为了帮助我们绘制出图形，图元是为了帮助我们上色。

开始绘制三角形

// 创建成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对象，并且将这两个shader关联到WebGL程序上。
// 再将WebGL程序链接到WebGL上下文对象上。
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgrram(program);

// 最后通过useProgram 选择启动这个WebGLPrame对象。
gl.useProgram(program);

// 接下来将数据存入缓冲区，也就是将数据送入GPU
// 定义三角形的三个顶点
const points = new Float32Array([
  -1, -1,
  0, 1,
  1, -1,
]);

// 将数据送入WebGL的缓冲区 三步走，创建一个缓存对象，绑定为当前操作对象，再把当亲的数据写入缓存对象。
const bufferId = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, bufferId);
gl.bufferData(gl.ARRAY_BUFFER, points, gl.STATIC_DRAW);

// 将缓存区数据读取到GPU，把数据绑定给顶点着色器的position变量
// 在GLSL中， attribute 表示声明变量，vec2是变量的类型，它表示一个二维向量，position是变量名。

const vPosition = gl.getAttribLocation(program, 'position');
// 获取顶点着色器中的position
gl.vertexAttribPointer(vPosition, 2, gl.FLOAT, false, 0, 0); //给变量设置长度和类型
gl.enableVertextAttribArray(vPosition); //激活变量

// 执行着色器程序完成绘制
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES, 0, points.length / 2);

// 至此我们的三角形就绘制完成了