Colored Triangle Renderer

Build a simple WebGL renderer that draws a triangle with per-vertex colors using headless rendering.

Requirements

Create a module that sets up a WebGL context and renders a triangle where each vertex has both position and color data. The triangle should have:

• Vertex 1 at position (0, 0.5) with red color (1, 0, 0)
• Vertex 2 at position (-0.5, -0.5) with green color (0, 1, 0)
• Vertex 3 at position (0.5, -0.5) with blue color (0, 0, 1)

The vertex data should be stored in a single buffer with interleaved position and color attributes. Each vertex should contain:

• 2 floats for position (x, y)
• 3 floats for color (r, g, b)

The module should:

1. Create a 256x256 pixel rendering context
2. Set up vertex and fragment shaders that support position and color attributes
3. Store the vertex data in a buffer with interleaved layout
4. Configure the attribute pointers to read position and color from the buffer
5. Render the triangle
6. Return the pixel data from the framebuffer

Test Cases

• When rendering the triangle, the pixel at (128, 64) should have a red component greater than 200 @test
• When rendering the triangle, the pixel at (64, 192) should have a green component greater than 200 @test
• When rendering the triangle, the pixel at (192, 192) should have a blue component greater than 200 @test

Implementation

@generates

API

/**
 * Renders a colored triangle and returns the pixel data
 * @returns {Uint8Array} RGBA pixel data (256x256x4 bytes)
 */
function renderColoredTriangle();

module.exports = { renderColoredTriangle };

Dependencies { .dependencies }

gl { .dependency }

Provides headless WebGL context creation and rendering capabilities.

@satisfied-by