The Powder Toy

Hoita

I've successfully built a wasm32-emscripten project and obtained .js and .wasm files. How can I run it correctly on the web? I've tried embedding it into HTML but it doesn't seem to work as expected.

LBPHacker

You neglected to explain what "not as expected" entails, but I can guess.

So one way to get a working example is by asking the compiler for a .js, a .wasm, and a .html also with '-o', app_exe + '.html' instead of '-o', app_exe + '.js' in the top-level meson.build. This is sufficient to run any basic emscripten app.

However, TPT uses threads in ways that emscripten can only support with web workers combined with a fairly low-level and difficult to secure primitive, SharedArrayBuffer. This primitive is subject to cross-origin isolation, which, long story short, means that a main thread and workers served from storage (i.e. file:/// URLs) can't communicate between themselves with it, and so you can't test TPT locally by just opening the resulting .html. Instead, you have to serve all three files from an actual HTTP server that the browser can assign a single origin to. SharedArrayBuffer also requires some non-trivial settings in the form of headers:

Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp

So you need a HTTP server that allows specifying these.

I was at some point going to explain this in some readme in the repo, but decided against due to how few people are likely to ever want to get it to work. See a working example here, on my website. You can use the html, I don't mind.

Hoita

@LBPHacker?326511

Thank you very much. This is the second issue I've encountered.

I set up an HTTP server using Python 3, but when I visit, the webpage keeps hanging at "Loading...". All the test files I'm using are from https://trigraph.net/powdertoy/wasm.

(python3)

import http.server
import socketserver

class MyHTTPRequestHandler(http.server.SimpleHTTPRequestHandler):
def end_headers(self):
self.send_header("Cross-Origin-Opener-Policy", "same-origin")
self.send_header("Cross-Origin-Embedder-Policy", "require-corp")
super().end_headers()

HOST = '127.0.0.1'
PORT = 8000

with socketserver.TCPServer((HOST, PORT), MyHTTPRequestHandler) as server:
print(f"Server started at http://{HOST}:{PORT}")
server.serve_forever()

LBPHacker

No errors in the js console and/or network log?

Hoita

@LBPHacker (View Post)

powderbeta.html:1 The Cross-Origin-Opener-Policy header has been ignored, because the URL's origin was untrustworthy. It was defined either in the final response or a redirect. Please deliver the response using the HTTPS protocol. You can also use the 'localhost' origin instead. See https://www.w3.org/TR/powerful-features/#potentially-trustworthy-origin and https://html.spec.whatwg.org/#the-cross-origin-opener-policy-header.
powderbeta.js:619 Uncaught (in promise) ReferenceError: SharedArrayBuffer is not defined
at powderbeta.js:619:38
at powderbeta.html:45:56
@ powderbeta.js:619
@ powderbeta.html:45
Promise.then
@ powderbeta.html:45
@ powderbeta.html:56
powderbeta.html:1 Uncaught (in promise) Error: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received

LBPHacker

Ah yeah, that explains it. It seems you need full-blown HTTPS with domains and whatnot for this to work, due to security concerns. I should also mention that even if you got it to work, it wouldn't be able to connect to the official save server due to the cross-origin isolation, as you can see when using the instance on my website.

Hoita

@LBPHacker (View Post)

I have enabled HTTPS, and now it works fine. Thank you very much for your help!!

LBPHacker

Actually, looking at the message again, maybe it would have sufficed to use http://localhost instead of http://127.0.0.1, I'm not sure.

Hoita

@LBPHacker (View Post)

Indeed it is.Is it possible to connect to the internet or access files stored in the same directory?

LBPHacker

Nope. Both are different origins, as far as the browser is concerned, and anything cross-origin is unavailable due to the headers you need to configure for SharedArrayBuffer to work.

How to run an Emscripten build successf