Testing LLM Front-End 3D Generation: First Impressions vs. Real-World Stress Tests

    Front-end 3D generation is a crucial benchmark for evaluating Large Language Models (LLMs), as it directly tests code correctness, spatial layout, visual aesthetics, and animation systems. This article details a comparative test where models were tasked with generating a single offline WebGL2 HTML file featuring a giant ring floodgate and a stepped sea city with interactive tide dynamics. While new model versions show significant improvements in scene organization and rendering mechanisms—such as implementing standard planar reflections—edge-case testing reveals shortcomings in boundary condition handling. We also outline a reusable evaluation framework for tracking model iterations, emphasizing the transition from impressive demos to production-ready capabilities.

    Why Front-End 3D Generation is a Crucial Benchmark

    The release cadence of flagship LLMs is accelerating, but the marginal differences in benchmark scores are becoming increasingly difficult for average developers to perceive directly. In contrast, front-end 3D generation tasks offer several natural advantages:

    1. Directly Observable Results: A screenshot or screen recording can immediately demonstrate differences without relying on obscure benchmark scores.
    2. Strictly Constrained by Nature: The code must run, the visuals must hold up, and interactions must be linked. A failure in any single环节 will be instantly exposed.
    3. Comprehensive Capability Assessment: It simultaneously stress-tests code correctness, spatial layout, visual aesthetics, animation systems, and instruction following.

    This article uses a practical comparison as an example. The models were required to produce an offline HTML file using native WebGL2, with zero reliance on external images, model files, or third-party graphics libraries. The scene needed to include a giant ring floodgate and a stepped sea city, supporting interactive tide rising and falling. Two hard constraints were established in the prompt:
    First, the composition, architecture, and materials must be fundamentally solid.
    Second, the tide dynamics couldn’t just rely on raising and lowering a flat blue plane—boats, waterlines, and the flooded state of the plaza must react cohesively.

    These two constraints filter out two types of “passing-grade” models: the former eliminates versions with chaotic visual organization, while the latter eliminates those that merely stack geometric shapes without systemic modeling capabilities.

    Test Design: Pinning Down the Variables

    The biggest taboo in comparative testing is “looking like you’re comparing models, but actually comparing luck.” To ensure differences stem from the models themselves, the following variables must be controlled:

    • Unified Prompt: Both versions used verbatim instructions.
    • Unified Inference and Sampling Settings: Same interaction mode and parameter tier.
    • Unified Time Window: The performance of online model services fluctuates over time (due to routing strategies, quantization version switches, etc., which are common industry possibilities). Comparisons must be compressed into a single time window.
    • Clear Acceptance Checklist: Double-click to run locally; runs offline; no external network requests; scene elements complete; tidal linkage functional.

    Only by satisfying these four points can subsequent perceptual differences be attributed to model capabilities.

    First Impressions: Initial Composition and Scene Organization

    Both model versions delivered compliant outputs: native WebGL2 single files, zero external dependencies, and immediately runnable code. What truly widened the perceptual gap was the organization of scene priorities under the default camera.

    Old Version Issues: The giant ring was large, but the mountains on both sides stole more screen real estate. The first screen was filled with near hillsides and distant mountains, with the sea city shrunk deep in the bay, resulting in weak recognizability of the building clusters. The user’s first glance was simply “a ring placed on some terrain.”

    New Version Performance: The giant ring, bridge arches, beacon towers, and tiered residences were organized into a cohesive landscape. Buildings spread along both banks, the central plaza had clear concentric steps, and the warm-cold contrast between oxidized copper and stone was instantly recognizable. This was much closer to the “complete world” requested by the prompt.

    From a technical perspective, this difference occurs before code generation—it is fundamentally the model’s scene graph planning capability. A stronger version will first internally construct a spatial plan with clear priorities: the main subject occupies the visual focus, secondary elements guide the eye, and the background provides atmosphere. It then places the default camera at an angle that conveys the relationship between the main subject and the environment. A weaker version simply materializes the nouns from the prompt and places them nearby. The gap in “first impressions” is actually a gap in planning capability.

    Generational Gap in Rendering Mechanisms: From “Looks Like” to “Computed Correctly”

    Water rendering was the core test of this task, and the implementation mechanisms of the two versions showed substantial differences.

    The old version used analytical approximation: simulating reflections using sky gradients, sun specular highlights, and light smears. This approach is computationally cheap and visually passable, but the reflections of onshore buildings on the water lack real spatial correspondence, looking more like pasted-on decorations.

    The new version introduced a classic mechanism for planar reflections—the mirror camera:

    1. Construct a reflection matrix for the plane where the water is located to obtain a mirror camera.
    2. First render the entire scene (including buildings and boats) to an off-screen texture using the mirror camera.
    3. In the main render pipeline, the water fragments sample this texture based on screen coordinates, overlaying normal perturbations to create water ripples.

    The schematic code is as follows (simplified expression, focusing on the pipeline):

    1. // 1) Off-screen framebuffer + color texture
    2. const fbo = gl.createFramebuffer();
    3. const reflTex = gl.createTexture();
    4. // 2) Mirror camera = plane reflection matrix * main camera view
    5. const mirrorView = mat4Multiply(reflectAbout(waterPlane), mainCamera.view);
    6. // 3) First pass: mirror camera renders the scene to a texture (with an oblique near clipping plane to prevent underwater geometry light leaking)
    7. gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
    8. gl.viewport(0, 0, texW, texH);
    9. renderScene(mirrorView, clipPlane);
    10. // 4) Second pass: normal rendering, water fragments sample the reflection texture
    11. // fragment: vec2 uv = gl_FragCoord.xy / uScreen;
    12. // uv += rippleNormal.xz * 0.02;
    13. // vec3 refl = texture(uReflTex, uv).rgb;

    This is the standard planar reflection pipeline in computer graphics, involving engineering details like framebuffer management and oblique view frustums. The fact that the new version spontaneously chose this path indicates that its post-training phase internalized more professional graphics knowledge, rather than stopping at “effect approximation.” For developers, an upgrade at the mechanism level is more valuable than adding a few extra lights or colors—it determines whether the visuals hold up under any camera angle or time of day.

    Shortcomings Exposed by Parameter Boundaries: Lack of Foresight at Maximum Tide

    Interestingly, once the interaction parameter was pushed to the maximum tide level, the new version’s thoroughness dropped: the flooded state of the plaza, the posture of the boats, and the transitions at the waterline-building boundary began to show inconsistent details.

    This reveals an often-overlooked evaluation principle: the deep end of front-end generation capability lies in the parameter space, not the default settings. Default camera angles and default tide levels are often “polished” highlight moments; pushing parameters to their limits is the only way to test a model’s true mastery of state machines, constraint linkages, and boundary conditions:

    • At extreme tide levels, does the water intersect with buildings?
    • Does the floating/sinking logic of boats change continuously with the water level?
    • Do the material properties of flooded states (wet surfaces, underwater appearance) switch correctly?

    It is recommended that similar evaluations add a “parameter sweep” phase: push each interactive parameter to its upper and lower limits and record failure points. These failure points often represent the true boundaries of a model’s systemic thinking.

    From Single-Point Comparison to Methodology: How to Evaluate a Model Upgrade

    This comparison also highlights an industry background worth expanding upon. During this training window, the broader environment underwent substantial changes. With the availability of public high-quality weights and shifting licensing boundaries, the marginal gains from distillation are diminishing. Leading models increasingly rely on post-training investment and proprietary data flywheels for improvements. Reflected in version comparisons, this means “divergence”—some dimensions show obvious progress (scene organization, rendering mechanisms), while others might even regress (thoroughness at boundary parameters).

    Therefore, evaluating a model upgrade shouldn’t just look at “what was added,” but specifically monitor “what was lost.” A reusable evaluation framework should include at least:

    1. Fixed Task Set: Covering single-file generation, multi-file projects, tool calling, and long contexts, with verbatim frozen prompts.
    2. Multi-Dimensional Scorecard: Runnability, visual completeness, mechanism correctness, constraint adherence, and parameter robustness, each with assigned weights.
    3. Controlled Variables: Same inference tier, same time window, and fixed random seeds if necessary.
    4. Artifact Retention: Archiving screenshots, source code, and run logs for backtracking and horizontal comparison.
    5. Regression Testing: Separately flagging use cases that passed in the old version but failed in the new version to form a “regression list.”

    This kind of pipeline doesn’t require specialized infrastructure. General capabilities provided by cloud platforms like Baidu AI Cloud—such as model services, object storage, logging services, and monitoring alerts—are sufficient to support building this workflow: write task artifacts to object storage, route requests and responses to logging services, and trigger monitoring alerts for metric anomalies. This establishes a normalized model evaluation and regression system.

    Conclusion: Beyond First Impressions, the Real Test is in the Backend

    Returning to the core topic: front-end 3D generation is a model’s “showcase.” It is intuitive, easily perceivable, and dictates the user’s first impression of a new version. This comparison shows that the new generation model’s progress in initial composition, scene organization, and rendering mechanisms is real and significant. The “first impression” is indeed better.

    But for production environments, the first impression is just the entry point. The real test lies in the backend: can long-horizon coding maintain consistency across multi-file, multi-turn interactions? Can tool calls stably close loops in complex pipelines? Can it avoid regressing or cutting corners under boundary conditions? These capabilities are hard to prove with a single stunning demo, yet they determine whether a model can transition from “demo-ready” to “production-ready.”

    The advice for developers is to build your own evaluation assets. Use a fixed task set to continuously track model version evolution, paying attention to both progress and regressions. Model iteration won’t stop, and reliable judgments will always come from controlled, real-world testing.