WebGL编程指南01-着色器与常用API

鸡米工程师

已于 2022-09-05 22:27:48 修改

阅读量538

点赞数 1

分类专栏： WebGL编程指南文章标签：着色器 javascript 开发语言

于 2022-08-29 22:12:56 首次发布

本文链接：https://blog.csdn.net/weixin_46773434/article/details/126583765

版权

WebGL编程指南专栏收录该内容

32 篇文章 6 订阅

订阅专栏

前言

本系列是在学习WebGL编程指南中，做出的个人总结

Canvas

1.1 什么是 Canvas

Canvas 即画布，顾名思义就是绘画的地方，Canvas 在 HTML5 中被定义为一个标签，从此前端开发者可以通过这个标签和脚本语言(JavaScript)尽情发挥自己的想象力，Canvas 画布不但可以绘制二维图形，同样可以绘制三维图形。

1.2 获取 canvas 对象

实际上就是通过获取 dom 的方式获取 canvas 对象

<body>
  <!--canvas标签创建一个宽高均为400像素蓝色背景的画布-->
  <canvas id="webgl" width="400" height="400" style="background-color: blue"></canvas>

  <script>
    //通过getElementById()方法获取canvas画布
    var canvas = document.getElementById('webgl');
  </script>
</body>

1.3 获取 canvas 上下文

通过 getCentext 上下文

//获取上下文-二维
const gl = canvas.getContext("2d");

//获取上下文-三维
const gl = canvas.getContext("webgl");

着色器

webgl 依赖于一种着色器(shader)的绘图机制进行绘图，它提供了灵活且强大的绘图方式，它很强大，但同时也很复杂，着色器是 WebGL 的一项重要的和兴机制。在编码过程中它是以字符串的形式嵌入到 JavaScript 代码中。

2.1 着色器分类

webgl 有两种着色器,顶点着色器(Vertex shader) 和片元着色器(Fragment shader)

顶点着色器用来描述顶点的位置和大小
片元着色器用来描述顶点的颜色

2.2 着色器初始化

在这里你需要知道，WebGL 程序包括运行在浏览器中的 JavaScript 程序和运行在 WebGL 系统的着色器程序这两部分，着色器程序以字符串的形式通过 Javascript 代码传给 WebGL 系统。简单说明一下，这里的以字符串形式体现的着色器程序是使用着色器语言(GLSL ES) 编写的

2.3 着色器预言类型

这里提及着色器语言的数据类型，是因为该语言是强类型的编程语言

float 表示浮点数
vec4 表示四个浮点数组成的矢量
由四个分量组成的矢量被称为齐次坐标，齐次坐标（x,y,z,w）等价于三维坐标（x/w,y/w,z/w）即你想把一个三维坐标转换为齐次坐标时，只需要给它添加一个分量，值为 1.0

2.4 顶点着色器初始化

顶点着色器的初始化实际就是给它的内置变量赋值，它有两个内置变量分别是 gl_Position 和 gl_PointSize

gl_Position vec4 表示顶点的位置
gl_PointSize float 表示点的尺寸(像素 px)

注意：gl_Position 变量必须被赋值，否则着色器无法正常工作，gl_PointSize 不是必须的，缺省时着色器默认取值 1.0

//顶点着色器
const VSHADER_SOURCE = `void main(){ 
  //设置顶点位置(坐标原点)
   gl_Position =vec4(0.0,0.0,0.0,1.0);
  //设置点的大小(30px)
   gl_PointSize=30.0;
   }`;

2.5 片元着色器初始化

顶点着色器控制点的位置和大小，片元着色器控制点的颜色，片元着色器将点的颜色赋值给内置变量 gl_FragColor

gl_FragColor vec4 指定片元颜色(RGBA 格式)

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

3.部分webgl API说明

3.1设置背景色gl.clearColor()

在调用gl.clear清空颜色缓冲区颜色时，指定的背景颜色

函数功能：指定绘图区域的背景色
-----------------------------------------------------------
调用示例：gl.clearColor(red, green, blue, alpha)
-----------------------------------------------------------
参数		
			red		指定红色值（从0.0到1.0）
			green	指定绿色值（从0.0到1.0）
			blue	指定蓝色值（从0.0到1.0）
			alpha	指定透明度值（从0.0到1.0）
			小于0.0的值会被截断为0.0，大于1.0的值会被截断为1.0
-----------------------------------------------------------			
返回值		无
-----------------------------------------------------------
错  误		无

3.2清空绘图区gl.clear()

清空绘图区实际上是清空颜色缓冲器，在Webgl中缓冲区有三类：颜色缓冲器、深度缓冲区、模板缓冲区

函数功能：将指定缓冲区设置为预定的值-预定的值指的是gl.clearColor()设置的值
-----------------------------------------------------------------------------------
调用示例：gl.clear(buffer)
-----------------------------------------------------------------------------------
参数		
			buffer					指定待清空的缓冲区，位操作位|可以用来指定多个缓冲区
			gl.COLOR_BUFFER_BIT		代表清空颜色缓冲区
			gl.DEPTH_BUFFER_BIT		代表清空深度缓冲区
			gl.STENCIL_BUFFER_BIT	代表清空模板缓冲区
-----------------------------------------------------------------------------------			
返回值		无
-----------------------------------------------------------------------------------
错  误		INVALID_VALUE			缓冲区不是以上三种类型

3.3绘制操作gl.drawArrays()

建立了着色器之后，我们就要进行绘制了，gl.drawArrays()是一个强大的函数，可以用来绘制各种图形，该函数的规范如下所示

函数功能：执行顶点着色器，按照mode参数指定的方式绘制图形
--------------------------------------------------------------------------
调用示例：gl.drawArrays(mode, first, count)
--------------------------------------------------------------------------
参数		
			mode		指定绘制的方式，可以接收以下常量符号：
						gl.POINTS,gl.LINES,gl.LINE_STRIP,gl.LINE_LOOP
						gl.TRIANGLES,gl.TRIANGLE_STRIP,gl.TRIANGLE_FAN
			first		指定从哪个点开始绘制-整形数
			count		指定要绘制多少个顶点-整形数
--------------------------------------------------------------------------		
返回值		无
--------------------------------------------------------------------------
错  误		INVALID_ENUM			传入的mode参数不是指定参数
			INVALID_VALUE			参数first或count是负数