Is it possible to give a webgl point not a color but a color gradient?
In webgl I have created a 2D grid consisting of points with a position and a size using this minimal vertex shader:
<code>precision mediump float;
uniform int size;
attribute vec2 position;
attribute vec3 color;
varying vec3 vcolor;
void main() {
gl_PointSize = float(size);
gl_Position = vec4(position.x, position.y, 0.0, 1.0);
vcolor = color;
}
</code>
<code>precision mediump float;
uniform int size;
attribute vec2 position;
attribute vec3 color;
varying vec3 vcolor;
void main() {
gl_PointSize = float(size);
gl_Position = vec4(position.x, position.y, 0.0, 1.0);
vcolor = color;
}
</code>
precision mediump float;
uniform int size;
attribute vec2 position;
attribute vec3 color;
varying vec3 vcolor;
void main() {
gl_PointSize = float(size);
gl_Position = vec4(position.x, position.y, 0.0, 1.0);
vcolor = color;
}
I can set the color of a point with a fragment shader like this:
<code>precision mediump float;
varying vec3 vcolor;
void main() {
gl_FragColor = vec4(vcolor, 1.0);
}
</code>
<code>precision mediump float;
varying vec3 vcolor;
void main() {
gl_FragColor = vec4(vcolor, 1.0);
}
</code>
precision mediump float;
varying vec3 vcolor;
void main() {
gl_FragColor = vec4(vcolor, 1.0);
}
But would it be possible to create a gradient across a single point like in this triangle example?