Explore vertexshaderart.com for a unique experience in puzzle-solving, art creation, and creative coding. While it may not showcase the best WebGL techniques, it offers an intriguing platform similar to shadertoy.com. Despite its beauty, creations on sites like this one often run at lower fps compared to mainstream games.
The essence of vertexshaderart and shadertoy lies more in artistic expression rather than practical use.
On vertexshaderart, you work with a count labeled as `vertexId` that increments through vertices. By manipulating this count, you can generate vertex positions along with colors using math operations.
To illustrate, let's first create a grid using Canvas 2D:
function ourPseudoVertexShader(vertexId, time) {
var x = Math.floor(vertexId / 6) + (vertexId % 2);
var y = (Math.floor(vertexId / 2) + Math.floor(vertexId / 3)) % 2;
var triangleId = Math.floor(vertexId / 3);
var color = triangleId % 2 ? "#F00" : "#0F0";
return {
x: x * 0.2,
y: y * 0.2,
color: color,
};
}
To visualize the grid, we iterate over `vertexCount` supplying `vertexId` values:
for (var count = 0; count < vertexCount; count += 3) {
var position0 = ourPseudoVertexShader(count + 0, time);
var position1 = ourPseudoVertexShader(count + 1, time);
var position2 = ourPseudoVertexShader(count + 2, time);
// draw triangle
ctx.beginPath();
ctx.moveTo(position0.x, position0.y);
ctx.lineTo(position1.x, position1.y);
ctx.lineTo(position2.x, position2.y);
ctx.fillStyle = position0.color;
ctx.fill();
}
In WebGL, the process involves buffering the counts and passing them as attributes to the shader for rendering.
The corresponding WebGL shader:
attribute float vertexId;
uniform float time;
varying vec4 v_color;
void main() {
float x = floor(vertexId / 6.) + mod(vertexId, 2.);
float y = mod(floor(vertexId / 2.) + floor(vertexId / 3.), 2.);
float triangleId = floor(vertexId / 3.);
v_color = mix(vec4(0, 1, 0, 1), vec4(1, 0, 0, 1), mod(triangleId, 2.));
gl_Position = vec4(x * 0.2, y * 0.2, 0, 1);
}
Both variants achieve the same visual output but differ in implementation across platforms.
Visit the provided link for tutorials and further exploration!