使用regl,我正在尝试使用WebGL绘制一个三角形,在三角形内部的某个参考点定义一个颜色,并使其他像素的颜色与它们到该点的距离成为一个函数关系。
目前为止,只有当这个参考点是其中一个角落时才有效:
从角落渐变 这是使用以下的顶点和片段着色器完成的:
这里的参考点是[1,0],[0,1]和[-1,-1]。使用相同的三角形,我如何在[0,0]处放置另一个参考点,例如白色?(这将在三角形内部形成一个“岛屿”)
目前为止,只有当这个参考点是其中一个角落时才有效:
从角落渐变 这是使用以下的顶点和片段着色器完成的:
vert: `
precision mediump float;
uniform float scale;
attribute vec2 position;
attribute vec3 color;
varying vec3 fcolor;
void main () {
fcolor = color;
gl_Position = vec4(scale * position, 0, 1);
}
`,
frag: `
precision mediump float;
varying vec3 fcolor;
void main () {
gl_FragColor = vec4(sqrt(fcolor), 1);
}
`,
attributes: {
position: [
[1, 0],
[0, 1],
[-1, -1]
],
color: [
[1, 0, 0],
[0, 1, 0],
[0, 0, 1]
]
},
uniforms: {
scale: regl.prop('scale')
}
这里的参考点是[1,0],[0,1]和[-1,-1]。使用相同的三角形,我如何在[0,0]处放置另一个参考点,例如白色?(这将在三角形内部形成一个“岛屿”)