CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-gl

Creates a WebGL context without a window for headless rendering and server-side graphics

Overall
score

96%

Overview
Eval results
Files

task.mdevals/scenario-1/

Server-Side Image Processor

Build a server-side image processing utility that performs GPU-accelerated operations without requiring a display or browser environment.

Requirements

Create a module that:

  1. Initializes a rendering environment capable of hardware-accelerated graphics operations with support for modern graphics API features
  2. Configures the environment with custom buffer settings including alpha channel and depth buffer support
  3. Processes image data by reading pixel values from the rendering output
  4. Properly manages resources to avoid memory leaks in long-running server processes

Specifications

Environment Setup

  • Create a rendering context with dimensions 512x512 pixels
  • Enable support for modern graphics API features (specifically version 2.0 capabilities)
  • Configure the context with:
    • Alpha channel enabled
    • Depth buffer enabled
    • Stencil buffer disabled

Image Processing

  • Implement a function clearToColor(r, g, b, a) that:

    • Sets the clear color using provided RGBA values (0.0 to 1.0 range)
    • Clears the rendering buffer
    • Returns pixel data as a Uint8Array in RGBA format
  • Implement a function getPixelAt(x, y) that:

    • Reads a single pixel at the specified coordinates
    • Returns an array [r, g, b, a] with values in 0-255 range

Resource Management

  • Implement a cleanup() function that properly releases all GPU resources
  • Ensure the cleanup is thorough enough for use in high-volume server environments

Test Cases

  • Clearing to red (1.0, 0.0, 0.0, 1.0) produces pixels with R=255, G=0, B=0, A=255 @test
  • Clearing to semi-transparent blue (0.0, 0.0, 1.0, 0.5) produces pixels with R=0, G=0, B=255, A=127 @test
  • Reading pixel at center (256, 256) after clearing to green returns [0, 255, 0, 255] @test
  • Cleanup function successfully releases resources without errors @test

Implementation

@generates

API

/**
 * Clears the rendering buffer to the specified color.
 *
 * @param {number} r - Red component (0.0 to 1.0)
 * @param {number} g - Green component (0.0 to 1.0)
 * @param {number} b - Blue component (0.0 to 1.0)
 * @param {number} a - Alpha component (0.0 to 1.0)
 * @returns {Uint8Array} Pixel data in RGBA format
 */
function clearToColor(r, g, b, a) {
  // IMPLEMENTATION HERE
}

/**
 * Reads a single pixel at the specified coordinates.
 *
 * @param {number} x - X coordinate
 * @param {number} y - Y coordinate
 * @returns {number[]} Array of [r, g, b, a] values (0-255 range)
 */
function getPixelAt(x, y) {
  // IMPLEMENTATION HERE
}

/**
 * Releases all GPU resources.
 */
function cleanup() {
  // IMPLEMENTATION HERE
}

module.exports = {
  clearToColor,
  getPixelAt,
  cleanup
};

Dependencies { .dependencies }

gl { .dependency }

Provides hardware-accelerated graphics rendering capabilities for Node.js environments.

Install with Tessl CLI

npx tessl i tessl/npm-gl

tile.json