数据传递

opengl以及它的自己webgl，很大一部分工作是用来把数据传递到shader里面去的。如果让我们写一个纯粹的shader，我们也是可以写出来的。例如你可以用下面的代码来画一个2D的圆形。

  1. uniform vec2 u_resolution;
  2. uniform float u_time;
  3. uniform vec2 u_mouse;
  5. float Circle(vec2 uv, float radius, vec2 p, float blur) {
  6.     uv -= p;               // -0.5 <> 0.5
  7.     uv.x *= u_resolution.x / u_resolution.y;
  8.     float d = length(uv);
  9.     float pct = smoothstep(radius, radius-blur, d);
  10.     return pct;
  11. }
  13. void main() {
  15.     vec2 uv = gl_FragCoord.xy / u_resolution.xy; // 0 <> 1
  17.     float mask = Circle(uv, .1, vec2(.5), .005); // create face;
  18.     gl_FragColor = vec4(mask, 1.0);
  19. }

以上我们利用的是一些内置的gl函数来绘制的一个圆形。但是大家都知道，我用webgl绘制一个圆形的方法是接壤不通。

顶点着色

顶点找色起得工作就是在屏幕上对每个点进行计算，然后规定我们shader的作用范围。

细分着色

几何着色

图元装配

剪切

光栅化

成像