mengto/skills

optimize-threejs-games

Profile, diagnose, and improve Three.js or WebGL game performance without regressing gameplay.

Zobacz źródło
Oryginalny dokument Skill

Treść z repozytorium z zachowaniem nagłówków, przykładów, kodu, tabel, linków i obrazów.

Optimize Three.js Games

Measure before changing behavior, then validate the same gameplay path after every optimization.

Establish a repeatable scene

Choose a deterministic representative encounter and record device, viewport, quality level, player position, enemies, active effects, frame-time sample, draw calls, triangles, texture count, and warnings. Compare like with like.

Diagnose the limiting side

  • Suspect CPU when simulation, allocations, React work, pathfinding, or per-frame scans grow with actors.
  • Suspect GPU when resolution, overdraw, shadows, transparent particles, post-processing, draw calls, geometry, or texture bandwidth dominate.
  • Inspect before optimizing; do not lower quality blindly.

Apply low-risk fixes first

Reuse geometry/materials, pool transient effects, cull inactive/offscreen work, throttle noncritical UI updates, cap particle counts, avoid per-frame allocation, and update only changed transforms. Keep render quality settings explicit and reversible. Degrade decorative effects before combat readability or controls.

Guard the result

Re-run the original encounter and verify frame time, visual correctness, collision/contact behavior, memory stability, mobile controls, reduced motion, and console health. Close temporary servers, benchmarks, and browser tabs once they are no longer needed.

z tego samego repozytorium

Więcej Skills

Wszystkie Skills
mengto
Społeczność

cinematic-scroll-storytelling

Create cinematic scroll-driven landing pages with Lenis smooth scrolling, GSAP ScrollTrigger, scroll-linked progression, staggered text reveals, sticky card stacks, parallax backgrounds, scroll-scrubbed transitions, footer reveals, and immersive preloaders. Use when analyzing or building premium editorial scroll experiences, sticky project stacks, kinetic typography, or section-by-section storytelling.

instalacje
2
GitHub Stars
6,8 tys.
Aktualizacja
6 paź
mengto
Społeczność

landing-page

Use when designing or rewriting a high-converting landing page (single-offer page) for SaaS/apps/services. Covers structure, layout patterns, conversion strategies, copywriting, SEO/AEO, and common pitfalls.

instalacje
2
GitHub Stars
6,8 tys.
Aktualizacja
6 paź
mengto
Społeczność

scroll-world-storytelling

Turn an article, case study, brand narrative, product journey, or long-form story into a cinematic scroll-driven landing page using one of three renderers: scrubbed video, a real-time Three.js world, or semantic HTML/SVG data and typography. Use when the user asks for a scroll world, fly-through landing page, article-to-website transformation, animated planet, data scrollytelling, video-scrubbed page, connected visual journey, or story-led alternative to ordinary stacked sections.

instalacje
2
GitHub Stars
6,8 tys.
Aktualizacja
6 paź
mengto
Społeczność

no-ai-design-slop

Prevent and remove generic AI-generated design defaults, incoherent visual choices, and established UI defects while creating, revising, or reviewing websites, apps, screenshots, mockups, and design code. Use as a passive quality gate during UI work or for an explicit anti-slop cleanup; preserve the chosen art direction instead of forcing a neutral redesign.

instalacje
2
GitHub Stars
6,8 tys.
Aktualizacja
6 paź