我是glsl的新手，一直在努力了解片段着色器在此图像纹理处理中的工作方式。 https://tympanus.net/codrops/2016/05/03/animated-heat-distortion-effects-webgl/
有人可以帮助我理解片段着色器如何使用纹理的颜色信息将颜色分配给每个像素吗？
该站点上有一个简单的示例代码。
void main(){
vec4 color=texture2D(texture,position);
gl_FragColor=color;
}
我知道“纹理”是纹理的颜色信息，“位置”是纹理的坐标。
那么，现在，用vec4颜色输入什么值？ 显然是vec4（r，g，b，a），但是我真的不明白它是如何工作的。
如果我理解的只是一个简单的vec4（0.5，0.5，0.6，1.0），但是使用texture2D（texture，position）会发生什么？
然后，通过将此vec4颜色分配给gl_FragColor，接下来在WebGL中呈现该颜色到底会发生什么？
main（）方法运行的那一刻，颜色是立即分配给每个像素的吗？还是从左上到右下分配给像素？
我对于此代码也有另一个疑问。 （此代码使渲染的图像失真。 https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2016/05/distortion-slant.jpg）
在x坐标上添加“失真”时，为什么渲染的图像可能会失真？
当片段着色器读取纹理的颜色时，它是否获得x坐标的颜色，该x坐标的颜色与原始位置发生“变形”而向右偏移？
再次，我不知道这里到底发生了什么……
void main(){
float distortion=position.y*0.2;
vec4 color=texture2D(texture,vec2(position.x+distortion,position.y));
gl_FragColor=color;
}
我提到了一堆文件，但是找不到任何好的解释。谁能一步一步地解释上面片段着色器中到底发生了什么？
非常感谢您。