首页 > 其他分享 >【图形基础篇】04 # GPU与渲染管线:如何用WebGL绘制最简单的几何图形?

【图形基础篇】04 # GPU与渲染管线:如何用WebGL绘制最简单的几何图形?

时间:2022-10-15 23:05:39浏览次数:88  
标签:const 04 WebGL program 顶点 GPU gl 着色器


说明

【跟月影学可视化】学习笔记。

图形系统是如何绘图的?

一个通用计算机图形系统主要包括 6 个部分,分别是:

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

【图形基础篇】04 # GPU与渲染管线:如何用WebGL绘制最简单的几何图形?_缓存

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

渲染管线(RenderPipelines)

在 GPU 中要经过两个步骤生成光栅信息:

  1. 对给定的数据结合绘图的场景要素(例如相机、光源、遮挡物体等等)进行计算,最终将图形变为屏幕空间的 2D 坐标。
  2. 为屏幕空间的每个像素点进行着色,把最终完成的图形输出到显示设备上。

这整个过程是一步一步进行的,前一步的输出就是后一步的输入,我们把这个过程叫做渲染管线(​​RenderPipelines​​)。

GPU 是什么?

GPU 是由大量的小型处理单元构成的,它可能远远没有 CPU 那么强大,但胜在数量众多,可以保证每个单元处理一个简单的任务。

每处理一个像素点就相当于完成了一个简单的任务,而一个图片应用又是由成千上万个像素点组成的,要处理这么多的小任务,比起使用若干个强大的 CPU,使用更小、更多的处理单元,是一种更好的处理方式。

WebGL绘图流程

【图形基础篇】04 # GPU与渲染管线:如何用WebGL绘制最简单的几何图形?_渲染管线_02

如何用 WebGL 绘制三角形?

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

绘制步骤:

  1. 创建 WebGL 上下文
  2. 创建 WebGL 程序(WebGL Program)
  3. 将数据存入缓冲区
  4. 将缓冲区数据读取到 GPU
  5. GPU 执行 WebGL 程序,输出结果

步骤一:创建 WebGL 上下文

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

步骤二:创建 WebGL 程序

WebGL 程序是一个 WebGLProgram 对象,它是给 GPU 最终运行着色器的程序,而不是我们正在写的三角形的 JavaScript 程序。

1、编写两个着色器(Shader)

WebGL 是以顶点和图元来描述图形几何信息的。

  • 顶点就是几何图形的顶点
  • 图元是 WebGL 可直接处理的图形单元,由 WebGL 的绘图模式决定,有点、线、三角形等等。

注意:图元是 WebGL 可以直接处理的图形单元,所以其他非图元的图形最终必须要转换为图元才可以被 WebGL 处理。

WebGL 绘制一个图形的过程,一般需要用到两段着色器

  • 顶点着色器(​​Vertex Shader​​):负责处理图形的顶点信息
  • 片元着色器(​​Fragment Shader​​):负责处理图形光栅化后的像素信息

顶点着色器的作用:

  • 通过 gl_Position 设置顶点
  • 向片元着色器传递数据:通过 varying 变量传给片元着色器,根据片元着色器的像素坐标与顶点像素坐标的相对位置做线性插值
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);
}
`;

2、创建成 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);

3、创建 WebGLProgram 对象

将两个 shader 关联到 WebGL 程序,将 WebGLProgram 对象链接到 WebGL 上下文对象上。

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

4、通过 useProgram 选择启用 WebGLProgram 对象

gl.useProgram(program);

步骤三:将数据存入缓冲区

1、WebGL 的坐标系

WebGL 的坐标系是一个三维空间坐标系,坐标原点是(0,0,0)。其中,x 轴朝右,y 轴朝上,z 轴朝外。这是一个右手坐标系。

【图形基础篇】04 # GPU与渲染管线:如何用WebGL绘制最简单的几何图形?_渲染管线_03


左手右手对比图

【图形基础篇】04 # GPU与渲染管线:如何用WebGL绘制最简单的几何图形?_缓存_04

2、定义三角形的三个顶点

比如要绘制下面这个二维的三角形,三个顶点分别如下:

【图形基础篇】04 # GPU与渲染管线:如何用WebGL绘制最简单的几何图形?_着色器_05

WebGL 使用的数据需要用类型数组定义,默认格式是 Float32Array。

​Float32Array​​ 是 JavaScript 的一种类型化数组(TypedArray),JavaScript 通常用类型化数组来处理二进制缓冲区。

const points = new Float32Array([
-1, -1,
0, 1,
1, -1,
]);

3、将数据写入 WebGL 的缓冲区

  1. 创建一个缓存对象
  2. 将它绑定为当前操作对象
  3. 再把当前的数据写入缓存对象
const bufferId = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, bufferId);
gl.bufferData(gl.ARRAY_BUFFER, points, gl.STATIC_DRAW);

步骤四:将缓冲区数据读取到 GPU

将 buffer 的数据绑定给顶点着色器的 position 变量

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

步骤五:执行着色器程序完成绘制

调用绘图指令,就可以执行着色器程序来完成绘制

// 将当前画布的内容清除
gl.clear(gl.COLOR_BUFFER_BIT);
// 传入三角形图元、顶点偏移量和顶点数量进行绘制
gl.drawArrays(gl.TRIANGLES, 0, points.length / 2);

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>如何用WebGL绘制最简单的几何图形</title>
<style>canvas {
border: 1px dashed salmon;
}</style>
</head>
<body>
<canvas width="240" height="240"></canvas>
<script>// 获取 webgl 上下文
const canvas = document.querySelector('canvas');
const gl = canvas.getContext('webgl');
// 顶点着色器代码片段:attribute 表示声明变量,vec2 是变量的类型,它表示一个二维向量,position 是变量名。
const vertex = `
attribute vec2 position;

