WebGL编程指南 - WebGL入门

🕗 发布于 2024-10-19 05:05 图形学

初识绘图流程、缓冲区、着色器、attribute和uniform变量

先画一个蓝色的正方形

html代码：

<!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>Document</title>
  </head>
  <body onload="main()">  //指定 onload 属性，告诉浏览器<body>元素加载完从何处开始执行
    <canvas id="example" width="400" height="400">
      Please use a browser that supports "canvas"
    </canvas>
    <script src="./js/DrawRectangle.js"></script>
  </body>
</html>

JS代码：

// DrawRectangle.js
function main() {
  // 获取<canvas>元素
  let canvas = document.getElementById('example')
  if (!canvas) {
    console.log('Failed to retrieve the <canvas> element')
    return
  }

  // 获取绘制二维图形的绘图上下文
  let ctx = canvas.getContext('2d')

  // 绘制蓝色矩形
  ctx.fillStyle = 'rgba(0,0,255,1.0)'
  ctx.fillRect(120, 10, 150, 150)
}

HTML5引入<canvas>标签，允许JavaScript动态的绘制图形

<body οnlοad="main()"> //指定 onload 属性，告诉浏览器<body>元素加载完从何处开始执行，作为JavaScript程序的入口

绘制蓝色矩形的js程序的，为了在<canvas>上绘制二维图形，需要经过三个步骤：

获取<canvas>元素
向该元素请求二维图形的“绘制上下文”
在绘图上下文上调用相应的绘图函数，绘制二维图形

ctx对象的fillRect方法，方法的语法为 context.fillRect(x,y,width,height),x，y为矩形左上角的坐标，剩下两个是宽度和高度

canvas 中的坐标和 OpenGL 一致

清空绘图区示例与背景色设置(初识多缓冲区模型与颜色缓冲区)

效果：

代码：

<!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,inital-scale=1.0"/>
        <title>Document</title>
    </head>
    <body onload="main()">
        <canvas id="webgl" width="400" height="400">
        </canvas>
    <script src="HelloCanvas.js"></script>
    </body>
</html>

// HelloCanvas.js
function main() {
    // 获取<canvas>元素
    let canvas = document.getElementById('webgl')
  
    // 获取WebGL绘图上下文
    // let gl = getWebGLContext(canvas) (书中的函数)
    let gl = canvas.getContext('webgl')
    if (!gl) {
      console.log('Failed to get the rendering context for WebGL')
      return
    }
  
    // 指定清空<canvas>的颜色
    gl.clearColor(0.0, 0.0, 0.0, 1.0) // 黑色
  
    // 清空<canvas>
    gl.clear(gl.COLOR_BUFFER_BIT)
  }

因为没找到书中的函数库，所以参考了别人的代码

示例程序中 main 函数的执行流：

设置 canvas 背景色

一旦指定背景色后，背景色会贮存在WebGL系统中，在下次调用gl.clearColor()方法之前不会改变。所以，如果未来还需要再次清空绘图区，没必要再指定一次颜色。
这是挂载在WebGLRenderingContext对象上的方法。

gl.clear(buffer)

清空颜色缓冲区将导致 WebGL 清空页面上的 <canvas> 区域

WebGL中的gl.clear()方法继承自OpenGL，基于多基本缓冲区模型。

绘制一个点与静态着色器

相关内容：着色器初识、使用着色器的WebGL程序结构、初始化着色器、顶点着色器及内置变量、片元着色器及内置变量、齐次坐标、WebGL坐标系统、JavaScript程序和着色器程序的协同运行机制
相关函数：initShaders(), vec4(), gl.drawArrays()

示例程序将在原点(0.0, 0.0, 0.0)处的10个像素大的红色的点。
因为WebGL处理的是三维图形，所以我们有必要为这个点指定三维坐标。

<!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>Draw a point (1)</title>
</head>
<body onload="main()">
    <canvas id="webgl" width="400" height="400">
        Please use the browser supporting "canvas"
    </canvas>
    
    <script src="../libs/webgl-utils.js"></script>
    <script src="../libs/webgl-debug.js"></script>
    <script src="../libs/cuon-utils.js"></script>
    <script src="HelloPoint1.js"></script>
</body>
</html>

// HelloPoint1.js
// 顶点着色器程序
var VSHADER_SOURCE =
  'void main() {\n' +
  ' gl_Position = vec4(0.0, 0.0, 0.0, 1.0);\n' + // 设置坐标
  ' gl_PointSize = 10.0;\n' + // 设置尺寸
  '}\n'
