webgl shader学习笔记1

webgl
裁剪坐标-NPC坐标（-1-1）-局部坐标或者世界坐标
webgl会自动剔除反面，只画正面，逆时针三角形为正面

纹理坐标：（2D:TEXTURE_2D 3D:TEXTURE_CUBE_MAP）
纹理环绕方式：REPEAT,MIRRORED_REPEAT,CLAMP_TO_EDGE
REPEAT: 重复模式，对纹理图片尺寸有要求，宽度高度需要为2的整数次幂（32 * 32 ，512 * 512等）
MIRRORED_REPEAT：镜面重复模式
CLAMP_TO_EDGE：边缘拉伸
gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_WRAP_S,gl.CLAMP_TO_EDGE)
纹理过滤：
NEAREST:临近过滤，直接选择中心点最接近纹理坐标的那个像素
LINEAR:线性过滤，选择中心点周围最近的4个纹理像素加权计算出来
// 当进行缩小时
gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MIN_FILTER,gl.NEAREST)
// 当进行放大时
gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MAG_FILTER,gl.LINEAR
坐标转换：
cocos 模型采用顶点数据基本是模型空间坐标
顶点着色器最终输出的是裁剪坐标
模型坐标（模型变换矩阵）------------世界空间坐标（观察矩阵）------------观察空间坐标（投影矩阵）------------裁剪坐标---------标准化设备坐标-----------屏幕坐标
YAML
行首的空格缩放数量代表数据的层级
以连字符和空格开头表示数组元素
模版：&模版名字
<<:继承
Shader:
一个pass就是一次GPU绘制过程
//内置头文件引入
#include chunk-name
#include cc-global
//自定义文件引入
#include ‘路径’
cocos会采用两种方式查找
1:相对于项目目录 assets/chunk 文件夹位置，即使asset没有chunk文件夹，也会假设有个chunk文件夹，并相对于该文件夹路径查找
2:相对于当前文件路径查找
UBO内存布局（uniform buffer object）
cocos shader 所有非sampler的uniform 都必须包含在block中
uniform block{}规则：
1.不应该出现vec3成员，对于数组类型的成员，每个元素的size不能小于vec4
2.不允许引入padding的成员声明顺序：
padding规则：1 所有vec3成员都会补齐至vec4(比如声明了一个vec3,仍然隐式填充为一个vec4,占16个字节)
2 任意长度小于vec4类型的数组和结构体，都会将元素补齐至vec4
(比如float f4[4] 是由一个有四个浮点型成员的数组构成，由于数组的每个分量都小于vec4,，所以每个分量都自动补成vec4,合理的使用方式是使用vec4来使用）
3 所有成员在UBO内的实际偏移都会按自身所占字节数对齐
float f1;
vec2 v2;
float f2;
f1 8字节 vec2 8字节 f2 16字节
所以正确的布局方式是先声明vec4.再声明vec2,最后声明float,float能用vec4就用vec4,这里指属性声明时使用target配置，让数据填充进vec4的一个分量
WebGL抓帧工具
1.drawCall: cpu调用图形接口命令gpu进行渲染的操作。drawcall更高，越卡，需要将很多节点数据合并一起向gpu提交数据