Skip to content

Web Export

ReGame web export is planned as a platform backend, not a separate browser-only engine.

The intended architecture keeps ECS, GameObject/component data, RGScript, scene/template loading, collision, and renderer command generation shared with native builds. The browser layer supplies canvas/display, WebGL, input, audio, fetch/storage, and the boot loader.

Current Status

Web export is an active platform foundation, not a production export button yet. The current web target builds a WASM runtime, mounts project.bundle, boots the configured main scene, forwards keyboard input, simulates shared 3D physics through PhysicsWorld3D, and renders runtime items through the compiled C++ GLRenderer / GameRenderer path on WebGL2.

The current web shell lives at packages/regame/platform/web/index.html. It reports missing build output until regame-player.wasm and project.bundle are present. Once built, JavaScript owns loading/input glue while C++ owns scene ticking and rendering.

The shell boots the configured main scene by default. For focused testing, append ?scene=<sceneName> or ?scene=<scenePath> to the web URL, such as ?scene=test3d or ?scene=src/scenes/test3d.scene. The scene must be listed in the project Build Settings or be present in the bundled files. If it is missing, the web player reports the available scenes rather than falling back silently.

Keyboard input is translated by the browser shell and forwarded into the shared Game key state. The bridge normalizes browser code values first, then printable key values, so script names such as w, a, s, d, space, enter, and arrow-direction keys stay stable across browsers and automation tools. The bridge tracks held keys so browser key repeat does not create repeated just_pressed frames, and it clears held keys when the page loses focus or is hidden. This keeps web keyboard behavior aligned with desktop-style key down/up transitions while still allowing browser automation to drive the compiled runtime through regameWeb.keyDown(), regameWeb.keyUp(), and regameWeb.releaseAllKeys().

Run:

bash
pnpm web:doctor -- --project apps/MyGame12

Create the current project data bundle:

bash
pnpm web:bundle -- --project apps/MyGame12 --out packages/regame/platform/web

That writes project.bundle beside the web shell so the browser loader can fetch project data. This is not the final optimized pack format; it is the first deterministic project payload for web-player development.

Configure the first WASM runtime target once Emscripten is installed:

bash
pnpm web:build -- --project apps/MyGame12

The build command creates project.bundle, configures the Emscripten CMake target, and writes regame-player.js / regame-player.wasm beside the web shell. The web target links the same Jolt-backed PhysicsWorld3D implementation as native builds, using Jolt's single-threaded job system for browser execution.

The current renderer milestone exports regame_web_render(width, height), creates a WebGL2 context for the page canvas, and draws the shared runtime render list from C++. Canvas2D preview code remains only as a fallback for debugging failed WebGL boots.

For browser automation and smoke tests, the loader exposes regameWeb on the page. It provides getFrame(), tick(dt), keyDown(key), and keyUp(key) wrappers around the compiled WASM entry points, so tests can drive the same runtime without depending on browser focus.

2D and 3D Presentation

The web shell separates 2D pixel-art presentation from 3D mesh presentation. A 2D scene uses the scene viewport backing size and the canvas pixel presentation mode so tilemaps and sprites stay crisp. A scene containing 3D components such as Camera3D, Transform3D, MeshSource, or MeshRenderer uses the canvas smooth presentation mode, sizes the canvas backing store from the CSS size and device pixel ratio, and requests WebGL antialiasing before the context is created.

This is intentionally not a single global smoothing switch. Pixel-art sampling should be owned by 2D sprites, tilemaps, materials, or viewports. Mesh edge quality should be owned by the 3D render target and future 3D project settings such as MSAA and render scale.

Use --strict in automation when missing pieces should fail the command:

bash
pnpm web:doctor -- --project apps/MyGame12 --strict

Target Output

A real web export should produce:

text
index.html
regame-player.js
regame-player.wasm
project.bundle
assets/

First Milestone

The first supported web player should prove 2D parity:

  • Boot the configured main scene, usually GameManager.
  • Load scene, template, data asset, script, texture, and audio assets from a browser-safe bundle.
  • Render TileMapLayer, Sprite2D, UI rectangles/text, and Camera2D output.
  • Run RGScript lifecycle hooks.
  • Support keyboard, pointer, touch, and basic audio unlock behavior.
  • Report script errors clearly in browser logs.

Design Rules

  • Do not duplicate RGScript in a JavaScript-only runtime.
  • Do not define a separate web scene format.
  • Do not hide missing features behind silent no-ops.
  • Do not expose a final Export Web workflow until browser validation proves boot, rendering, input, scripts, and asset loading.

ReGame engine documentation