GLSL初入门笔记#1

合集 - GLSL(1)

1.GLSL初入门笔记#12023-07-04

收起

GLSL初入门笔记#1

注意，该笔记只会涉及简单的shader知识，不会深入到shader最底层的工作原理，仅作为我初步尝试学习shader的一个小笔记

所使用的视频教程：Lewis Lepton的Shader Tutorial Series以及百度引擎。由于这个教程不会对函数做更详细解释，所以会借助其他资料来补全里面提及的函数或变量类型等。

软件：VS Code 或 Bonzomatic

为什么会出现Bonzomatic

因为很酷。

嗯。

补充：关于着色器

顶点着色器Vertex

在这个阶段，程序会对模型数据进行计算，得到模型各个点对应屏幕上的哪个像素，即所谓 “模型空间转化为裁剪空间”，并且获得对应的纹理坐标以及光照信息。关于顶点位置例如高度和模型变换等信息都会在此处理。

片元着色器Fragment

经过顶点着色器计算后得到模型对应像素位置，光栅化就交由片元着色器进行处理。片元着色器作为最主要的渲染处理部分，决定了最终视觉效果如何。关于着色部分都会在此处处理。

void main()

就相当于C++里的主函数罢了，但是glsl中main()必须在最底下。作为主要执行区域，他必须存在，否则无法运行。

gl_FragColor()

片元输出器，最终染色结果输出器，接受参数为一个vec4或color，通常作为最终结果输出用。

gl_FragCoord()

片元坐标系，对应了一个模型空间转换至片元空间的关系，最终结果相当于某个片元在整个坐标系内的位置。需要获得其在屏幕上应有的位置则需要除以分辨率

vec2 position = gl_FragCoord.xy / u_resolution;

我开始后悔没好好学线性代数了

uniform

一种可以从顶点着色器传数据给片元着色器的变量定义方法，glsl存在一些内置定义uniform

uniform名	对应意义
u_resolution	屏幕当前分辨率
u_time	系统时间
u_mouse	鼠标位置
待补充	待补充

基于以上内容，画个圆吧

#ifdef GL_ES
precision mediump float;
#endif
 
uniform vec2 u_resolution;
uniform float u_time;
 
float circleshape(vec2 position, float radius)
{
  return step(radius, length(position - vec2(0.5)));
}
 
void main()
{
  vec2 position = gl_FragCoord.xy / u_resolution;
  vec3 color = vec3(0.0);
  float circle = circleshape(position, abs(sin(u_time)*0.3));
  color = vec3(circle);
  gl_FragColor = vec4(color, 1);
}

效果如下：