// 片元着色器程序
var FSHADER_SOURCE =
  'void main() {\n' +
  ' gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' + // 设置颜色
  '}\n'
// 主程序
function main() {
  // 获取<canvas>元素
  let canvas = document.getElementById('webgl')
  // 获取WebGL绘图上下文
  // let gl = getWebGLContext(canvas)
  let gl = canvas.getContext('webgl')
  if (!gl) {
    console.log('Failed to get the rendering context for WebGL')
    return
  }
  // 初始化着色器
  if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
    console.log('Failed to initialize shaders')
    return
  }
  // 设置<canvas>背景色
  gl.clearColor(0.0, 0.0, 0.0, 1.0)
  // 清空<canvas>
  gl.clear(gl.COLOR_BUFFER_BIT)
  // 绘制一个点
  gl.drawArrays(gl.POINTS, 0, 1)
}

着色器程序以字符串的形式嵌入在 JavaScript 文件中，在程序真正开始运行前它就已经设置好了

WebGL中有两种着色器：

顶点着色器(Vertex shader)：顶点着色器是用来描述顶点特性（如位置、颜色等）的程序。顶点（vertex）是指二维或三维空间中的一个点，比如二维或三维图形的端点或交点。
片元着色器(Fragment shader)：进行逐片元处理过程如光照的程序。片元（fragment）是一个WebGL术语，你可以将其理解为像素（图像的单元）。

JavaScript 读取了着色器的相关信息，然后存在 WebGL 系统中以供调用

WebGL 程序的执行流程

初始化着色器

顶点着色器先执行，它对gl_Posetion变量和gl_PointSize变量进行赋值，并将他们传入片元着色器，然后片元着色器再执行。

实际上，片元着色器并不直接接收两个变量，而是接收经过光栅化处理后的片元值，这一部分会在书的第五章进行讨论

WebGL程序包括运行在浏览器中的JavaScript和运行在WebGL系统中的着色器程序两个部分。

顶点着色器

// 顶点着色器程序
var VSHADER_SOURCE =
  'void main() {\n' +
  ' gl_Position = vec4(0.0, 0.0, 0.0, 1.0);\n' + // 设置坐标
  ' gl_PointSize = 10.0;\n' + // 设置尺寸
  '}\n'

顶点着色器设置了点的位置和大小。该语言本身和C语言一样，必须包含一个main()函数，main()函数前面的关键字void表示这个函数没有返回值，同时也不能指定参数。

与大多数语言一样，着色器程序使用=操作符进行赋值，将点的位置和尺寸分别赋值给gl_Position和gl_PointSize，这两个变量是内置在顶点着色器之中的：

注：gl_Position必须被赋值，否则着色器无法正常工作；gl_PointSize并不是必须的，默认值为1.0。

如果类型赋值错误，如10.0变成10，就会报错

gl_Position 表示顶点的位置，一般顶点只需要三个点即可，用内置函数 vec() 创建 vec4类型的变量

vec4(v0, v1, v2, v3)：根据v0，v1，v2，v3值创建vec4对象
参数：
v0, v1, v2, v3: 指定4个浮点型分量;
返回值：
由v0, v1, v2, v3组成的vec4对象。

在示例中，我们添加了1.0作为函数第四分量。在WebGL(或者说OpenGL)中，将gl_Positon设置为vec4类型的变量实际上是采用了齐次坐标的方式，因为它能提高处理三维数据的效率，所以在三维图形系统中被大量使用。关于齐次坐标可以看下面的说明：

片元着色器

顶点着色器控制点的位置和大小，片元着色器控制点的颜色。

片元着色器的作用是处理片元，使其显示在屏幕上

// 片元着色器程序
var FSHADER_SOURCE =
  'void main() {\n' +
  ' gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' + // 设置颜色
  '}\n'

绘制操作

  // 绘制一个点
  gl.drawArrays(gl.POINTS, 0, 1)

建立着色器之后，与HelloCanvas.js示例一样，进行设置背景色和清空绘制区域的操作，最后进行绘制操作。绘制操作采用的方法为gl.drawArrays()。

当程序调用 gl.drawArrays() 时，顶点着色器将其执行 count 次，每次处理一个顶点

示例程序函数参数设置如下：

因为我们绘制的是单独的点，所以设置第一个参数为gl.POINTS；
设置第二个参数为0，表示从第1个顶点（虽然只有一个顶点）开始画起；
第三个参数count为1，表示程序中只绘制1个点

WebGL 坐标系统

本身不是左手也不是右手，可以认为时右手坐标系

