LLM Code Generation Put to the Test: A Deep Dive into Front-End 3D Scene Rendering

As parameter counts climb and post-training techniques mature, evaluation of large language models has shifted from simple question answering toward more demanding tasks: long-horizon programming, complex tool calling, and deep reasoning in vertical domains such as 3D creation and financial research. Unlike lightweight models optimized for raw response speed, the value of frontier large models in code generation lies in whether they can understand and implement engineering requirements involving complex spatial structures and physical logic.

To examine how frontier LLMs actually perform on complex code generation tasks, we designed an extreme test built around a front-end 3D visualization scene. By comparing the outputs of two model versions, we analyze their differences in scene composition, rendering mechanisms, and parameter logic, offering a practical reference for developers applying LLMs in real engineering work.

1. Test Scenario Design and Technical Constraints

The test required the model to output a fully offline, single-file native HTML page implementing a 3D scene featuring a giant ring-shaped tidal gate, a terraced sea city, and dynamically rising and falling tides. To genuinely probe the model’s low-level coding ability, we set strict technical constraints and expectations:

1. Zero-dependency, pure native rendering: The generated code had to be based on the native WebGL2 specification, with no external image assets, 3D model files, or third-party libraries (such as Three.js).
2. Materials and composition that hold up: The scene needed to accurately convey the warm-cool contrast between oxidized copper and stone, with the building clusters spread sensibly along both shores.
3. Deeply coupled dynamic logic: The tide could not simply be a blue transparent plane moving up and down. Water level changes had to stay synchronized with other scene elements in real time — ships bobbing with buoyancy, waterline markers shifting, and plaza steps entering and leaving the water.

This kind of test examines not only the model’s ability to assemble code, but also its understanding of 3D spatial planning, the rendering pipeline, and the synchronization of multiple physical state variables.

2. Scene Layout and Visual Organization: A Generational Gap

Given the same prompt, both model versions produced single-file code that conformed to WebGL2, but the generational differences in first-screen visual organization and spatial planning were obvious.

Previous model: stacked elements, lost focus
The older model did successfully build the giant water ring, but it had flaws in camera perspective and space allocation. The mountains on both sides occupied too much of the frame, leaving much of the first screen filled by nearby slopes and distant scenery. The core subject — the terraced sea city — was squeezed into the far end of the bay, and the buildings and plaza lacked visual presence. The overall impression was more like “a ring object stiffly placed on terrain” than a coherent landscape.

Newer model: holistic composition, coherent landscape
The newer model showed a qualitative leap in scene organization. It integrated the giant ring, bridge arches, navigation beacon towers, and layered residential buildings into one coherent visual whole. The building clusters spread naturally along both shores, and the central plaza displayed clear concentric step layers. Through precise tuning of material parameters, the warm-cool contrast between oxidized copper and stone became easy to distinguish — very close to the “complete world” concept requested in the prompt. This indicates that the newer model has stronger global coordination when it comes to understanding complex spatial relationships and assigning visual priority.

3. Water Rendering: Two Very Different Implementations

Water rendering is one of the most technically demanding aspects of a 3D scene, and the two versions diverged sharply in implementation — a direct reflection of their grasp of graphics fundamentals.

Previous model: analytical highlights and lighting simulation
The older model relied mainly on an analytical approach, simulating surface reflections by computing the sky environment, sun highlights, and light streaks. This approach is computationally cheap, but the reflections are “fake” — they have no physical correspondence with the actual buildings on shore, which caps the achievable visual realism.

Newer model: mirror camera and re-rendered sampling
The newer model introduced a far more advanced mirror camera mechanism. The core logic: after rendering the main scene, it constructs a mirrored virtual camera, re-renders the city, ships, and other key objects, then samples the result as a texture on the water surface.

// Pseudocode: mirror camera reflection rendering
function renderWaterReflection() {
    // Enable the mirrored camera view
    mirrorCamera.position.y = -mainCamera.position.y;
    mirrorCamera.rotation.x = -mainCamera.rotation.x;
    // Render the reflected scene to a framebuffer
    renderScene(mirrorCamera, reflectionFrameBuffer);
    // Bind the reflection texture to the water material
    waterMaterial.uniforms.reflectionTexture.value = reflectionFrameBuffer.texture;
}

This is an upgrade at the rendering pipeline level: reflections of shore-side buildings now have a genuine spatial source, greatly improving the scene’s immersion and physical believability.

4. Parameter Logic and Instruction-Following Challenges

Despite the newer model’s clear progress in visual quality and rendering mechanisms, it still exposed a “prioritize appearance, neglect logic” weakness when handling complex parameters such as peak tide levels.

The prompt required that “most of the stone steps should be submerged” at high tide. Reviewing the step heights and maximum water level parameters in the generated source code revealed:

• Newer model: Set the maximum water level for the nine-tier plaza steps too low. Our calculation showed that at high tide, only the lowest four tiers sat below the average water line — failing to fulfill the “most steps submerged” instruction.
• Previous model: Actually defined a broader coverage for the maximum water level, accurately reaching the outermost steps, and performed better on instruction compliance.

This pattern is quite representative of today’s code-generation LLMs. When chasing the visual impact of the “first impression,” models tend to overlook implicit numerical constraints and strict physical logic embedded in the prompt. This kind of parameter alignment gap is a backend problem that the next round of post-training needs to tackle.

5. Practical Recommendations and Engineering Outlook

The performance of LLMs in front-end 3D and complex code generation offers valuable engineering lessons. In practice, we recommend a “human-machine collaboration, step-by-step verification” strategy:

1. Separate architecture generation from detail implementation: Use the LLM to quickly generate the overall scene skeleton and advanced rendering mechanisms (such as mirror reflections), establishing a high-quality visual foundation first.
2. Build a parameter verification loop: For logic involving specific numerical constraints (water levels, physical collision boundaries, and so on), developers should add independent parameter verification scripts, or use logging services and monitoring/alerting mechanisms to review and fine-tune hardcoded parameters produced by the model.
3. Iterate with cloud computing resources: Compiling and debugging complex 3D scenes often demands significant compute. Developers can use container platforms and elastic computing resources to quickly deploy the generated code and verify it visually online.

Overall, the “first impression” delivered by frontier LLMs in code generation is already impressive — they can handle complex low-level architecture design and advanced feature implementation. But to cross the last mile from “usable” to “precisely controllable,” continued polishing is needed in mathematical reasoning, parameter alignment, and other backend capabilities. That remains the core technical challenge for the AI coding tools industry in its next phase.