WebGL编程指南知识讲解一

最新推荐文章于 2024-08-14 14:54:46 发布

冷雨看前端

最新推荐文章于 2024-08-14 14:54:46 发布

阅读量566

点赞数 1

分类专栏： WebGL shader 文章标签：前端

本文链接：https://blog.csdn.net/weixin_38207288/article/details/107956451

版权

WebGL 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

shader

1 篇文章 0 订阅

订阅专栏

WebGL 简介

WebGL（全写Web Graphics Libr
ary）是一种3D绘图协议，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。显然，WebGL技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂3D结构的网站页面，甚至可以用来设计3D网页游戏等等

第一部分 WebGL入门

顶点着色器：描述顶点的特性（位置、颜色等）的程序，顶点：二维、三维空间的点，图形的端点或交点
片元着色器：进行逐片元处理过程的程序。片元：可以理解为像素
程序对象（gl.program）：包括了顶点着色器和片元着色器
在这里插入图片描述

注意点

设置背景色：一旦指定了背景色后，背景色就会驻存在WebGL系统中，在下一次调用gl.clearColor()方法钱不会发生改变
清除：调用gl.clear()函数，用之前指定的背景色清空（即用背景色填充，擦除已经绘制的内容）绘图区域。清空绘图区域实际上是清空color buffer

WebGL坐标系统

在这里插入图片描述

设置顶点着色器坐标

在这里插入图片描述

设置片元着色器颜色

在这里插入图片描述

第二部分 OpenGL ES 着色器语言（GLSL ES）

基础
GLSL ES是强类型语言，大小写敏感；每一个语句都应该以一个英文分号结束；它从main()函数开始执行，必须有且只有一个main()函数，且不接收任何参数。
GLSL ES如果函数有返回值，必须明确指定返回值类型，没有返回值，需要用void来明确表示没有返回值。
数据类型
数值类型：整数int和浮点数float
布尔值类型：true和false
变量
a-z,A-Z,0-9和下划线_
首字母不能是数字
不能以gl_,webgl_,_webgl_开头
矢量
vec2、vec3、vec4 具有2、3、4个浮点数元素的矢量
ivec2、ivec3、ivec4 具有2、3、4个整型元素的矢量
bvec2、bvec3、bvec4 具有2、3、4个布尔值元素的矢量
矩阵
mat2、mat3、mat4 22、33、4*4的浮点数元素的矩阵
列主序排序
在这里插入图片描述

访问元素
x,y,z,w 用来获取顶点坐标分量
r,g,b,a 用来获取颜色分量
s,t,p,q 用来获取纹理坐标分量

全局变量和局部变量

attribute变量
attribute变量只能出现在顶点着色器中，只能被声明为全局变量，被用来表示“逐顶点”的信息。顶点着色器中能够容纳的attribute变量的最大数目与设备有关，你可以通过访问内置的全局常量获取该值。但是，支持WebGL环境都支持至少8个attribute变量。
逐顶点：如果线段有两个顶点（4.0,3.0，6.0）和（8.0,3.0,0.0），这两个坐标都会传递给attribute变量，而线段上的其他点，比如中点（6.0,3.0,3.0）虽然也被画了出来，但他不是顶点，坐标不曾传递给attribute变量，也未被顶点着色器处理过。
uniform变量
可以用在顶点着色器和片元着色器中，且必须是全局变量。uniform变量是只读的，它可以是除了数组或结构体之外的任意类型。如果顶点着色器和片元着色器中声明了同名的uniform变量，那么它就会被两种着色器共享。
varying变量
必须是全局变量，它的任务是从顶点着色器向片元着色器传输数据。我们必须在梁总着色器中声明同名、同类型的varying变量。它的类型只能是以下类型：float、vec2、vec3、vec4、mat2、 mat 3、mat4。
精度限定字
GLSL ES新引入了精度限定字，目的是帮助着色器程序提高运行效率，消减内存开支。使用精度限定字，你就能够精细地控制程序在效果和性能间的平衡。
在这里插入图片描述

变换矩阵知识回顾

如果您将平面中的某个点视为1×2矩阵, 则可以通过将该点与2×2矩阵相乘来转换该点。下图显示了应用于点的多个转换 (2, 1)。
在这里插入图片描述

第三部分绘制和变换三角形

在这里插入图片描述

第四部分颜色和纹理

图形装配过程：将孤立的顶点坐标装配成几何图形。几何图像的类别由gl.drawArrays()函数的第一个参数决定的
图片光栅化：发生在顶点着色器和片元着色器之间的从图形到片元的转化
gl.vertexAttribPointer()的步进和偏移参数
我们一旦将几种“逐顶点”的数据（坐标和尺寸）交叉存储在一个数组中，并将数组写入一个缓冲区对象。WebGL就需要有差别地从缓冲区中获取某种特定数据（坐标或尺寸）
在这里插入图片描述

几何图形装配和光栅化过程

在这里插入图片描述

调用片元着色器

在这里插入图片描述

varying内插过程

在这里插入图片描述
考虑一条两个端点的颜色不同的线。一个端点的颜色（1.0,0.0，0.0），而另一个端点的颜色为（0.0,0.0,1.0）；我们在顶点着色器中向varying变量v_color附上这两个颜色，那么WebGL就会自动地计算出线段上的所有点（片元）的颜色。
在这里插入图片描述
备注：本文分享主要是把“WebGL编程指南”上半部分进行归纳总结，后续还会提供更详细的学习分享，如矩阵变化原理，光栅化原理，各位读者如遇到具体问题可下载原文档进行深入研究和学习，链接附有对应的code进行实例演习。
[WebGL编程指南下载链接]https://pan.baidu.com/s/1XbMRsEewqSGOCj7A1rTwgw 提取码: 7yiv