Update examples to build on Emscripten Wasm. Add separate wasm and wasm2js targets. (#2145)

examples/common/entry/entry_asmjs.cpp → examples/common/entry/entry_html5.cpp

@@ -7,6 +7,8 @@
 
 #if BX_PLATFORM_EMSCRIPTEN
 
+#include <bgfx/platform.h>
+
 #include <emscripten.h>
 #include <emscripten/html5.h>
 
@@ -88,11 +90,15 @@ namespace entry
 
 		int32_t run(int _argc, const char* const* _argv)
 		{
-			emscripten_set_mousedown_callback("#canvas", this, true, mouseCb);
-			emscripten_set_mouseup_callback("#canvas", this, true, mouseCb);
-			emscripten_set_mousemove_callback("#canvas", this, true, mouseCb);
+// TODO: Make this somehow configurable to the developer building a HTML5 page. Currently #canvas
+// will take the first canvas element found on the web page.
+#define HTML5_TARGET_CANVAS_SELECTOR "#canvas"
+
+			emscripten_set_mousedown_callback(HTML5_TARGET_CANVAS_SELECTOR, this, true, mouseCb);
+			emscripten_set_mouseup_callback(HTML5_TARGET_CANVAS_SELECTOR, this, true, mouseCb);
+			emscripten_set_mousemove_callback(HTML5_TARGET_CANVAS_SELECTOR, this, true, mouseCb);
 
-			emscripten_set_wheel_callback("#canvas", this, true, wheelCb);
+			emscripten_set_wheel_callback(HTML5_TARGET_CANVAS_SELECTOR, this, true, wheelCb);
 
 			emscripten_set_keypress_callback(EMSCRIPTEN_EVENT_TARGET_DOCUMENT, this, true, keyCb);
 			emscripten_set_keydown_callback(EMSCRIPTEN_EVENT_TARGET_DOCUMENT, this, true, keyCb);
@@ -107,12 +113,17 @@ namespace entry
 			fullscreenStrategy.canvasResizedCallback = canvasResizeCb;
 			fullscreenStrategy.canvasResizedCallbackUserData = this;
 
-			emscripten_request_fullscreen_strategy("#canvas", false, &fullscreenStrategy);
+			emscripten_request_fullscreen_strategy(HTML5_TARGET_CANVAS_SELECTOR, false, &fullscreenStrategy);
 
 			emscripten_set_focus_callback(EMSCRIPTEN_EVENT_TARGET_DOCUMENT, this, true, focusCb);
 			emscripten_set_focusin_callback(EMSCRIPTEN_EVENT_TARGET_DOCUMENT, this, true, focusCb);
 			emscripten_set_focusout_callback(EMSCRIPTEN_EVENT_TARGET_DOCUMENT, this, true, focusCb);
 
+			bgfx::PlatformData pd;
+			bx::memSet(&pd, 0, sizeof(pd) );
+			pd.nwh = (void*)HTML5_TARGET_CANVAS_SELECTOR;
+			bgfx::setPlatformData(pd);
+
 			int32_t result = main(_argc, _argv);
 			return result;
 		}

makefile

@@ -85,13 +85,21 @@ android-x86-release: .build/projects/gmake-android-x86 ## Build - Android x86 De
 	$(MAKE) -R -C .build/projects/gmake-android-x86 config=release
 android-x86: android-x86-debug android-x86-release ## Build - Android x86 Debug and Release
 
-.build/projects/gmake-asmjs:
-	$(GENIE) --gcc=asmjs gmake
-asmjs-debug: .build/projects/gmake-asmjs ## Build - Emscripten Debug
-	$(MAKE) -R -C .build/projects/gmake-asmjs config=debug
-asmjs-release: .build/projects/gmake-asmjs ## Build - Emscripten Release
-	$(MAKE) -R -C .build/projects/gmake-asmjs config=release
-asmjs: asmjs-debug asmjs-release ## Build - Emscripten Debug and Release
+.build/projects/gmake-wasm2js: # Wasm2JS: The JavaScript fallback for web builds when Wasm is not supported by browser
+	$(GENIE) --gcc=wasm2js --with-combined-examples gmake
+wasm2js-debug: .build/projects/gmake-wasm2js ## Build - Emscripten Debug
+	$(MAKE) -R -C .build/projects/gmake-wasm2js config=debug
+wasm2js-release: .build/projects/gmake-wasm2js ## Build - Emscripten Release
+	$(MAKE) -R -C .build/projects/gmake-wasm2js config=release
+wasm2js: wasm2js-debug wasm2js-release ## Build - Emscripten Debug and Release
+
+.build/projects/gmake-wasm:
+	$(GENIE) --gcc=wasm --with-combined-examples gmake
+wasm-debug: .build/projects/gmake-wasm ## Build - Emscripten Debug
+	$(MAKE) -R -C .build/projects/gmake-wasm config=debug
+wasm-release: .build/projects/gmake-wasm ## Build - Emscripten Release
+	$(MAKE) -R -C .build/projects/gmake-wasm config=release
+wasm: wasm-debug wasm-release ## Build - Emscripten Debug and Release
 
 .build/projects/gmake-linux:
 	$(GENIE) --with-tools --with-combined-examples --with-shared-lib --gcc=linux-gcc gmake

scripts/bgfx.lua

@@ -170,13 +170,13 @@ function bgfxProjectBase(_kind, _defines)
 
 		local generator = "out/VS2019"
 
-		configuration { "asmjs" }
+		configuration { "wasm*" }
 			defines {
 				"BGFX_CONFIG_RENDERER_OPENGL=0",
 				"BGFX_CONFIG_RENDERER_OPENGLES=0",
 			}
 
-		configuration { "not asmjs" }
+		configuration { "not wasm*" }
 			includedirs {
 				path.join(DAWN_DIR, "src"),
 				path.join(DAWN_DIR, "src/include"),
@@ -273,12 +273,12 @@ end
 
 if _OPTIONS["with-webgpu"] then
 	function usesWebGPU()
-		configuration { "asmjs" }
+		configuration { "wasm*" }
 			linkoptions {
 				"-s USE_WEBGPU=1",
 			}
 
-		configuration { "not asmjs" }
+		configuration { "not wasm*" }
 			--local generator = "out/Default"
 			local generator = "out/VS2019"
 

scripts/genie.lua

@@ -362,12 +362,12 @@ function exampleProjectDefaults()
 			"GLESv2",
 		}
 
-	configuration { "asmjs" }
+	configuration { "wasm*" }
 		kind "ConsoleApp"
 
 		linkoptions {
-			"-s TOTAL_MEMORY=256MB",
-			"--memory-init-file 1",
+			"-s TOTAL_MEMORY=32MB",
+			"-s ALLOW_MEMORY_GROWTH=1"
 		}
 
 		removeflags {
@@ -537,7 +537,6 @@ or _OPTIONS["with-combined-examples"] then
 		, "14-shadowvolumes"
 		, "15-shadowmaps-simple"
 		, "16-shadowmaps"
-		, "17-drawstress"
 		, "18-ibl"
 		, "19-oit"
 		, "20-nanovg"
@@ -563,6 +562,11 @@ or _OPTIONS["with-combined-examples"] then
 		, "41-tess"
 		)
 
+	-- 17-drawstress requires multithreading, does not compile for singlethreaded wasm
+--	if platform is not single-threaded then
+		exampleProject(false, "17-drawstress")
+--	end
+
 	-- C99 source doesn't compile under WinRT settings
 	if not premake.vstudio.iswinrt() then
 		exampleProject(false, "25-c99")

scripts/geometryv.lua

@@ -117,9 +117,8 @@ project ("geometryv")
 			"GLESv2",
 		}
 
