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提交数据

你可能感兴趣的:(学习)