Shader Learn

05 从数据到顶点

顶点与片元的几种输出

从基础灰色小点开始。逐个打开开关,看位置、大小、数据和颜色分别改变什么。

讲解

带下划线的数字可以左右拖动

gl_Position · 位置
gl_Position = vec4(aPosition * , 1.0);

aPosition 是每个点的输入坐标。

gl_PointSize · 大小
gl_PointSize = uPixelRatio * ;

uPixelRatio 适配屏幕像素密度。

vTone · 顶点 → 片元
vTone = 0.7;

aUv.x 是横向坐标。

gl_FragColor · 颜色
gl_FragColor = vec4(vec3(vTone), 1.0);

coral / mint:两种 RGB 颜色。

两个 main:顶点算位置,片元算颜色。varying 负责传值。

两个 main:顶点 main 输出位置和大小,片元 main 输出颜色,varying 负责把数据带过去。

试一试

  • 逐个打开四个开关
  • 只开颜色、不开 varying,结果如何?