# shader

**Repository Path**: yz_2021/shader

## Basic Information

- **Project Name**: shader
- **Description**: 学习shader 的一些记录
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-04-26
- **Last Updated**: 2025-05-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


三角形定义三个顶点坐标
var positions = [
    0,0,
    0,0.5,
    0.7,0];

顶点着色器的主要功能是坐标转换，把顶点坐标转换导裁剪坐标，这一步是我们可以控制的
接着由GPU通过裁剪与透视提出法处理后得到标准化设备坐标NDC,透视剔除法通过将裁剪空间里顶点的三个分量都除以w分量 实现裁剪坐标转换导NDC
NDC:的每一个分量都在 -1 到 1 之间，超出部分最终不会呈现，因此再游戏引擎里 无论使用的是局部坐标还是世界坐标都需要经过坐标转换，最终GPU会将NDC转换成屏幕坐标传入光栅器


纹理映射：就是将一张图片映射到一个几何图形的表面上去
纹理映射的作用是根据纹理图形为光栅化后的每个片元涂上适当的颜色，组成纹理图像的像素又称为纹素
纹理环绕方式
GL_REPEAT:重复纹理图像
GL_MIRRORED_REPEAT:镜像重复纹理图像
GL_CLAMP_TO_EDGE:纹理坐标会被约束在0到1之间，超出的部分会重复纹理坐标的边缘，产生一种边缘被拉伸的效果
GL_CLAMP_TO_BORDER:超出的坐标为用户指定的边缘颜色
纹理过滤
GL_NEAREST:使用最邻近插值算法来采样纹理
GL_LINEAR:使用双线性插值算法来采样纹理

图片跨域问题 安装本地服务器
npm install http-server
//使用下面命令运行 得到网址
npx http-server

解决浏览器缓存问题 f12 打开网络标签 勾选停用缓存
a_ 就是指向定点输入属性 attribute,代表数据从顶点缓冲来
v_ 就是指向片元输出变量 varying 是从顶点着色器的顶点插值而来
u_ 就是全局变量 uniform 可以直接对着顶点着色器或者片元着色器设置


Cocos 3.x shader

基础绘制流程
1.数据准备部分  
    1.1 提供顶点数据，在Cocos 3.x中也准备了很多顶点数据 例如 2d的渲染组件 Sprite, Graphics 等 
     3D 的模型组件 MeshRenderer, SkinnedMeshRenderer 等都可以提供顶点数据，用户也可以自定义顶点数据，这部分涉及到渲染管线及引擎底层
2.画布清除
    2.1 这部分跟相机有关，因为游戏场景往往是有很多对象构成，但是实际呈现的画面只有其中一小部分，呈现的部分就是相机照射的部分，由于我们的画布只有一块，因此由相机决定是否擦除之前的内容重新绘制，或者在原有的内容基础上继续绘制
3.着色指令
    3.1这部分就类似于顶点，片元文本的编写，在Cocos 3.x 是通过cocos effect来实现的