drawcall-ai
- 20 skills
- 0 followers
- 15 hours ago last updated
- ▌ Flipbook · drawcall-ai bundleUse @drawcall/flipbook in Three.js scenes. Trigger when an agent needs to add, configure, animate, or debug KTX2 flipbook billboard effects such as flames, explosions, particles, impacts, or sprite-sheet VFX with the Flipbook class.
- ▌ Praxis · drawcall-aiDefine, train, and run optimized LLM prompt models using Praxis. Use when the user wants to create a model definition, train prompts, or run inference with structured input/output schemas.
- ▌ Speech · drawcall-aiUse the Drawcall Speech API from apps, websites, and 3D experiences. Use when explaining or showcasing text-to-speech usage with https://v1.speech.drawcall.ai, including simple HTML audio, JavaScript audio loading, voice selection, style control, browser autoplay constraints, URL encoding, caching behavior, and first-request warmup.
- ▌ Uikitml · drawcall-ai bundleWrite, validate, render, and convert UIKitML for pmndrs/uikit interfaces. Use when working with .uikitml files, authoring spatial 3D UI or UI targeting VR/AR, using Three.js, @react-three/fiber, or IWSDK, choosing default/Lucide/Horizon components, fixing UIKitML validation errors, or using the @drawcall/uikitml CLI.
- ▌ Vitexec · drawcall-ai bundleUse this skill when an AI agent needs to inspect, verify, debug, profile, or play through a live Vite app by running temporary scripts against the browser page and reading browser logs or captured artifacts. Use for client state after interactions, imported app modules, DOM state, human-like input, canvas/WebGL/Three.js state, screenshots, videos, CPU/network/performance/heap analysis, WebXR/Three.js XR with IWER, and runtime-only behavior without editing app files.
- ▌ Ecs · drawcall-aiStructure game state with the EliCS entity-component-system: components, systems, queries, predicates, lifecycle, and the Input/State/View architecture. Use when organizing game logic with multiple interacting objects and state-driven update loops.
- ▌ Vfx · drawcall-aiAdd impact and feedback effects to a Three.js game with lightweight particle bursts — muzzle flashes, hit sparks, blood/dust, explosions, pickups — using pooled additive sprites or Points. Use when actions need visible punch (firing, impacts, deaths, explosions) or for ambient effects (smoke, embers, dust).
- ▌ Math · drawcall-aiUse Three.js math classes (Vector3, Euler, Quaternion, Matrix4, Spherical) correctly instead of hand-rolled trigonometry, including when to pick Euler vs Quaternion. Use when doing rotations, orbit positioning, or any vector/angle math in a Three.js game.
- ▌ Audio · drawcall-aiAdd sound to a Three.js game — a listener, positional world sounds vs. non-positional UI sounds, overlapping playback, and a sound at every feedback moment. Use when a game is silent or only some actions make sound.
- ▌ World · drawcall-aiMake a 3D game world feel large and real — world scale, draw distance, fog and horizon, level-of-detail, and consistent prop/character scale. Use when a map feels small, empty, or ends abruptly, or when building open or outdoor scenes.
- ▌ Camera · drawcall-aiCameras for Three.js games — viverse's ready-made character camera (third/first-person orbit, collision, zoom) and, when you need it, building cameras and effects (screen shake, FOV speed) from scratch as ECS systems. Use when implementing or tuning camera movement and behavior.
- ▌ Lights · drawcall-aiSet up lighting for Three.js scenes — choosing light combinations, shadows, and look. Use when configuring scene lighting, fixing flat or harsh lighting, or adding shadows.
- ▌ Actions · drawcall-aiMap player input (keyboard, mouse, touch, gamepad) to game logic with the @pmndrs/viverse action/binding system. Use when building movement controls, input handling, or custom state/event actions for a Three.js game, or when controls must change across game modes (menu, play, pause, cutscene) — e.g. pointer-lock controls wrongly stay live during a menu and a button click locks the pointer.
- ▌ Physics · drawcall-aiAdd BVH-based physics for static/kinematic geometry with @pmndrs/viverse — physics worlds, character controllers, ground detection, and sensor volumes. Use when a game needs collision, a character controller, or enter/exit trigger volumes.
- ▌ Materials · drawcall-aiGive surfaces real materials and textures (PBR base-color/normal/roughness sets) in Three.js, with correct color space and tiling. Use when surfaces look flat, plastic, or gray, or when applying Market texture assets to terrain, walls, and props.
- ▌ Navigation · drawcall-aiRoute AI/agent pathfinding to navcat — when to use a navmesh, how to generate one from Three.js geometry, query paths, and move agents (single agent or crowds). Use when adding pathfinding, enemy/NPC navigation, or patrol/spawn logic over Three.js geometry.
- ▌ Performance · drawcall-aiKeep a Three.js game at a smooth framerate as it grows — instancing, level-of-detail, object pooling, culling, draw-call and allocation discipline, and profiling with vitexec. Use when a game stutters or drops frames, or proactively when a scene has many objects, enemies, particles, or lights.
- ▌ Pointer Events · drawcall-aiForward DOM pointer events into a Three.js scene and filter them with @pmndrs/pointer-events for click/tap/hover interaction with 3D objects and portals. Use when objects in the scene need to be clickable, selectable, or hoverable.
- ▌ Postprocessing · drawcall-aiFinish a 3D scene's look with the postprocessing library — a tasteful pass (ambient occlusion, subtle bloom, tone mapping, color grading) plus the correct WebGLRenderer attributes. Use to make a scene read as a polished game rather than a raw render, or for any screen-space image effect.
- ▌ User Interface · drawcall-aiDesign and build user interfaces for 3D apps and games — routing between spatial 3D/XR UI and 2D HUD UI, plus visual design principles. Use when adding menus, HUDs, panels, dashboards, or any in-app UI to a Three.js project, or deciding which UI technology to use.