[英]When does interpolation happen between the vertex and fragment shaders in this WebGL program?
I'm looking at this example code from the WebGL2 library PicoGL.js .我正在查看来自 WebGL2 库PicoGL.js的示例代码。
It describes a single triangle (three vertices: (-0.5, -0.5), (0.5, -0.5), (0.0, 0.5)
), each of which is assigned a color (red, green, blue) by the vertex shader:它描述了一个三角形(三个顶点:
(-0.5, -0.5), (0.5, -0.5), (0.0, 0.5)
),每个三角形都由顶点着色器分配一个颜色(红、绿、蓝):
#version 300 es
layout(location=0) in vec4 position;
layout(location=1) in vec3 color;
out vec3 vColor;
void main() {
vColor = color;
gl_Position = position;
}
The vColor
output is passed to the fragment shader: vColor
output 被传递给片段着色器:
#version 300 es
precision highp float;
in vec3 vColor;
out vec4 fragColor;
void main() {
fragColor = vec4(vColor, 1.0);
}
and together they render the following image:它们一起呈现以下图像:
My understanding is that the vertex shader is called once per vertex, whereas the fragment shader is called once per pixel.我的理解是顶点着色器每个顶点调用一次,而片段着色器每个像素调用一次。
However, the fragment shader references the vColor
variable, which is only assigned once per call to each vertex, but there are many more pixels than vertices!但是,片段着色器引用了
vColor
变量,每次调用每个顶点只分配一次,但是像素比顶点多得多!
The resulting image clearly shows a color gradient - why?生成的图像清楚地显示了颜色渐变 - 为什么? Does WebGL automatically interpolate values of
vColor
for pixels in between vertices? WebGL 会自动为顶点之间的像素插入
vColor
的值吗? If so, how is the interpolation done?如果是这样,插值是如何完成的?
The khronos OpenGL wiki - Fragment Shader has the answer. khronos OpenGL wiki - 片段着色器有答案。 Namely:
即:
Each fragment has a Window Space position, a few other values, and it contains all of the interpolated per-vertex output values from the last Vertex Processing stage .
每个片段都有一个 Window 空间 position 和一些其他值,它包含来自最后一个顶点处理阶段的所有插值的每个顶点 output 值。
(Emphasis mine) (强调我的)
Yes, WebGL automatically interpolates between the values supplied to the 3 vertices.是的,WebGL 会自动在提供给 3 个顶点的值之间进行插值。
A linear interpolation from one value to another would be this formula
从一个值到另一个值的线性插值将是这个公式
result = (1 - t) * a + t * b
Where
t
is a value from 0 to 1 representing some position betweena
andb
.其中
t
是从 0 到 1 的值,表示a
和b
之间的一些 position。 0 ata
and 1 atb
.0 在
a
和 1 在b
。For varyings though WebGL uses this formula
尽管 WebGL 使用这个公式,但对于变化
result = (1 - t) * a / aW + t * b / bW ----------------------------- (1 - t) / aW + t / bW
Where
aW
is theW
that was set ongl_Position.w
when the varying was as set toa
andbW
is theW
that was set ongl_Position.w
when the varying was set tob
.其中
aW
是当变量设置为a
时在gl_Position.w
上设置的W
,bW
是当变量设置为b
时在gl_Position.w
上设置的W
The site linked above shows how that formula generates perspective correct texture mapping coordinates when interpolating varyings上面链接的站点显示了该公式在插值变化时如何生成透视正确的纹理映射坐标
It also shows an animation of the varyings changing它还显示了变化的 animation
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.