HTML WebGL support

[TokisanGames]

Description

500 brings support for the compatibility renderer. However, we haven't been successful getting an HTML export working. It's unclear if this is due to our process, or bugs in Terrain3D or Godot.

Here is the process so far.

A key point is that the terrain build, the export template, and export settings need to match the same thread support. All three marked on or off.

Docs

Building instructions https://docs.godotengine.org/en/stable/contributing/development/compiling/compiling_for_web.html

Godot Export for web docs https://docs.godotengine.org/en/stable/tutorials/export/exporting_for_web.html

Building

To build the extension for web you must install emscripten, set up the build environment, then build the web assembly version. I installed with scoop, which is how my python is also installed, per the Godot building instructions.

Emscripten seems to be very finicky about versions. Akien reports they are using v3.1.64 for 4.3 stable builds.

$ scoop install emscripten@3.1.64

# then I restarted my terminal to get the updated path to finish installing emscripten

$ emsdk install 3.1.64
$ emsdk activate 3.1.64

# finally setup the build environment
$ source ~/scoop/apps/emscripten/current/emsdk_env.sh

# build
$ scons platform=web target=template_debug threads=no

$ ls project/addons/terrain_3d/bin/*.wasm
project/addons/terrain_3d/bin/libterrain.web.debug.wasm32.wasm

This file needs to be added to terrain.gdextension

web = "res://addons/terrain_3d/bin/libterrain.web.debug.wasm32.wasm"

These are also untested possibilities:

web.debug = "res://addons/terrain_3d/bin/libterrain.web.debug.wasm32.wasm"
web.release = "res://addons/terrain_3d/bin/libterrain.web.release.wasm32.wasm"

web.wasm32.nothreads = "res://addons/terrain_3d/bin/libterrain.web.debug.wasm32.nothreads.wasm"
web.debug = "res://addons/terrain_3d/bin/libterrain.web.debug.wasm32.wasm"

Exporting

• Select custom template debug: web_dlink_nothreads_debug.zip, which I found here: C:/Users/Cory/AppData/Roaming/Godot/export_templates/4.3.stable/web_dlink_nothreads_debug.zip
• Enable Extensions Support
• Ensure Threads Support is disabled to match the other settings
• Vram compressed textures don't work for me on Edge. They don't load in the log. They stop complaining with VRam uncompressed.

Upload to Webserver

After export, the full package must be uploaded to a webserver. Itch or your own. That server must be configured with SharedArrayBuffer & Cross Origin Isolation. In nginx this can be enabled with:

    location ^~ /terrain3d/ {
        add_header "Cross-Origin-Opener-Policy" "same-origin";
        add_header "Cross-Origin-Embedder-Policy" "require-corp";
    }

On Itch.io , edit game, find the Embed Options section and enable:

SharedArrayBuffer support - (Experimental) This may break parts of the page or your project. Only enable if you know you need it.

Running

I built w/ 4.2.2 and seemed to mostly load but error messages complained that my scene files were built for 4.3?? So I built and exported everything with 4.3: godot source, godot-cpp, Godot binary, Godot export templates.

Edge complained about being unable to load the textures if compressed with vram compressed. But no complains using vram uncompressed.

Currently it loads to the godot logo, then our demo scene w/ player and blue sky, but the terrain doesn't render and has no collision.

---

Errors & Solutions

Uncaught (in promise) LinkError: WebAssembly.instantiate(): Import #0 "env" "memory": mismatch in shared state of memory, declared = 1, imported = 0

This is a mismatch of thread options: https://github.com/godotengine/godot/issues/94537 Set all to threaded or not threaded.

[Xtarsia]

for refrence, this project is a working example of GDextension exported to web, and is under MIT

https://github.com/kiwijuice56/sand-slide - working example in chrome browser in itch.io too!

[TokisanGames]

Ok, I have the demo scene building and loading. Updated instructions in Op.

https://tokisan.com/terrain3d/demo.html

However there are three problems:

• The mouse isn't captured, so the camera doesn't move (but the mouse wheel does work)
• Terrain collision doesn't work. But it works on the tunnel.

• The terrain doesn't render. The console reports a problem with shader compilation:

  USER ERROR: SceneShaderGLES3: Vertex shader compilation failed:
  ERROR: 0:460: 'usampler2DArray' : No precision specified
  WARNING: 0:718: '/' : Zero divided by zero during constant folding generated NaN
  
  at: _display_error_with_code (drivers/gles3/shader_gles3.cpp:254)
  USER ERROR: Method/function failed.
  at: _compile_specialization (drivers/gles3/shader_gles3.cpp:348)