Frontend · Data Visualization · AI Programming

How Codex Turned 18 AI-Generated Transport Drafts into a Working 3D Smart-Highway Dashboard

By 柳杉 · Oct 26, 2026

Read original on juejin.cn ↗ Google Translate ↗ Alt translation

Batch AI generation delivers wide design space fast, but homogenization is immediate unless a design system and asset library are deliberately built. Turning one flat mockup into an interactive 3D dashboard still demands disciplined reverse-projection, Shader tuning, and object-identity mapping, and the post draws a clear line between smooth animation and real-time data claims.

Summary

Rapid batch generation with Codex produced 18 dashboard design drafts across six transportation sectors, but homogeneity was the price: same UI frameworks, same layout logic, same information patterns. To fix that, the process moved toward a reusable design system, a component and chart library, and accumulated data samples, all aided by frequent Codex resets that made iteration cheap.

One draft, the Smart Highway Operations Monitoring Center, was selected for a full interactive build in React, TypeScript, and Three.js. Roads are reconstructed by inverse-projecting 2D design-image control points onto a horizontal plane via a Raycaster, then fitting Catmull-Rom curves. Pavement, markings, vehicles, and light trails share one lane baseline; flowing-light effects use a ShaderMaterial with additive blending, with narrow bright bands and short light packets driven by road length, lane position, and a shared animation clock. Vehicles load GLB assets per type, move by arc-length parameterization, and are picked via a mapping from instanceId to a stable vehicle ID.

The post is unusually clear about what the demo does not do: business panels use fixed snapshots, speeds are synthetic, there is no car-following or lane-change model, and real production data, trajectory sources, and event state machines are only outlined as interface requirements. It also outlines a longer plan to build a unified drag-and-drop layout engine, a mature component library, and eventually a visual agent platform that auto-recommends layouts and configurations.

Takeaways

— Codex generated 18 dashboard design drafts across six transport sectors (highway, railway, road, water, civil aviation, postal), three per sector, but homogeneity was a real problem.

— The selected smart highway draft uses a 1672×941 canvas with a central 3D scene area (x=395, y=178, 881×462) and surrounding business panels; whole-screen scaling uses the smaller width/height ratio.

— Road reconstruction converts design-image control points to 3D via a Raycaster intersecting a horizontal plane (y−height=0), then fits Catmull-Rom curves; a single image cannot recover true geometry.

— Pavement uses a swept ribbon mesh where UV.x is cross-track position and UV.y is normalized arc length; central divider, lane width, and lane centers are defined once in a carriageway() baseline.

— Road light effects use a ShaderMaterial on top of a MeshStandardMaterial, with depth test on, depth write off, and additive blending; period is organized by road length, not a single planar animation.

— Vehicle assets: sedan.glb, truck.glb, bus.glb, with each part per vehicle type in an InstancedMesh; wheel rotation uses θ = elapsed × speed ÷ radius.

— Vehicle motion uses getPointAt/getTangentAt for arc-length-based movement, but there is no car-following, overtaking, lane-changing, congestion propagation, or ramp merging.

— Picking maps instanceId back to a stable vehicle ID through per-type slots; instanceId is per-render-batch and cannot be used as a business ID.

— Day/night switching is a single continuous variable night∈[0,1] that interpolates ambient, sun, fog, environment intensity, emissive materials, and vehicle lights, with a slight exposure increase at night.

— The demo uses fixed data snapshots (e.g., node flow sum 48,000, average speed 88 km/h, device online rate 990/1,000) and synthetic trajectories; browser smoothness does not prove real-time data.

— Production integration would require entityId, observedAt/receivedAt, quality flags, event state machines, and operation acknowledgments, plus separating public dashboard and business-terminal data granularity.

— Future plans: a unified layout engine for edit/preview/export, a deeper chart component library with unified data interfaces, and a visual agent platform that auto-recommends components and configurations.

Conclusions

The homogeneity ceiling of batch AI generation is a practical constraint: without an intentionally built design system and asset library, rapid generation just repeats the same visual grammar.

Separating visual model, continuous motion, and object picking from real data is a healthy discipline; the post explicitly refuses to claim simulation or real-time status, which is rare in this kind of showcase.

Hardcoding road light-trail animation to road length and lane UV rather than a flat screen-space effect makes the effect scale with geometry, a useful pattern for 3D map overlays.

The planned agent platform that learns from a function library and historical design drafts is a plausible evolution of drag-and-drop dashboard tools, but its value depends on the quality and breadth of the accumulated component and chart data.

Concepts & terms

Catmull-Rom curve

A type of interpolating spline that passes through given control points, often used for smooth road paths in 3D scenes. Here it is fitted to points obtained by inverse-projecting pixels from a 2D design draft.

InstancedMesh

A Three.js rendering technique that draws many copies of the same geometry in one draw call by storing per-instance matrices. Used here so each vehicle part (body, wheels, lights) is replicated for all cars, trucks, and buses.

Additive blending

A rendering mode where the source color is added to the destination color, making bright areas brighter. Used for road light trails so the glowing effect does not replace the underlying asphalt material.

NDC (Normalized Device Coordinates)

A coordinate system where the visible screen range is mapped to [-1, 1] on both axes. The post converts design-image pixel positions into NDC to cast rays into the 3D scene and reconstruct road points.

Source: juejin.cn ↗ Google Translate ↗ Backup ↗