LLM Ultimate Challenge: Interactive GLSL Shader Art
This benchmark tests an LLM's ability to handle a multi-language, algorithmically complex task. It requires generating a single HTML file with JavaScript (using Three.js) to manage the scene, and GLSL shader code to render a dynamic, interactive fractal. This evaluates advanced knowledge of mathematics, GPU programming, and system integration.
Prompt
You are a creative coder and an expert in computer graphics, specializing in Three.js and GLSL shaders. Mission: Create a visually stunning, interactive, and animated fractal art piece. The output must be a single, self-contained HTML file. Mandatory Technical & Creative Specifications: Technology: Use the Three.js library, loaded from a CDN. The core fractal rendering logic must be implemented in a GLSL fragment shader, not in JavaScript. The Fractal: Render a Julia Set fractal. The complex constant c that defines the Julia Set's shape must animate smoothly over time, causing the fractal to continuously morph and evolve. The animation should be a slow, circular path in the complex plane. Visuals & Colors: The coloring of the fractal must be based on the number of iterations before a point escapes. The color palette must be a smooth gradient transitioning through "deep indigo -> magenta -> fiery orange -> golden yellow". The colors should pulse and shift slowly with time. Interactivity: Zoom: The user must be able to zoom in and out using the mouse wheel. The zoom should be centered on the cursor's position. Pan: The user must be able to pan the view by clicking and dragging the mouse. Morphing Control: The animation of the Julia Set constant c should be influenced by the mouse's X position. Moving the mouse left and right should alter the path of the animation, changing the shapes being generated. Pause: Pressing the space bar must toggle play/pause for all animations (both the morphing and the color shifting). Action Plan: Before writing any code, describe your plan, including the structure of the HTML, the JavaScript setup with Three.js, and the logic for the GLSL fragment shader (uniform variables, main rendering loop).
A system prompt was added to support web rendering
Answer guidance
A successful response is a single HTML file that runs without errors and perfectly implements all features. Checklist for a perfect score: Does it render a full-screen, animating Julia set? Is the core logic in a GLSL fragment shader? Is the color palette correct and does it shift over time? Do all interactive controls (zoom, pan, mouse-based morphing, space bar pause) work smoothly and correctly? A failure is any response that produces a static image, WebGL errors, has non-functional controls, or uses JavaScript for the main fractal calculation.
