bufatechno-webgamedev

KO | EN

gitlite — search

#deep-learning #shell #data-science #java #awesome #llm #nextjs #gemini #nodejs #terminal

bufatechno-webgamedev

(★ 9)

SKILL FOR MAKE GAMES WEB BASED

파일 탐색기

ZIP 다운로드

- marketplace.json
- marketplace.json
- - btc.jpeg
  - qris.jpeg
- - manifest.json
  - sw.js
- 2d-drawing-textures.md
- animation-system.md
- asset-pipeline.md
- audio-ui-systems.md
- babylonjs-complete.md
- debugging.md
- design-system.md
- external-libraries.md
- fps-game-template.md
- game-architecture.md
- input-controls.md
- multiplayer-networking.md
- performance-optimization.md
- physics-collision.md
- platformer-template.md
- procedural-generation.md
- testing-deployment.md
- third-person-template.md
- threejs-complete.md
- vfx-particles.md
- voxel-game-template.md
- webxr-vr.md
- 1.png
- 2.png
- scaffold-babylonjs.js
- scaffold-threejs.js
- sync-plugin.js
- scaffold.test.js
- skill.test.js
.gitattributes
.gitignore
CHANGELOG.md
INSTALL.md
LICENSE
package.json
README.md
SKILL.md

# CDN으로 사용하기

jsDelivr

jsDelivr는 공개 GitHub 리포지토리를 별도 설정 없이 CDN으로 즉시 서빙합니다. 버전과 파일을 고르면 웹페이지에 바로 붙일 수 있는 링크와 예시 코드가 만들어집니다.

버전

파일

링크

예시

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

Skill **optimized for ZCode & Claude (primary)** to build **complete, production-ready 3D web games** using **Three.js (WebGPU/WebGL2 + TSL)** or **Babylon.js (WebGPU/WebGL2 + Havok)** — like a renowned game programmer.

> 2026 stack: `three@^0.175.0` (WebGPURenderer + TSL NodeMaterial), `@babylonjs/*@^8.15.0` (clustered lighting, Frame Graph, Gaussian Splatting), `vite@^7.0.0` (baseline-widely-available, Rolldown). Primary support: ZCode & Claude.

