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 toy(webgl使用glsl规范)

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

shader editor(goole插件或者网页）

Shdr Editor

shader-scholl

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

geeks3d

Shader Library (GLSL) | Geeks3D

glsl参考

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

​