Glsl 在三角形内使用参考颜色进行WebGL插值

使用regl，我试图用WebGL绘制一个三角形，在这里我可以在三角形内部的某个参考点定义一种颜色，并使其他像素的颜色成为它们到该点的距离的函数

到目前为止，它仅在该参考点是角点之一时有效：

从拐角处开始的坡度

这是使用以下垂直和Frag着色器完成的：

vert:`
精密中泵浮子；
均匀浮标；
属性向量2位置；
属性向量3颜色；
可变vec3颜色；
空干管（）{
fcolor=颜色；
gl_位置=vec4（刻度*位置，0,1）；
}
`,
frag：`
精密中泵浮子；
可变vec3颜色；
空干管（）{
gl_FragColor=vec4（sqrt（fcolor），1）；
}
`,
属性：{
职位：[
[1, 0],
[0, 1],
[-1, -1]
],
颜色：[
[1, 0, 0],
[0, 1, 0],
[0, 0, 1]
]
},
制服：{
比例：regl.prop（“比例”）
}

这里的参考点是[1,0]、[0,1]和[-1，-1]。对于相同的三角形，如何在[0,0]处放置另一个参考点，例如白色？（这将在三角形内部形成一个白色的“岛”）

您必须定义两个变量，一个用于参考点的坐标，另一个用于参考点的颜色：

uniforms: {
    scale: regl.prop('scale'),
    refPoint: [0, 0],
    refColor: [1, 1, 1]
}

通过

variable

变量将顶点坐标从顶点着色器传递到片段着色器：

precision mediump float；
均匀浮标；
属性向量2位置；
属性向量3颜色；
可变vec2 FPO；
可变vec3颜色；
void main（）
{
fpos=位置；
fcolor=颜色；
gl_位置=vec4（刻度*位置，0,1）；
}

通过以下方式计算从参考点到片段着色器中插值位置的距离：

float dist=距离（参考点，FPO）；

根据距离插值颜色，方法是：

vec3 micColor=mix（refColor、fcolor、dist）；

片段着色器：

precision mediump float；
均匀vec2参考点；
颜色均匀；
可变vec2 FPO；
可变vec3颜色；
void main（）
{
浮动距离=距离（参考点，FPO）；
vec3 micColor=mix（refColor、fcolor、dist）；
gl_FragColor=vec4（sqrt（micColor），1）；
}

---

谢谢你的回答！是否有任何理由在Frag着色器中而不是在顶点着色器中计算插值（然后将其传递给Frag）？@Ren是的，因为插值颜色取决于到与片段关联的位置的距离。必须在片段着色器中计算此距离。如果在顶点中计算，则每个顶点的计算次数为3次。因此，例如，如果点位于三角形的中心，那么到3个角点的距离是相同的，并且碎片上的插值将为每个碎片提供相同的结果。非常感谢：）祝您愉快！