WebGL 基础知识点

最新推荐文章于 2024-10-29 17:18:36 发布

小白菜学前端

最新推荐文章于 2024-10-29 17:18:36 发布

阅读量1.2k

点赞数 37

分类专栏： WebGl 文章标签： webgl

本文链接：https://blog.youkuaiyun.com/dlmyrt/article/details/143207578

版权

WebGl 专栏收录该内容

15 篇文章

订阅专栏

1. 语言基础

着色器：由顶点着色器和片源着色器组成。顶点着色器处理顶点数据，片源着色器处理像素颜色。
缓冲区：用于存储顶点数据、索引数据等，可以通过WebGL的API进行管理和上传到GPU。
着色器程序：由编译后的顶点着色器和片段着色器组成，是WebGL执行图形渲染的核心。

1.1 语法特点

大小写敏感：变量和函数名称区分大小写。
分号结尾：每条语句结束时必须加上分号。
main函数：每个着色器程序都必须包含一个main函数，它是程序执行的入口点。
注释：单行注释使用//，多行注释使用/* */。
数据类型：支持整数（int）、浮点数（float）、布尔值（bool）等基本数据类型。

1.2 变量和类型

变量声明：需要指定变量类型，如 float f = 1.1。
变量命名：不能以数字开头，不能使用关键字或保留字作为变量名。
类型转换：可以通过类型转换函数进行数据类型之间的转换。

1.3 运算符和控制流

运算符：包括算术运算符、赋值运算符、比较运算符等，语法与C语言类似。
控制流：支持if、for、while等控制语句，用于控制程序的执行流程。

2. 矢量和矩阵

2.1 矢量

vec2、vec3、vec4 具有2，3，4个浮点数元素的矢量
ivec2、ivec3、ivec4具有2,3，4个整型元素的矢量
bvec2、bvec3、bvec4具有2，3，4个布尔值元素的矢量

2.1.1 通过构造函数来进行赋值

// vec4 就是矢量的构造函数
vec4 position=vec4(0.0,0.0,0.0,1.0);

2.1.2 访问分量

x，y，z，w 访问顶点坐标的分量
s，t，p，q 访问纹理坐标分量

// 访问单个矢量
vec4 position=vec4(0.1,0.2,0.3,1.0)
position.x // 0.1
position.y // 0.2
position.z // 0.3

// 访问多个矢量
vec4 position=vec4(0.1,0.2,0.3,1.0)
position.xy  // vec2(0.1，0.2)
position.yx  // vec2(0.2，0.1)
position.zyx // vec3(0.3，0.2，0.1)

2.2 矩阵

mat2、mat3、mat42*2，3*3，4*4的浮点数元素矩阵
矩阵入参，注意:矩阵参数是列主序的

mat4 m = mat4(
    1.0, 5.0,  9.0, 13.0,
    2.0, 6.0, 10.0, 14.0,
    3.0, 7.0, 11.0, 15.0,
    4.0, 8.0, 12.0, 16.0,
);

3.纹理取样器

3.1 纹理取样器的类型

sampler2D：用于二维纹理。
samplerCube：用于立方体纹理。

3.2 创建和使用纹理取样器

纹理取样器变量通常声明为uniform类型

// 声明二维纹理
uniform sampler2D uSampler;

// 声明立方体纹理
uniform samplerCube uSamplerCube;

使用gl.uniform1i来指定取样器应该引用哪个纹理单元

// 将uSampler与纹理单元0关联
gl.uniform1i(uSampler, 0);

3.3 纹理采样函数

在着色器中，纹理采样函数texture2D用于从纹理中获取颜色值。

gl_FragColor = texture2D(uSampler, vTex);

这里的vTex是从顶点着色器传递到片元着色器的纹理坐标。

3.4 纹理参数

在WebGL中，可以通过gl.texParameteri函数设置这些参数。

TEXTURE_MIN_FILTER
TEXTURE_MAG_FILTER
TEXTURE_WRAP_S
TEXTURE_WRAP_T

3.5 传纹理图像数据

// 二维纹理 只传入一面图像
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, img);

// 立方体纹理 需要处理六个面
gl.texImage2D(gl.TEXTURE_CUBE_MAP_POSITIVE_Z, 0, gI.RGB, gI.RGB, gI.UNSIGNED BYTE, images[0]);
gl.texImage2D(gl.TEXTURE_CUBE_MAP_NEGATIVE_Z, 0, gI.RGB, gI.RGB, gI.UNSIGNED BYTE, images[1]);
gl.texImage2D(gl.TEXTURE_CUBE_MAP_POSITIVE_X, 0, gI.RGB, gI.RGB, gI.UNSIGNED BYTE, images[2]);
gl.texImage2D(gl.TEXTURE_CUBE_MAP_NEGATIVE_X, 0, gI.RGB, gI.RGB, gI.UNSIGNED BYTE, images[3);
gl.texImage2D(gl.TEXTURE_CUBE_MAP_POSITIVE_Y, 0, gI.RGB, gI.RGB, gI.UNSIGNED BYTE, images[4]);
gl.texImage2D(gl.TEXTURE_CUBE_MAP_NEGATIVE_Y, 0, gI.RGB, gI.RGB, gI.UNSIGNED BYTE, images[5]);