tinyworld-render-performance
Optimizes rendering performance for Tiny World. Manages GPU cache, frame loops, and render-target systems.
Install
mkdir -p .claude/skills/tinyworld-render-performance && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/18304" && unzip -o skill.zip -d .claude/skills/tinyworld-render-performance && rm skill.zipInstalls to .claude/skills/tinyworld-render-performance
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Use when changing Tiny World Builder renderer setup, shadows, smoke, voxel clouds, ghost board render cost, frame loop, or GPU performance.Key capabilities
- →Keep the renderer single-pass and predictable
- →Cap `devicePixelRatio` to prevent uncapped values
- →Warn on software WebGL renderers with a banner
- →Memoize `roundedSlab` / `roundedBox` ExtrudeGeometries in `geomCache`
- →Use `getOpenBoxGeometry` for cached `BoxGeometry` with removed faces
- →Dynamically frustum-cull active ghost boards
How it works
The skill optimizes Tiny World Builder's rendering performance by enforcing a single-pass renderer, managing GPU caches for geometries, and implementing specific culling and rendering techniques for various scene elements.
Inputs & outputs
When to use tinyworld-render-performance
- →Optimizing renderer performance
- →Managing shadow rendering
- →Tuning GPU frame rates
About this skill
Tiny World Render Performance
Keep the renderer single-pass and predictable.
Current renderer contract:
- Default render path is direct except for two explicit render-target systems:
the optional pixelation pass (low-res render target + depth/normal-edge fullscreen quad)
and the enhanced-water planar reflection pass. The reflection pass renders the scene once
from a mirrored camera into
tw-water-planar-reflection, hides reflective water during capture, clips below-water geometry, and is disabled in XR / when enhanced water is off. Do not introduce any other always-on post passes (EffectComposer, screen shaders, additional render targets) without explicit approval. - Cap DPR; do not return to uncapped
devicePixelRatio. Dynamic resolution (renderDynamicResolution) is an adaptive multiplier below the user's Resolution slider ceiling: it adjusts effective pixel ratio slowly toward Target FPS and never persists its transient scale. - Warn on software WebGL renderers (SwiftShader/llvmpipe/softpipe/WARP/etc.) with the dismissible hardware-acceleration banner; many FPS complaints come from browser hardware acceleration being disabled.
- Main WebGL context uses
antialias: true; the old smoothing/post pass has been removed. - Brightness/saturation/contrast are lightweight CSS filters on the WebGL canvas, not shader uniforms.
GPU caches (introduced for low-end GPU + visible-distance scaling):
geomCachememoizesroundedSlab/roundedBoxExtrudeGeometries by their numeric args. Geometries are taggeduserData.cached = trueand shared across every mesh that asks for the same shape. Disposal goes throughsafeDisposeGeometry(geo)— never callgeo.dispose()directly on these. If you add a new geometry helper that's called more than a handful of times, cache it the same way.getOpenBoxGeometry(w, h, d, skipTop, skipBottom, skipPX, skipNX, skipPZ, skipNZ)returns a cachedBoxGeometrywith selected face groups removed from the index buffer (matIdx 2 = top, matIdx 3 = bottom). Use it for risers, terrain caps, and hidden-face optimizations. Terrain caps should remain clean flat box slabs rather thanroundedSlabbevels: flat top surfaces plus vertical cap thickness provide depth/substance without the repeated chevron artifacts caused by chamfered per-tile bevels. Grass caps should overhang the dirt body so exposed edges read as green lip over dirt. Open-box geometries are stilluserData.cached = true— never mutate or dispose.vbox()acceptsskipTop/skipBottom/ side-skip options and routes those pieces through cached open-box geometry. Use these flags for buried voxel faces in authored assemblies, especially floating-island underside slabs and inverted roof layers; do not render closed boxes for the inside of the island mass.- Voxel terrain panels must stay batched inside each tile: bucket panels by cached open-box geometry and material, then emit one
THREE.InstancedMeshper bucket. Strip panel bottoms, internal side faces, and neighbour-hidden edge sides withgetOpenBoxGeometry; do not go back to oneTHREE.Meshper small terrain panel at 8x8/12x12 resolutions. - Object-free, level-1 grass tiles use the simple flat-grass fast path even when voxel terrain is enabled. A blank island must not spend hundreds of draw calls on per-cell voxel grass panels/details; reserve voxel terrain detail for edited, raised, non-grass, or occupied cells.
- Simple blank-grass terrain is receive-only for shadows. Do not put empty grass slabs into the shadow-map pass; they receive object shadows but should not double the blank-island draw call count.
- Preview/ghost board rendering is forced off by default: Preview distance/window/opacities persist as zero and the Settings controls are removed. Do not let hidden Preview settings create ghost boards or fade traversal on a blank island.
- When voxel terrain is enabled, keep the top surface voxelized but render exposed riser/body sides as solid shader-textured walls. Avoid thousands of side panels: they create cracks/transparent-looking corners and waste draw/instance budget. Keep same-or-higher neighbour side culling intact so shared internal sides are not rendered.
- Mesh Terrain's real-material path may greedily merge flat same-material top rectangles, but keep exposed bevel/chamfer edges and sculpted drops visibly chunky. Future side-wall greedy strips should merge only contiguous faces with identical material, top height, and bottom height.
- Pixelation shader AA should work in pixel mode, but only through edge/depth/normal detection. Do not use a broad fullscreen blur; it smears terrain texture and UI-like decals. Shader AA must not force the normal prepass by itself; only
Pixel normal edgeshould allocate/render the normal target. - Pixel post shaders are variant-built: the depth sampler uniform exists only when depth edge sampling is enabled, and the normal sampler uniform exists only when normal edge sampling is enabled. Depth edge sampling uses the separate RGBA-packed depth target; do not add unused sampler uniforms to the fullscreen material because WebGL warns when no target is bound.
- Pixel post shaders must preserve the renderer output color space. In Three r185
ShaderMaterialinjects color-space helpers, so include/applycolorspace_fragmentat the finalgl_FragColorstep; do not use the oldencodings_fragment/encodings_pars_fragmentchunks. - Backdrop/game-screen vignette should remain a cheap CSS overlay variable, not another WebGL post pass. Keep it separate from scene brightness/lighting so it can frame the background without retuning materials.
- Sky/background colour controls are direct scene/CSS settings, not post passes:
Sky blue depthdarkens the shader sphere and CSS backdrop,Sky blue saturationpushes the same blue hue harder, andUndercloud widthrebuilds the small under-island cloud ring.Cloud heightalso controls undercloud depth below the island, slightly farther than the upper cloud distance, so one height adjustment moves both cloud layers. Keep the undercloud layer as a handful of instanced cloud-puff groups attached below the floating island; do not make a full volumetric cloud field or reuse the full multi-mesh shadow-casting sky cloud factory there. - Night star backgrounds use the single
star-vault-equirect-spheremesh and a procedural star-only canvas texture, blended only at dusk/night throughrenderStarVaultStrength. Keep it as a non-depth-writing sky sphere, not an EffectComposer/background pass. Do not load painted sky/land/cloud bitmaps into this sphere: equirect wrapping makes horizon imagery smear under/around the island. Keep the shader horizon mask so stars fade out below the island. - Floating-island underside depth should use a small number of cached voxel/box slabs and cached utility cylinders attached to
homeBorderGroup, not per-cell underside geometry. Treat underside/edge/rocket/utility dressing as decorative scenery: setcastShadow = falseandreceiveShadow = falseafter building it so hundreds of tiny underside meshes do not enter the shadow-map pass. - Floating-island shell sides must stay visible from underside/grazing angles, including secondary editable islands. Keep island underside materials double-sided, keep proxy side shells on double-sided cached material clones, and keep the persistent recessed side-backing ring behind edge greebles on home and duplicate island bases. Let the scene-level island culling hide/show the shell group; do not rely on per-mesh frustum culling for the shell slabs because it can clip side/back faces while the island itself is visible.
- Animated waterfall froth/chunks should stay batched as
THREE.InstancedMeshpools per exposed water edge, not one mesh per puff/drop. Keep the instance matrix update insideupdateWaterfallEffects()and mark the pools non-shadowing. - Terrain/path storytelling details should be batched or rare. Wheel ruts,
surface flecks, pavers, pebbles, grass-edge roots, and small path signs/crates
belong in the voxel terrain surface-detail pass with cached geometries,
InstancedMeshbuckets where possible, andnoShadowon decorative extras; do not scatter dozens of shadow-casting meshes per tile. - Waterfall curtain/blade variety should come from the shared shader sheets
(
getWaterfallCurtainMaterial()/getWaterfallSurfaceMaterial()), so each exposed water edge uses one vertical sheet plus one surface-flow sheet instead of many blade/tail meshes. If a future pass merges whole rows of waterfalls, keep the same shader-sheet contract and aggregate spans above the per-cell tile factories. - Voxel object factories that emit repeated
vbox()pieces should finish withoptimizeVoxelObjectGroup(...)so matching geometry/material pieces become localTHREE.InstancedMeshbuckets. Keep the legacy factory code intact; the optimization is a render-layer replacement for repeated live meshes, not a removal of the authored object. customPartssphere/ellipsoid primitives use the sharedgetCustomPartEllipsoidGeometry(...)cache and per-mesh scale. Do not create a freshSphereGeometryfor every generated rounded part; repeated domes, balloons, canopies, and tanks should share cached VBOs and be skipped bysafeDisposeGeometry.disposeGroup(group)disposes geometries by default, but materials remain shared unless a mesh explicitly opts in withuserData.ownMaterial,userData.ownedMaterial, oruserData.disposeMaterial. Use those flags only for true per-instance material/texture ownership (scratch FX clones, imported unique assets, temporary previews). Never set them on sharedM.*, cached fade materials, or cached shader/material singletons.- Async texture/resource callbacks must repaint through
renderSceneIfReady(), not directrenderScene()calls. These callbacks can fire while classic scripts are still loadi
Content truncated.
When not to use it
- →When introducing always-on post passes without explicit approval
- →When uncapped `devicePixelRatio` is desired
- →When using a broad fullscreen blur for pixelation shader AA
Limitations
- →Does not allow always-on post passes without explicit approval
- →Requires adherence to specific GPU cache usage patterns
- →Pixelation shader AA must work only through edge/depth/normal detection
How it compares
This workflow provides specific, optimized rendering strategies for Tiny World Builder, such as geometry caching and dynamic frustum culling, unlike a generic rendering approach that might not account for its unique scene elements.
Compared to similar skills
tinyworld-render-performance side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| tinyworld-render-performance (this skill) | 0 | 26d | No flags | Advanced |
| nextjs-developer | 328 | 2mo | No flags | Advanced |
| angular | 100 | 3mo | Review | Advanced |
| flutter-expert | 73 | 3mo | No flags | Advanced |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by jasonkneen
View all by jasonkneen →You might also like
nextjs-developer
zenobi-us
Expert Next.js developer mastering Next.js 14+ with App Router and full-stack features. Specializes in server components, server actions, performance optimization, and production deployment with focus on building fast, SEO-friendly applications.
angular
sickn33
Modern Angular (v20+) expert with deep knowledge of Signals, Standalone Components, Zoneless applications, SSR/Hydration, and reactive patterns. Use PROACTIVELY for Angular development, component architecture, state management, performance optimization, and migration to modern patterns.
flutter-expert
sickn33
Master Flutter development with Dart 3, advanced widgets, and multi-platform deployment. Handles state management, animations, testing, and performance optimization for mobile, web, desktop, and embedded platforms. Use PROACTIVELY for Flutter architecture, UI implementation, or cross-platform features.
frontend-developer
sickn33
Build React components, implement responsive layouts, and handle client-side state management. Masters React 19, Next.js 15, and modern frontend architecture. Optimizes performance and ensures accessibility. Use PROACTIVELY when creating UI components or fixing frontend issues.
web-games
davila7
Web browser game development principles. Framework selection, WebGPU, optimization, PWA.
rendering-animate-svg
TheOrcDev
Wrap animated SVG elements in a div to enable hardware acceleration. Apply when animating SVG icons or elements, especially in 8-bit retro components with pixel art animations.