void main() {
gl_PointSize = 1.0;
gl_Position = vec4(position, 1.0, 1.0);
}
`;
// 片元着色器代码片段:gl_FragColor 的值来定义和改变图形的颜色,RGBA 色值表示的四维向量数据
// rgba(250,128,114,1) vec4(250/255, 128/255, 114/255, 1)
const fragment = `
precision mediump float;

void main() {
gl_FragColor = vec4(0.9803921568627451, 0.5019607843137255, 0.4470588235294118, 1);
}
`;
// 将着色器代码片段创建成 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 对象
const program = gl.createProgram();
// 将两个 shader 关联到 WebGL 程序
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
// 将 WebGLProgram 对象链接到 WebGL 上下文对象上
gl.linkProgram(program);
// 通过 useProgram 选择启用 WebGLProgram 对象
gl.useProgram(program);

// 定义三角形的三个顶点
const points = new Float32Array([
-1, -1,
0, 1,
1, -1,
]);
console.log("points---->", points)

// 创建一个缓存对象
const bufferId = gl.createBuffer();
// 将它绑定为当前操作对象
gl.bindBuffer(gl.ARRAY_BUFFER, bufferId);
// 再把当前的数据写入缓存对象
gl.bufferData(gl.ARRAY_BUFFER, points, gl.STATIC_DRAW);

// 获取顶点着色器中的position变量的地址
const vPosition = gl.getAttribLocation(program, 'position');
console.log("vPosition---->", vPosition)
// 给变量设置长度和类型
gl.vertexAttribPointer(vPosition, 2, gl.FLOAT, false, 0, 0);
// 激活这个变量
gl.enableVertexAttribArray(vPosition);

// 将当前画布的内容清除
gl.clear(gl.COLOR_BUFFER_BIT);
// 传入三角形图元、顶点偏移量和顶点数量进行绘制
gl.drawArrays(gl.TRIANGLES, 0, points.length / 2);</script>
</body>
</html>

【图形基础篇】04 # GPU与渲染管线:如何用WebGL绘制最简单的几何图形?_gpu_06

参考资料


标签:const,04,WebGL,program,顶点,GPU,gl,着色器
From: https://blog.51cto.com/kaimo313/5759364

相关文章

  • L04-02. 尾调用(尾递归)
    互相调用函数执行原理:这里介绍函数a调用函数b在栈中的变化: 函数调用会在内存形成一个"调用记录",保存调用位置和内部变量等信息。如果在函数A的内部调......
  • Ubuntu 20.04 安装 Docker
    环境目前Docker支持的Ubuntu版本有:UbuntuJammy22.04(LTS)UbuntuImpish21.10UbuntuFocal20.04(LTS)UbuntuBionic18.04(LTS)当前的Ubuntu的版本为......
  • 04动态属性与指令基础
    1<!doctypehtml>2<htmllang="en">3<head>4<metacharset="UTF-8">5<metaname="viewport"6content="width=device-width,user-sca......
  • 工业物联网智能网关BL110网口采集三菱Q系列PLC Q04UDEH教程
    钡铼技术工业物联网智能网关BL110网口采集三菱Q系列PLCQ04UDEH教程网口支持采集三菱Q系列(Q03UDE,Q04UDEH,Q06UDEH,Q10UDEH,Q13UDEH,Q20UDEH,Q26UDEH,Q002UD)、L系......
  • 钡铼技术工业物联网智能网关BL110网口采集三菱Q系列PLC Q04UDEH教程
    钡铼技术工业物联网智能网关BL110网口采集三菱Q系列PLCQ04UDEH教程网口支持采集三菱Q系列(Q03UDE,Q04UDEH,Q06UDEH,Q10UDEH,Q13UDEH,Q20UDEH,Q26UDEH,Q002UD)、L......
  • Ubuntu 22.04 LTS 代号已经公布:那就是 Jammy Jellyfish
    Ubuntu22.04LTS代号已在Ubuntu开发之家Launchpad上公布。在字母系列中的字母“I”之后,是“J”。因此,Canonical的下一个大LTS版本代号应该在其代号中包含字母“......
  • 【leetcode_C语言_数组_day1】 704.二分查找&&27. 移除元素
    704.二分查找1.题目给定一个n个元素有序的(升序)整型数组nums和一个目标值target,写一个函数搜索nums中的target,如果目标值存在返回下标,否则返回-1。示例1:输......
  • Linux系统编程04-Makefile
    文件命名:makefile或Makefile规则:一个Makefile文件中可以有一个或多个规则目标...:依赖...​ 命令(shell命令)​ ...目标:最终生成的文件依赖:......
  • 704. 二分查找
    题目描述给定一个 n 个元素有序的(升序)整型数组 nums和一个目标值 target ,写一个函数搜索 nums 中的target,如果目标值存在返回下标,否则返回-1。思路分析二分......
  • ALV demo 04:cl_salv_table (ICONs and Tooltips)
    QQ群:SAP干货铺, 群号:775662808干货:​效果图:code:*&---------------------------------------------------------------------**&ReportZLM_ALV003*&*&sapliumeng*&----......