shader着色器

数学

齐次坐标：点p=a+b+c+o(原点),向量p=a+b+c,所以向量的其次坐标（a,b,c,0)，点（a,b,c,n）
其次坐标变换，n>1放大，n<1缩小
对称变换

| -1 0 0 0 |
| 0 1 1 0 |
| 0 0 1 0 |
| 0 0 0 1 |

参考：齐次坐标变换_走过_冬天的博客-CSDN博客_齐次坐标变换

四元数：(x,y,z,w),（x,y,z）表示向量，w表示旋转角度，
四元数q1*q2叉乘：

(w1w2 - x1x2 - y1y2 - z1z2) +
(w1x2 + x1w2 + y1z2 - z1y2) i +
(w1y2 - x1z2 + y1w2 + z1x2) j +
(w1z2 + x1y2 - y1x2 + z1w2) k

参考：四元数基础 - 圣骑士wind - 博客园

glsl

顶点shader（负责数据）和片段shader（负责颜色控制，没有顶点shader也可以直接控制颜色绘图如shadertoy上面的例子）
attribute顶点相关，uniform顶点无关数据，varying顶点和片段之间传递数据
变量前加highp、mediump、lowp精度声明
vec4：rgba、顶点坐标（齐次坐标）、xy成员返回vec2,xyz成员返回vec3
vec3：法线坐标（顶点所在面的法线）、
vec2：纹理坐标
sampler2D：访问二维纹理
raymarch：光线步进（3dmax中的射线检测）
sdf：符号距离函数，物体外部点值>0,物体内部点值<0,物体表面上的点==0

• 顶点缓冲区Vetex Buffer，存储点数据
• 索引缓冲区Index Buffer，存储顶点缓冲去的索引数据，减少数据重复，索引缓冲区存储的面或者空间数据
• GRADIENT_TRIANGLE、GRADIENT_RECT顶点数据，按照如下格式存储
• Bitmap，24位以上不包含调色板，24位以下包含调色板

法线坐标参考：OpenGL中求顶点的法线_GIS_Tracker的博客-CSDN博客_顶点法线

shader运行

shader在以下框架中加载运行

• opengl，webgl

opengl使用glsl语法，开发shader，shader在glCreateProgram中运行，最终渲染出图像数据，通过swapwindow交换后台渲染数据和窗口显示

• directx

directx使用hlsl语法，windows专用

• vulkan，webgpu

opengl的升级版本，渲染效率比window更高，shader需要在renderpieline、copmutepipline管线中运行

gpu渲染通过shader程序执行，vetex和fragment的程序差别大，cpu程序中更容易开发架构
参考：
https://blog.csdn.net/g11d111/article/details/108189198
https://gitee.com/Morphlng/ray-tracing.git 光线追踪cpu实现

shader toy(webgl使用glsl规范)

vscode shader toy 插件
学习的网站：
Shader 绘制基础图形 - 掘金
Shadertoy BETA
The Book of Shaders: Shaping functions

一个简单的demo，shader输入顶点渲染器中的点向量，输出也是点向量，shader实际是一个点到点的函数计算公式算法，gpu循环异步循环所有点，套用shader公式计算输出

vec4 line(vec2 pos,vec2 p1,vec2 p2,float width){
    float k = (p1.y - p2.y)/(p1.x - p2.x);    
    float b = p1.y - k * p1.x;
    float t = distance(vec2(pos.x,k*pos.x+b),pos);    //带锯齿的算法，可以使用点到直线公式画出无锯齿的直线
    if(t<width)
        return vec4(0,0,0,1);
    else
        return vec4(1,1,1,1);
}
void main(){
    vec2 uv = gl_FragCoord.xy/iResolution.xy;
    gl_FragColor = line(uv,vec2(.0,.0),vec2(.3,.4),.01);
}

vscode中shadertoy插件显示如下

shader editor(goole插件或者网页）

Shdr Editor

shader-scholl

cnpm install -g shader-school 运行shader-school命令

geeks3d

Shader Library (GLSL) | Geeks3D

glsl参考

GLSL 基础量定义 - 3D入魔 - 博客园

​