Parklab concept · 3D pipeline

From six drawings to a 1.37 MB model.

Every Parklab direction loads the same generated play structure. We drew it as orthographic views, rebuilt it with multi-view image-to-3D and optimised it for the browser. This page shows each step, the numbers, and the model itself.

Open the viewer

Input: 6 generated orthographic views
Reconstruction: Meshy 7, multi-view
Optimisation: gltf-transform, meshopt, WebP
Web model: 1.37 MB · 65,695 triangles
Runtime: Three.js r160, served locally

01 · Live viewer

Turn it, re-finish it, compare weights.

Drag to orbit. The web model is the file every direction loads. The hi model is the same structure with 2048 px textures, kept for close-ups and stills.

Loading the model

Drag to orbit

Finish

View

Model

The two files in the viewer
	Web · used on the site	Hi · close-ups
File size	1,374,664 bytes (1.37 MB)	2,147,288 bytes (2.15 MB)
Triangles	65,695	104,730
Texture	1 × 1024 px WebP, 301 KB	1 × 2048 px WebP, 719 KB
Geometry	1 mesh, meshopt, quantised	1 mesh, meshopt, quantised
Material	1 PBR, base colour only	1 PBR, base colour only

02 · Source views

Six drawings made for reconstruction.

Image-to-3D rebuilds volume from silhouette and shading, so the drawings followed strict rules: one connected structure, chunky volumes, no ropes, nets or thin bars, matte surfaces, a white background and no shadows. Seedream 5 Pro generated them at 2048 px. They are shown here at 1400 px.

Orthographic front elevation: stair, tower with tube slide, straight slide and climbing wall — 01 · FrontUsed for the model

Orthographic rear elevation of the same structure — 02 · RearUsed for the model

End elevation from the stair side — 03 · End, stairUsed for the model

End elevation from the climbing wall side — 04 · End, climbing wallUsed for the model

Top plan view with the hexagonal roof and slides — 05 · PlanReference

Narrow end view showing the tower — 06 · End, towerReference

With a reference image, the generator ignored camera instructions such as 90 degrees around the vertical axis and redrew the long side. Describing the result worked: narrow and tall, 45 percent of the frame width. The plan view needed the same fix.

03 · Model and optimisation

From 13.1 MB to 1.37 MB.

Views 01 to 04 went into multi-view image-to-3D with two engines. We kept Meshy 7 and optimised its output with gltf-transform: simplified mesh, meshopt compression and WebP textures.

Reconstruction, same four views
Engine	Raw file	Triangles	Result
Tripo v3.1	7.2 MB	175,655	Softer forms, the blue drifts to violet
Meshy 7	13.1 MB	186,902	Kept: flat panels, straight posts, accurate blue

Optimisation of the Meshy 7 model
File	Size	Triangles	Textures
Raw export	13.1 MB	186,902	Uncompressed
Hi	2.15 MB	104,730	2048 px WebP
Web	1.37 MB	65,695	1024 px WebP

npx @gltf-transform/cli@4 optimize meshy.glb playstructure-web.glb \
  --texture-size 1024 --texture-compress webp \
  --compress meshopt --simplify true --simplify-error 0.004

The command that produced the web model. Raw files stay offline; this site serves only the web and hi models.

04 · Renders

Nine stills of the model.

An elevation, a high angle, a studio clay pass and a six-step turntable, rendered at 1400 px from the generated model.

Render: front elevation of the model — Elevation

Render: the model from a high angle — High angle

Render: untextured studio clay pass — Studio clay

Turntable render, step 1 of 6 — Turntable 1 / 6

Turntable render, step 2 of 6 — Turntable 2 / 6

Turntable render, step 3 of 6 — Turntable 3 / 6

Turntable render, step 4 of 6 — Turntable 4 / 6

Turntable render, step 5 of 6 — Turntable 5 / 6

Turntable render, step 6 of 6 — Turntable 6 / 6

05 · Integration

Loads as is in Three.js.

Centred on X and Z, base on Y = 0. No rotation or offset needed.
Long axis on X. Bounding box proportions 2.60 × 1.41 × 1.61.
One mesh and one material, no named parts. Hotspots attach by coordinates.
Needs EXT_meshopt_compression and EXT_texture_webp support in the loader.

import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { MeshoptDecoder } from 'three/addons/libs/meshopt_decoder.module.js';

const loader = new GLTFLoader();
loader.setMeshoptDecoder(MeshoptDecoder); // without it the mesh will not decode
loader.load('playstructure-web.glb', gltf => scene.add(gltf.scene));

06 · Read this first

What this model is not.

A generated concept object, not a Parklab product and not engineering geometry. Dimensions, materials and safety properties are illustrative.
The hero images on the direction pages show different, imagined structures. They are not renders of this model.