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 负责传值。
JS 这一侧
两个 main:顶点 main 输出位置和大小,片元 main 输出颜色,varying 负责把数据带过去。
试一试
- 逐个打开四个开关
- 只开颜色、不开 varying,结果如何?