-	configuration { "asmjs" }
+	configuration { "wasm*" }
 		kind "ConsoleApp"
-		targetextension ".bc"
 
 	configuration { "linux-* or freebsd" }
 		links {

scripts/texturev.lua

@@ -117,9 +117,8 @@ project ("texturev")
 			"GLESv2",
 		}
 
-	configuration { "asmjs" }
+	configuration { "wasm*" }
 		kind "ConsoleApp"
-		targetextension ".bc"
 
 	configuration { "linux-* or freebsd" }
 		links {

src/bgfx_p.h

@@ -2885,6 +2885,7 @@ constexpr uint64_t kSortKeyComputeProgramMask  = uint64_t(BGFX_CONFIG_MAX_PROGRA
 		{
 		}
 
+#if BX_CONFIG_SUPPORTS_THREADING
 		static int32_t renderThread(bx::Thread* /*_self*/, void* /*_userData*/)
 		{
 			BX_TRACE("render thread start");
@@ -2893,6 +2894,7 @@ constexpr uint64_t kSortKeyComputeProgramMask  = uint64_t(BGFX_CONFIG_MAX_PROGRA
 			BX_TRACE("render thread exit");
 			return bx::kExitSuccess;
 		}
+#endif
 
 		// game thread
 		bool init(const Init& _init);

src/glcontext_html5.cpp

@@ -70,7 +70,7 @@ namespace bgfx { namespace gl
 		if (m_primary != NULL)
 			return;
 
-		const char* canvas = (const char*) g_platformData.nwh; // if 0, Module.canvas is used
+		const char* canvas = (const char*) g_platformData.nwh;
 
 		m_primary = createSwapChain((void*)canvas);