Explorable town
The kit's tested scene: 161 instances of 23 assets, 77 placed by snapping and 10 customized. Your browser assembles it from the scene file.
How it is built
The page loads the kit index, checks every file against its recorded checksum and assembles the scene. Repeated meshes are drawn as instances, while customized and animated pieces stay individually addressable.
const library = await AssetLibrary.fromKit('/preview-kit/stylized-town/kit.json');
const town = await library.assembleScene(await (await fetch('/preview-kit/stylized-town/scenes/town-customized.scene.json')).json(), { optimize: true });
scene.add(town.group);
town.optimization?.stats(); // { drawsBefore, drawsAfter, ... }Measured with { optimize: true }: 621 → 148 draw calls per frame (−76.2 %) on ANGLE (Apple, ANGLE Metal Renderer: Apple M2 Pro, Unspecified Version). How scene optimization works.
Measured budgets
Desktop measurements of this scene (ANGLE (Apple, ANGLE Metal Renderer: Apple M2 Pro, Unspecified Version); software rendering: ANGLE (Google, Vulkan 1.3.0 (SwiftShader Device (LLVM 10.0.0) (0x0000C0DE)), SwiftShader driver)). No phone or tablet has been measured, so no mobile performance is claimed.
| Budget | Measured | Limit | Result |
|---|---|---|---|
| Triangles drawn (highest) | 138,034 | 150,000 | Passed |
| Draw calls (highest along the camera path) | 148 | 200 | Passed |
| Transferred until ready | 5.30 MB | 12.0 MB | Passed |