《The Book of Shader》笔记:前言&&VSCode中搭建glsl编写环境

前言
了解到这本书，是源于这篇文章。
https://zhuanlan.zhihu.com/p/95943444
加上最近恰好也想加深下对shader的理解，干脆先挖个坑，记录下后面读这本书的笔记。

一.环境搭建
首先是练习环境的搭建，先前刚搭建好了 vscode 练习glsl的相关环境。
VSCode + shadertoy插件，安装起来很快。
具体好像是参考的这篇文章
https://panda1234lee.blog.csdn.net/article/details/104456475

另外也看到过有vscode 搭配其他插件的，应该都行。下次有时间看看其他的插件用起来会不会更方便。

这里先上个shader 版 Hello world；

然后实现一下，入坑文章中实现的星空效果。

// 伪随机数，接受一个二维向量，产生一个0到1的数
float random(vec2 st){
// fract() : return x - floor(x)
return fract(sin(dot(st.xy, vec2(565656.233,123123.2033))) * 323434.34344);
}
// 伪随机数，接受一个二维向量，返回x，都是0到1之间的随机二维向量（就是例子里的这些参数也太反人类的。。。。。。）
vec2 random2(vec2 p) {
return fract(sin(vec2(dot(p,vec2(234234.1,54544.7)), sin(dot(p,vec2(33332.5,18563.3))))) *323434.34344);
}

void main () {
// 起手式，好像挺多shader都是这么开始的
vec2 uv = gl_FragCoord.xy/iResolution.xy;
// 将uv 放大十倍,将uv 坐标数值上分别映射到整数部分与小数(0,1)之间
uv *= 10.0;
vec2 ipos = floor(uv);
vec2 fpos = fract(uv);
// 设置星星的坐标
vec2 targetPoint = random2(ipos);
float speed = 0.2;
// 让星星随时间动起来，虽然参数有点反人类
targetPoint = 0.5 + 0.4 * sin(iTime * speed + 6.2831*targetPoint);
float dist = length(fpos - targetPoint);
float brightness = sin(iTime * speed + 6.2831 * targetPoint.x);

vec3 color = vec3(1. - step(0.013, dist)) * brightness;
// 最后的结尾
gl_FragColor = vec4(color,1.0);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
装好插件后，右键会出现这个选项，点击后

就可看到画出的星空。（动态效果就自己写完蛮看蛮看吧）

 

 

二.关于The Book of Shader
这是网址
https://thebookofshaders.com/

目前作者完成的章节是前几节带下划线的章节，后面几章仅有代码。

 

 

————————————————
版权声明：本文为CSDN博主「碧海潮生_CC」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_44374193/article/details/109324033