ported2browserTHE INDEPENDENT FIELD GUIDE

Inside the browser

WebGL, WebAssembly and a blank game screen.

A game can finish downloading its page and still fail to start. Knowing what draws the scene and what runs the program gives you a more useful next check.

WebGL, WebAssembly and a blank game screen.
HexGL at the opening of a race on its original host. Its 3D scene uses WebGL.

WebGL draws graphics

WebGL exposes accelerated graphics to the browser. HexGL and Astray use it for 3D scenes; Freeciv-web offers a WebGL client alongside its 2D option. If a menu works but a 3D view stays blank, investigate graphics support, asset failures and the selected quality setting.

WebAssembly runs compiled code

WebAssembly is a compilation target that can run alongside JavaScript. Emscripten is a toolchain used to bring existing native programs to the web; pelya’s OpenTTD port documents that build path. A .wasm module and its data files may arrive after the HTML page. A stopped download and a failed graphics context are different failures.

Astray uses Three.js and Box2dWeb. Its keyboard maze is another WebGL example.
Astray uses Three.js and Box2dWeb. Its keyboard maze is another WebGL example.

The two technologies can work together

WebGL and WebAssembly describe different parts of a game. One is not a newer replacement for the other. A compiled game can render through browser graphics APIs, while a JavaScript game can use WebGL without a WebAssembly module. The title “HTML5 game” alone tells you little about a specific build’s requirements.

Match the symptom to the next check

For a stuck loading indicator, check the game’s status notice and data download. For an empty 3D scene after a working menu, try lower quality and another current browser. For a responsive scene with ignored keys, focus the game and read its input help. Keep the game URL, browser version and exact visible error when reporting a problem.

Read the originals.

PUT IT INTO PRACTICE

Open a game.

The full collection
Hextris project imagePuzzle

Rotate. Stack. Make room.

Web-nativeKeyboard / touch documented