SceneOS

The 3D web graphics engine for AI coding assistants.

Built directly from official documentation and modern standards, SceneOS provides your AI assistant with the rules, 42 reference guides, and code blueprints needed to build high-performance 3D web applications with Three.js, WebGPU, and React Three Fiber.

Why SceneOS

When generating 3D code, AI models frequently make common mistakes:

• State setters in frame loops: Calling setState inside useFrame, dropping framerates to 10 FPS.
• Unclamped display scale: Omitting <Canvas dpr={[1, 2]}>, causing mobile devices to overheat.
• First-frame freeze: Compiling shaders on first interaction instead of warming up with <Preload all />.
• Mismatched model scale: Loading raw 3D models with arbitrary sizes and off-center origin points.
• Deprecated methods: Using obsolete pre-r152 APIs like sRGBEncoding and Geometry.

SceneOS fixes this by giving your agent a straightforward 5-step workflow, 42 topic guides, and working code blueprints based on Three.js r160+ and React Three Fiber standards.

Installation

Install SceneOS into your AI assistant with one command:

npx sceneos install

Or install for a specific assistant:

npx sceneos install cursor
npx sceneos install claude
npx sceneos install antigravity
npx sceneos install codex
npx sceneos install windsurf

Rules Enforced

| Anti-Pattern | Standard AI Tendency | SceneOS Standard | | :--- | :--- | :--- | | State updates in frame loop | Calls setState in useFrame | Mutates ref properties directly (ref.current.rotation.y += delta) | | Unclamped canvas DPR | Leaves DPR default | Sets dpr={[1, 2]} on <Canvas> to protect mobile performance | | Initial render freeze | Lazy shader compilation | Adds <Preload all /> inside <Suspense> to compile upfront | | Broken model scale/origin | Renders raw GLB directly | Wraps models in <Resize> and <Center bottom> | | Skinned mesh shadow bug | Shadows disappear when animating | Sets child.frustumCulled = false on skinned meshes | | Deprecated color methods | Uses sRGBEncoding | Uses THREE.SRGBColorSpace and AgXToneMapping |

Scan your project for 3D issues anytime:

npx sceneos audit src/

Reference Modules (42 Guides)

React Three Fiber and Drei

• vite-r3f-project-setup — Vite, React, TypeScript, and GLSL project setup
• r3f-fundamentals — Canvas setup, useFrame, useThree, and pointer events
• r3f-gltf-scene-composition — Multi-model assembly, bounding box scaling, and bone sockets
• r3f-theatrejs-cinematic-studio — Visual timeline editor and keyframing with Theatre.js
• r3f-debug-gizmos-stats — Transform controls, gizmos, and performance stats
• r3f-ui-controls-leva — GUI parameter sliders and color pickers with Leva
• r3f-responsive-viewports-bounds — Screen auto-framing and mobile portrait FOV math
• r3f-prerender-loading-pipeline — Shader pre-compilation and loading screens
• r3f-drei-ecosystem — Camera controls, environment lighting, 3D text, and model loaders
• drei-staging-environment — Studio lighting presets, stage backdrops, and contact shadows
• r3f-physics-rapier — Rapier WASM physics, rigid bodies, colliders, and character movement
• r3f-postprocessing — Bloom, depth of field, ambient occlusion, and vignette
• r3f-state-zustand — High-performance game loops decoupled from React state
• r3f-math-animation-maath — Smooth damping utilities and random generators
• r3f-mobile-optimization — Battery saving, scratch vectors, and tab visibility pauses
• r3f-multi-view-portals — Rendering multiple 3D views on one canvas
• r3f-hooks-lifecycle — Frame priorities, render passes, and offscreen portals
• r3f-events-interaction — Pointer events, click handling, and BVH raycasting
• r3f-shaders-extend — Custom shaders with extend and shaderMaterial
• r3f-audio-reactive — Web Audio API analysis and shader uniform inputs
• r3f-webxr-spatial — VR and AR support with @react-three/xr

Vanilla Three.js and WebGPU

• threejs-core — Scene setup, renderer, and GPU memory cleanup
• threejs-debug-gui-tweakpane-lilgui — Live in-browser controls with lil-gui and Tweakpane
• threejs-batched-mesh — Rendering many geometries in a single draw call with BatchedMesh
• threejs-webgpu-tsl — WebGPU renderer, node materials, and compute shaders
• threejs-lighting-hdr-pipeline — AgX tone mapping, 3-point lighting, and HDR maps
• threejs-lighting-shadows — Shadow camera setup, soft shadow maps, and bias fixes
• threejs-materials-shaders — Physical materials (glass, clearcoat) and shader extensions
• threejs-geometries — Custom buffer geometries and instanced rendering
• threejs-loaders-assets — Loading GLTF, Draco, KTX2, and tracking progress
• threejs-animation — Animation mixer, cross-fading, skeletal meshes, and morphs
• threejs-cinematic-camera-rigs — Camera path tours and 3rd-person follow rigs
• threejs-pro-shaders-fx — Fresnel rim lighting, noise dissolve effects, and toon shading
• threejs-procedural-geometry-csg — Boolean cuts, unions, and tube extrusion
• threejs-render-pipeline-rtt — Render targets, mirrors, and security cameras
• threejs-transparency-sorting — Depth buffer fixes and transparency order
• threejs-skinned-shadows-morphs — Fixing skinned character shadows and facial shapes
• threejs-time-dilation-slowmotion — Bullet-time slow motion and animation scrubbing
• threejs-advanced-textures — Video playback, canvas textures, and triplanar projection
• threejs-webgl-context-recovery — Handling WebGL context loss and mobile sleep/wake
• threejs-interaction — Raycaster object selection and orbit controls
• blender-to-threejs-pipeline — Texture packing, normal map fixes, and export settings

Asset Tools

Located in skills/scripts/:

# Compress GLB with Draco and WebP
node skills/scripts/optimize-model.js model.glb model-compressed.glb

# Generate React component from GLB
node skills/scripts/generate-gltf-component.js model.glb src/components/Model.tsx

# Setup Draco WASM decoders
node skills/scripts/setup-draco-decoders.js

# Check estimated GPU VRAM usage
node skills/scripts/vram-calculator.js

License

Apache License 2.0