ODOS —— One Day One Shader 努力日更的学习计划。 包括但不限于基于Shadertoy、UnityShaderLab等平台的shader学习笔记
写在前面
上个学期为了实习面试，飞快地读完了冯乐乐老师的《Unity Shader入门精要》，大体上对光照计算有了比较初步的认识，但还对shader语言的掌握还是感觉很浅显，不太能运用在实际生产之中。另一方面二女士记忆力实在是不太行，学习过程中的笔记总是这边记点儿那边记点儿，真的要用的时候永远找不到...于是建了这个blog，希望可以在记录学习过程的同时稍微做一点产出~ ODOS希望先从shadertoy开始，先玩玩基础shader恢复一下手感，浅尝一下glsl语法下的程序化纹理生成，后续还是会回到unity，需要研究一下HDRP的材质系统。 let's go! =33
关于ShaderToy
ShaderToy可以理解为一张基于pixel shader的canvas画布，在生成每一个像素点时都会调用主函数mainImage()函数。 void mainImage( out vec4 fragColor, in vec2 fragCoord );
其中fragCoord包括着色器用来计算颜色的像素坐标。坐标是以像素为单位，精确范围从0.5 到-0.5,
覆盖渲染表面，其中分辨率通过iResolution参数传递给着色器。产生的结果颜色由四位向量储存在
fragColor里, 最后一位被接受端忽略。 在未来用于叠加多个渲染目标时，结果作为“输出”参数储存。Shadertoy包含许多内置变量，iResolution就是其中之一：
uniform vec3 iResolution; // viewport resolution (in pixels)
如果将画布理解为渲染一个正好覆盖镜头的平面，那么通过iResolution即可求得平面的uv：
vec2 uv = fragCoord/iResolution.xy;
Checker Board
棋盘格无非就是获取u/v两个方向上的周期变化，再进行异或运算。在这里通过mod(coord/size,2.0)以获得周期变化，也可以frac()配合step0.5达到相同的目的。
float size = 30.;
float c = mod(floor(fragCoord.x/size),2.0);
uv两个方向整理进函数。
float checkerboard(vec2 coord, float size){
vec2 pos = floor(coord/size);
return mod(pos.x+pos.y,2.0);
}
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
float size = 30.;
float c = checkerboard(fragCoord,size);
fragColor = vec4(c,c,c,1.0);
}
再加一点点移动要素....（咦！为什么gif不动）
fragCoord += iTime*50.0;
就...就没了。今天主要工作是装修网站，更新就水那么一点。
即便很水，还是要整一个炫酷预览————
晚安！回寝睡觉！
Today's Tips
- Shadertoy会严格限制参与运算的数据类型，比如“0”就会严格识别为int而报错，输入“0.”即可声明其为float类型。
参考资料：
- How To - Shadertoy BETA
by ERIN.Z