由此可见，WebGL坐标系和<canvas>绘图区的坐标系不同，需要将前者映射到后者。在<canvas>绘图区，WebGL坐标系统如下图所示：

绘制一个点2 与 attribute变量(动态设置顶点着色器)

相关内容：用JavaScript程序从着色器外部向着色器传输数据（动态，而不是静态写在着色器中）、attribute变量、uniform变量
相关函数：gl.getAttribLocation()、gl.vertexAttrib3f()及其同族函数

小结：动态设置着色器参数，主要包括以下几步：1.在着色器语言中，设置attribute或uniform变量，将变量赋值到主函数参数中；2.JavaScript程序中通过相关函数获取变量存储地址；3.通过相关函数，向该地址传输数据。

在前一节中，点的位置是直接编(“硬编码”)写在顶点着色器中的，虽然易于理解但缺乏可扩展性；这一节中，Web程序可以将顶点的位置坐标从JavaScript传到着色器程序中，然后再对应位置上绘制点

目前而言，将位置信息从JavaScript程序中传给顶点着色器，有两种方式：attribute变量和uniform变量。

attribute变量：传输与顶点相关的数据
uniform变量：传输那些对于所有顶点都相同(或与顶点无关)的数据

两个变量都是GLSL ES变量，被用来从外部向顶点着色器内传输数据，示例中选用attribute变量，示例代码如下：

<!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>Draw a point (1)</title>
  </head>
  <body onload="main()">
    <canvas id="webgl" width="400" height="400">
      Please use the browser supporting "canvas"
    </canvas>
    <!-- 书中的函数库 -->
    <script src="./libs/webgl-utils.js"></script>
    <script src="./libs/webgl-debug.js"></script>
    <script src="./libs/cuon-utils.js"></script>
    <script src="./js/HelloPoint2.js"></script>
  </body>
</html>

// HelloPoint2.js
// 顶点着色器
var VSHADER_SOURCE =
  'attribute vec4 a_Position;\n' +
  'void main(){\n' +
  ' gl_Position = a_Position;\n' +
  ' gl_PointSize = 10.0;\n' +
  '}\n'
// 片元着色器
var FSHADER_SOURCE =
  'void main() {\n' +
  ' gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' + // 设置颜色
  '}\n'
// 主函数
function main() {
  // 获取<canvas>元素
  let canvas = document.getElementById('webgl')
  // 获取WebGL上下文
  let gl = canvas.getContext('webgl')
  if (!gl) {
    console.log('Failed to get the rendering context for WebGL')
  }
  // 初始化着色器
  if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
    console.log('Failed to initialize shaders')
    return
  }
  // 获取attribute变量的存储位置
  let a_Position = gl.getAttribLocation(gl.program, 'a_Position')
  if (a_Position < 0) {
    console.log('Failed to get the storage location of a_Position')
  }
  // 将顶点位置传输给attribute变量
  gl.vertexAttrib3f(a_Position, 0.0, 0.0, 0.0)
  // 设置<canvas>背景色
  gl.clearColor(0.0, 0.0, 0.0, 1.0)
  // 清除<canvas>
  gl.clear(gl.COLOR_BUFFER_BIT)
  // 绘制一个点
  gl.drawArrays(gl.POINTS, 0, 1)
}

attribute变量的声明与赋值：

在顶点着色器的第一行GLSL ES语言中声明了此变量(第3行)：

// 顶点着色器
var VSHADER_SOURCE =
  'attribute vec4 a_Position;\n' +
  'void main(){\n' +
  ' gl_Position = a_Position;\n' +
  ' gl_PointSize = 10.0;\n' +
  '}\n'

为了使用 attribute 变量，需要包含一下步骤：

在顶点着色器中，声明 attribute 变量
将 attribute 变量赋值给 gl_Position 变量
向 attribute 变量传输数据

具体使用讲解：

attribute变量的声明按照以下的格式：<存储限定符><类型><变量名>

关键词attribute被称为存储限定符(storage qualifier)，它表示接下来的变量(示例中是a_Position)是一个attribute变量。attribute变量必须声明成全局变量，数据将从着色器外部传给该变量。

与一般的JavaScript变量赋值不同，在WebGL系统之外向系统内的变量赋值需要知道该变量的存储地址，再通过存储地址向变量传输数据。获取attribute变量地址的部分代码如下：

  // 获取attribute变量的存储位置
  let a_Position = gl.getAttribLocation(gl.program, 'a_Position')
  if (a_Position < 0) {
    console.log('Failed to get the storage location of a_Position')
  }

