ForgEng 3D Template

Live demo: play.forgeng.dev/forgeng-3d-template/current/

Homepage Ocean Demo poster — source: forgeng.dev

TypeScript starter template for browser games built with ForgEng — a WebGPU-first, modular game engine that runs directly in modern browsers (no native runtime install).

This repository is the 3D starter sibling of forgeng-2d-top-down-template, forgeng-2d-platformer-template, and forgeng-2d-endless-flyer-template. Use it to bootstrap client-side 3D scenes with Vite + TypeScript, then grow into the full ForgeNG 3.4.2 stack documented at forgeng.dev.

Keywords: ForgEng, ForgeNG, TypeScript, WebGPU, 3D game template, Vite, browser game engine, WGSL, ECS, transport, lighting, shadows

Why this template

ForgEng / ForgeNG 3.4.2 is the engine version vendored by this template. Public docs describe it as combining:

• the established scene, ECS and 3D WebGPU runtime under one lifecycle owner
• a production 2D runtime (sprites, tilemaps, text, particles, cameras, animation, collision, lighting, masks, hybrid composition) when you need 2D or hybrid work
• versioned provider contracts for input/actions, audio, physics, assets, gameplay, storage, transport, UI, animation and rendering
• manifest-driven assets, compressed formats, opt-in devtools and bounded performance observability

The marketing site positions the engine as type-safe, GPU-first, web-native: modern WebGPU pipelines, WGSL shaders, lighting, materials, shadows and post-processing, with composable scenes, ECS, providers and plugins — delivered as ordinary web assets on desktop/mobile browsers that support WebGPU (forgeng.dev).

This template gives you a minimal, runnable 3D game shell on that foundation so you can start iterating on scenes immediately.

What you get in this repo

A focused 3D starter (not the full engine surface):

• ForgEng.create engine entry (Phaser-style: config in main.ts, content in src/scene/)
• perspective camera + ambient / directional lighting
• orange player cube on an 8×8 platform with movement, jumping, gravity, and fall reset
• WASD / arrow movement, Space / pointer jump, E manual reset
• DomUiShell side panel: Controls + optional Metrics (?advanced=1)
• vendored ForgeNG 3.4.2 3D runtime + DomUiShell under src/vendor/forgeng/

Engine capabilities you can grow into

Documented on forgeng.dev / ForgeNG 3.x docs (not all enabled in this starter by default):

Area	Publicly documented direction
Rendering	WebGPU-only runtime (no silent fallback to another renderer); GPU pipelines, WGSL, lighting, materials, shadows, post-processing
3D gameplay	Scene ownership, ECS, transforms/hierarchy, materials/textures, models/glTF, quality profiles, camera, atmosphere/fog (see docs tree)
2D / hybrid	Full 2D stack and hybrid composition available in the same 3.0 product line
Architecture	Explicit scenes, ECS, replaceable providers/plugins behind versioned contracts
Systems	Input/actions, audio, physics, assets, gameplay, storage, UI, animation, rendering
Networking	Opt-in transport composition (forgeng/transport, optional reconnect). Contract is DOM-neutral and binary-only; ForgeNG does not ship a signaling service with the SDK (Transport Composition)
Delivery	Deploy as web assets; share demos/games by opening a page in a WebGPU browser

Honest scope note: this template demonstrates 3D scene + lighting + input + UI. Features such as multiplayer transport, GPU physics providers, compressed asset codecs, or the full 2D stack are part of the broader ForgeNG ecosystem and docs — enable them when your project needs them.

Requirements

• Git (to clone this repository)
• Node.js 18+
• A browser/device with WebGPU support (ForgeNG 3.4.2 does not silently switch renderer)

Quick start

git clone https://github.com/ForgEngDev/forgeng-3d-template.git
cd forgeng-3d-template
npm install
npm run dev

Open http://localhost:3000/.

npm run build
npm run preview

Project layout

src/
  main.ts              # ForgEng.create — canvas, providers, scenes
  scene/
    gameScene.ts       # create / update / destroy wiring
    camera.ts
    light.ts
    ground.ts          # platform plane
    box.ts             # orange cube
    controller.ts      # WASD / mouse / touch
    hud.ts             # DomUiShell panels
  vendor/forgeng/      # vendored runtime + DomUiShell
css/style.css
index.html

Controls

Input	Action
WASD / arrows	Move the cube, including off the platform edge
Space / left click / tap	Jump
E	Reset cube to center

If the cube falls below the scene, it automatically resets to the center of the platform.

Advanced metrics: side-panel toggle or ?advanced=1.

Learn more

• Website: https://forgeng.dev
• Docs (3.x overview): https://forgeng.dev/en/forgeng-3.0/getting-started/overview
• Transport (opt-in networking composition): https://forgeng.dev/en/forgeng-3.0/advanced/transport-composition
• Demos: https://forgeng.dev/en → Demos
• Top-down 2D sibling: forgeng-2d-top-down-template
• Platformer 2D sibling: forgeng-2d-platformer-template
• Endless-flyer 2D sibling: forgeng-2d-endless-flyer-template

License

See LICENSE.

• Template / game code: free to use and improve for client-side games.
• ForgEng engine (vendored under src/vendor/forgeng/): installation on other computers as an engine/SDK and commercial use of the engine are strictly forbidden.

Engine ownership and commercial grants are also described on the public ForgeNG License page.

Public API and AI coding assistants

See the ForgeNG public API repository for versioned TypeScript signatures, an API entry map, and instructions for AI assistants. Give your assistant that link together with this game project. This template's pinned runtime and vendored declarations take precedence over a newer API snapshot. Start with one change and run npm run build, then check the game in a WebGPU browser.