> **Quick Links:** [Installation](INSTALL.md) • [Changelog](CHANGELOG.md) • [Skill](SKILL.md) • [Support](#support--donate)

## What You Can Build

This skill covers the full scope of a browser 3D game — **project, logic, visuals, effects, audio, 3D, 2D, animation**:

- **Structured project**: scaffold `src/world|player|animation|vfx|systems|assets|utils` + `public/manifest.json` + PWA `sw.js`, Path A CDN (double-click) or Path B Vite 7
- **Game logic**: fixed-timestep 1/60 + `THREE.Timer`, StateMachine, ECS, object Pool, AI behavior states, save IndexedDB, multiplayer prediction/reconciliation
- **Visual & Graphics**: PBR/Standard/Physical + IBL, directional+hemi lights 2048² shadows, `FogExp2`, TSL `MeshStandardNodeMaterial` (WGSL/GLSL), clustered 1000 lights (Babylon 9), Frame Graph 40% mem save
- **Effects (VFX)**: pooled particles (Points/InstancedMesh, Babylon Node Particles), post-processing bloom/vignette (EffectComposer/Frame Graph), volumetric light shafts, screen shake, hit flash, trails, decals, Gaussian Splatting `.splat/.ply/.spz/.sog`
- **Audio**: procedural oscillators (shoot/hit/jump), file decode cache, positional HRTF panner, master/music/sfx routing, AudioContext resume on gesture + mute toggle
- **3D imagery**: GLTF/GLB + Draco `gltf/` + KTX2 Basis worker, async loader + ModelCache clone, fallback magenta capsule, Gaussian Splat streaming/LOD, fallback primitives
- **2D imagery**: procedural canvas textures (wood/stone/brick/grass/metal, 16px pixel art), atlas, Sprite sheets, normal map Sobel, CanvasTexture/DynamicTexture, SpriteMaterial
- **Animation**: `AnimationMixer`+`AnimationClip`+`AnimationAction`, `Timer` r183+, skeletal `SkinnedMesh`+`SkeletonHelper`, bone attach, `morphTargetInfluences`, weight blending + additive `makeClipAdditive`, bezier interpolation, retargeting (Babylon 9 tool), CCD IK
- **Game types**: FPS, voxel/sandbox, third-person, platformer, racing, RPG, tower defense, top-down, multiplayer, WebXR/VR
- **Optimization**: instanced/ThinInstances, frustum LOD, texture atlas, DPR cap 2, worker chunk, draw calls mobile ≤50 desktop ≤200, 60 FPS 100+ objects
- **External libraries (Lite vs Full)**: Lite default zero new deps (~300KB); Full opt-ins per-category — `three-mesh-bvh` collision, `cannon-es`/Rapier/Havok physics, `gsap` menu tween, `howler` file music, `nipplejs` joystick, CC0 sources (Quaternius/Kenney/Poly Pizza/Mixamo) — each with CDN+npm snippets, Lite fallback, and credits (see `references/external-libraries.md`)
- **Shipping**: manual matrix 40+ items, Playwright smoke, deploy GitHub Pages/Netlify/Vercel/itch.io, PWA, Sentry/gtag

## How to Use

Auto trigger for:
- "Build me an FPS game in Three.js with skeletal animation"
- "Create voxel game with particles and sound"
- "Make third-person with bloom and sprite HUD"
- "Babylon.js game with Havok physics and volumetric light"
- "WebGPU TSL shader game"
- "Multiplayer browser game" / "WebXR VR game"

Skill will: intake 10 questions → design professional architecture → select framework (matrix 2026) → scaffold (CDN/Vite) → implement 15 systems in order → validate 15 checklist → deliver runnable.

## Screenshot Example — Games Built with This Skill

Example output from this skill — voxel sandbox game (Three.js, procedural textures, day/time HUD, hotbar inventory):

> More examples in [`screenshoot-example/`](screenshoot-example/).

## Skill Structure

```
bufatechno-webgamedev/
├── SKILL.md                       # Main skill — professional ~375 lines (core) + Weak-Model Quick Start
├── README.md                      # This file
├── INSTALL.md                     # Installation guide — ZCode & Claude (Linux/macOS/Windows)
├── CHANGELOG.md                   # Version history
├── LICENSE                        # MIT
├── package.json                   # MIT, three 0.175, vite 7, babylon 8.15, node >=20.19
├── .claude-plugin/
│   └── marketplace.json           # Claude Code marketplace catalog (bufatechno-marketplace)
├── .zcode-plugin/
│   └── marketplace.json           # ZCode marketplace catalog (bufatechno-marketplace)
├── plugins/
│   └── bufatechno-webgamedev/     # Plugin (auto-installs skill on marketplace add)
│       ├── .claude-plugin/plugin.json
│       ├── .zcode-plugin/plugin.json
│       └── skills/bufatechno-webgamedev/
│           ├── SKILL.md           # Skill (bundled)
│           ├── references/        # Bundled docs
│           ├── assets/            # Bundled templates & QRIS
│           └── scripts/           # Bundled scaffolds
├── references/                    # 22 deep-dive docs (2026, anti-slop included)
│   ├── threejs-complete.md         # WebGPURenderer+TSL, PBR, post, GLTF, Timer
│   ├── babylonjs-complete.md       # Engine, clustered lights, Frame Graph, Havok, Splatting
│   ├── fps-game-template.md       # FPS runnable 1000+ lines
│   ├── voxel-game-template.md     # Voxel 1100+ lines
│   ├── third-person-template.md   # Spring-arm, anim blend
│   ├── platformer-template.md     # Momentum, coyote+buffer 0.1s
│   ├── game-architecture.md       # Fixed step+Timer, ECS, StateMachine, Pool
│   ├── animation-system.md        # NEW: Mixer/Clip/Action, skeletal, morph, blending, retarget
│   ├── physics-collision.md       # Cannon-es/Rapier/Havok, CCD, filters
│   ├── vfx-particles.md           # NEW: particles, post, volumetric, shake, splat
│   ├── procedural-generation.md   # Noise, maze, L-system, BSP city, biome
│   ├── input-controls.md          # Keyboard/mouse/gamepad/touch, remap
│   ├── audio-ui-systems.md        # Procedural audio + HRTF, HUD, vignette
│   ├── 2d-drawing-textures.md     # Canvas procedural, atlas, normal Sobel
│   ├── asset-pipeline.md          # GLTF, Draco gLTF/, KTX2, SOGS streaming
│   ├── external-libraries.md      # Lite vs Full, curated opt-ins, CC0 sources, anti-slop, credits
│   ├── design-system.md           # NEW ANTI-SLOP: tokens, palette, themed HUD, inference
│   ├── performance-optimization.md # Instanced, LOD, atlas, clustered, Frame Graph
│   ├── testing-deployment.md      # Matrix 40+, Playwright, Vite 7, PWA
│   ├── debugging.md               # Triage order, symptom→fix, revision protocol
│   ├── multiplayer-networking.md  # NEW: ws authoritative, prediction, interpolation
│   └── webxr-vr.md                # NEW: WebXR session, controllers, locomotion
├── scripts/
│   ├── scaffold-threejs.js        # Three 0.175 + Vite 7 + animation/vfx dirs + shims
│   └── scaffold-babylonjs.js      # Babylon 8.15 + Havok + Vite 7
├── test/                          # Automated checks — `npm test` (offline, zero deps)
│   ├── skill.test.js              # Version sync, bundled-copy sync, pins, links (+opt-in CDN check)
│   └── scaffold.test.js           # Scaffold smoke: structure, syntax, invariants (+opt-in vite build)
├── screenshoot-example/           # Example game screenshots built with this skill
│   ├── 1.png                      # Voxel game — third-person forest biome
│   └── 2.png                      # Voxel game — first-person grass terrain
└── assets/
    ├── images/
    │   ├── qris.jpeg              # QRIS donation QR code
    │   └── btc.jpeg               # Bitcoin donation QR code
    ├── templates/
    │   ├── threejs/               # index.html (shims+TSL), package, vite baseline
    │   └── babylonjs/             # index.html, package 8.15, vite baseline
    └── pwa/                       # manifest.json + sw.js (cache v2)
```

## Design Principles

1. **Famous-dev level** — playable 5 min, win/lose, anim+VFX+sound coherent, extendable code, anti-slop REQUIRED.
2. **Self-contained** — procedural where possible, KTX2/SOG compressed where files needed, PWA cache. Lite profile default (~300KB); Full libraries strictly opt-in with Lite fallback.
3. **Progressive disclosure** — SKILL core + 22 refs on-demand, Weak-Model Quick Start (≤14B) 4-step fallback (weak models stay Lite).
4. **2026-native** — WebGPU auto-fallback, TSL, clustered lights, Frame Graph, Timer fallback Clock, Havok, Splat.
5. **Runnability** — Path A double-click (shims+three/tsl+webgpu), Path B Vite 7 `baseline-widely-available`, tree-shaken 300KB Lite vs ≤1MB Full.
6. **Honest trade-offs** — when procedural beats file, when physics engine needed, when multiplayer mock vs real ws.
7. **Conflict-free** — dt clamp 0.1 aligned, Babylon 8.15 CDN/npm sync, scaffold WARNING anti-slop, weak-model safe.

## Triggering Tips

`SKILL.md` description is intentionally pushy — covers `animation`, `VFX`, `2D sprite`, `particle`, `skeleton`. If not triggering, prompt: "use the bufatechno-webgamedev skill".

## Support — Donate

If this skill helps you ship games faster, consider supporting development via QRIS or Bitcoin.

### QRIS

Scan the QR code below with any Indonesian e-wallet or mobile banking app that supports QRIS (GoPay, OVO, DANA, ShopeePay, BCA mobile, etc.).

> The QRIS image is located at `assets/images/qris.jpeg` in this repository. Funds go directly to BUFATECHNO to maintain and improve the skill, templates, and references.

### Bitcoin

Scan the QR code below with any Bitcoin wallet app, or send to the address directly:

```
13cfuHxtoouAVBaBC6tFVBR4mbiJfUjNUD
```

> The Bitcoin QR image is located at `assets/images/btc.jpeg` in this repository.

Other ways to support: star the repo, share feedback via [Issues](https://github.com/bufatechno/bufatechno-webgamedev/issues), or contribute improvements via pull request.

## Credits & Third-Party

This skill builds on the work of others. Full credit table (project, author, license) lives in [`references/external-libraries.md`](references/external-libraries.md#8-credits--licenses-third-party-code-and-assets-referenced-here) — summary:

- Engines & tooling (MIT): `three` (three.js authors), `@babylonjs/*` (Babylon.js team, Apache-2.0), `vite` (Vite team), `es-module-shims` (Guy Bedford)
- Full opt-ins: `three-mesh-bvh` (Garrett Johnson, MIT), `cannon-es` (cannon-es contributors, MIT), `@dimforge/rapier3d-compat` (Dimforge, Apache-2.0), Havok plugin (Microsoft Havok, free via Babylon), `gsap` (GreenSock, free license), `howler.js` (James Simpson / GoldFire Studios, MIT), `nipplejs` (Sébastien Altman, MIT), `pixi.js` (PixiJS team, MIT)
- Free assets: Quaternius (CC0), Kenney.nl (CC0), Poly Pizza (CC0/CC-BY per model), Mixamo (Adobe, free with account)

> Every game built with this skill must ship its own `Credits` section listing the third-party scripts and assets it actually uses (name, author, license, version).

## License

MIT — use, modify, distribute freely.

## Author

BUFATECHNO (https://bufatechno.com)

bufatechno-webgamedev

파일 탐색기

# CDN으로 사용하기

Was this content helpful?

Recent Feedback

Download README