gl.getAttribLocation(program, name)：获取由name参数指定的attribute变量的存储地址。
参数：
program: 指定包含顶点着色器和片元着色器的着色器程序对象;
name: 指定想要获取其存储地址的attribute变量的名称;
返回值：
大于等于0：attribute变量的存储地址
-1：指定的attribute变量不存在，或者其命名具有gl_或webgl_前缀

向 attribute 变量赋值

  // 将顶点位置传输给attribute变量
  gl.vertexAttrib3f(a_Position, 0.0, 0.0, 0.0)

通过存储地址向 attribute 变量赋值

代码中我们传递了三个浮点数，而a_Position变量得数据类型时vec4，此处该方法会默认将第四个分量设置为1.0。颜色值得第4个分量为1.0表示该颜色完全不透明，而齐次坐标得第4个分量为1.0使齐次坐标和三维坐标对应起来，所以1.0是一个“安全”的第4分量。下一部分对其同族函数的说明中介绍了默认填充的方式。

//矢量版本 可以接收类型化数组 矢量版本的函数在原函数的末尾加了字母‘v’
var position = new Float32Array([1.0, 2.0, 3.0, 1.0])
gl.vertexAttrib4fv(a_Position, position)
//对于接收数组的矢量版本，函数名中的数字代表所接收数组中的元素个数。

也可以加一个顶点大小数据，控制绘制的大小：部分代码

var VSHADER_SOURCE = 
    'attribute vec4 a_Position;\n' + 
    'attribute float a_PointSize;\n' +
    'void main(){\n' + 
    'gl_Position = a_Position;\n' + 
    'gl_PointSize = a_PointSize;\n' + 
    '}\n'

    let a_PointSize = gl.getAttribLocation(gl.program,'a_PointSize');
    if(a_Position < 0) {
        console.log('Failed to get the storage location of a_Position');
        return;
    }
    gl.vertexAttrib3f(a_Position,0.5,0.0,0.0);
    gl.vertexAttrib1f(a_PointSize,50.0);

写的太长了，网页开始卡顿了，再开一篇，这一章真的很长

参考：【《WebGL编程指南》读书笔记-WebGL入门】_getwebglcontext-CSDN博客

原文地址：https://blog.csdn.net/zaizai1007/article/details/143010122

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：代码随想录算法训练营第48天| 739. 每日温度，496.下一个更大元素 I，503.下一个更大元素II
下一篇：【RTT-Studio】详细使用教程十七：FreeModbus通信--LCD

大数据治理：构建数据驱动的智能决策体系
随着大数据时代的到来，企业和组织面临着海量数据的挑战和机遇。大数据治理作为一种核心思想，旨在通过规范化、整合和优化数据资源，构建一个可信、高效、安全的数据环境，为智能决策提供支持。本文将介绍大数据治理
阅读更多2024-10-19
【Mysql/xtrabackup】主从恢复（高端操作）
xtrabackup恢复主从，用于mysql数据量大情况
阅读更多2024-10-19
大数据-178 Elasticsearch Query - Java API 索引操作 & 文档操作
通过 Java API，可以向特定索引插入单个文档，并指定文档的 ID（如果不指定，Elasticsearch 会自动生成一个 ID）。获取文档：Java API 可以根据文档 ID 从索引中获取单个
阅读更多2024-10-19
Laravel|Lumen项目配置信息config原理
laravel config 配置原理
阅读更多2024-10-19
玄机平台-应急响应-webshell查杀
玄机靶场，适合应急响应的学习
阅读更多2024-10-19
从Apple Intelligence到远程机器人手术：更快、更安全的网络成企业业务关键
：以苹果公司的Apple Intelligence以及医疗界革命性的远程机器人手术为例，探讨更快、更安全网络对企业的重要性。
阅读更多2024-10-19
【RV1126】板子adb 调试流程
I 0 选择的摄像头序号，可以选择0或1。1. 连接电源线，网线。
阅读更多2024-10-19
【网络】HTTPS协议
本文主要介绍了HTTPS的加密过程，以及其如何保证数据的安全
阅读更多2024-10-19
LeetCode 145.二叉树的后序遍历
给你一棵二叉树的根节点root，返回其节点值的。[0, 100]递归算法很简单，你可以通过迭代算法完成吗？
阅读更多2024-10-19
vue3中使用element-plus的组件，编辑器检查警告爆红找不到名称相关的element组件
在tsconfig.json中，增加标红框文件配置，目的就是将根目录下包含.d.ts的文件中的匹配项，应用于整个项目的匹配项检查，去除代码检查爆红警告。按照以上配置完之后，当在代码中使用element
阅读更多2024-10-19