This post is a note for running Google's <model-viewer> server in guest WSL2 on host Windows 10 and testing it from mobile devices.
<model-viewer> recommends to use WSL2 on Windows platform due to the dependency issues. But external mobile devices can't directly access the server running in WSL2. You need to set up port forwarding and open the port for the test.
<model-viewer> is a Google's project that you can easily display interactive 3D models on the web & in AR with custom elements (HTML tags).
First, clone the <model-viewer> GitHub repository and build it in your WSL2 as the instructions in the repository readme.
$ git clone --depth=1 https://github.com/google/model-viewer.git $ cd model-viewer $ npm install $ npm run bootstrap $ npm run build
Next, run the web server in WSL2. If you want to test with WebXR, you need to access the server with https protocol. Otherwise browsers disable WebXR API.
Then you should first set up SSL certification and then run the server with SSL enabled.
$ openssl req -newkey rsa:2048 -new -nodes -x509 -days 3650 -keyout key.pem -out cert.pem $ node ./node_modules/.bin/http-server -p 8080 -c-1 -o /packages/modelviewer.dev -S -C cert.pem
http-server command shows message like
Starting up http-server, serving ./ through https Available on: https://127.0.0.1:8080 https://xxx.xxx.xxx.xxx:8080 # Editor's note: WSL2 IP address Hit CTRL-C to stop the server open: https://127.0.0.1:8080/packages/modelviewer.dev
Here, I let the guest WSL2 IP address be
Open a web server on your host Windows 10 and access
https://xxx.xxx.xxx.xxx:8080 to check if <model-viewer> works.
Remember the WSL2 IP address for the next step.
After you confirm <model-viewer> boots up in WSL2, you need to set up port forwarding from host Windows 10 to guest WSL2.
Run Command prompt or Power shell as administrator in your host Windows 10, and then run the following command to set up the port forwarding.
> netsh.exe interface portproxy add v4tov4 listenport=8080 listenaddress=* connectaddress=xxx.xxx.xxx.xxx
If you want to check if it succeeds, you can use
show command of
> netsh.exe interface portproxy show all Listen on ipv4: Connect to ipv4: Address Port Address Port --------------- ---------- --------------- ---------- * 8080 xxx.xxx.xxx.xxx 8080
If you want to delete the set up, you can use
delete command of
> netsh.exe interface portproxy delete v4tov4 listenport=8080 listenaddress=*
After you finish the port forwarding set up, you need to start IP helper service with the following command.
> sc.exe start iphlpsvc
If you want to stop the service, you can use
stop command of
> sc.exe stop iphlpsvc
Setting up the port forwarding is not good enough. You also need to open the port for the test.
Windows Defender Firewall with Advanced Security in your host Windows 10. You can find it in the search bar placed at bottom left in the screen.
In the window, select Inbound Rules in the left tab and then click the "New Rules" in the right Action tab.
In the Rule Type window, select Port and click Next.
In the Protocol and Ports window, select TCP, set specific local ports 8080, and then click Next.
In the Action window, select Allow the connection and click Next.
In the Profile window, choose the option depends on your environment and click Next.
In the Name window, name whatever you want and write the description if you want. And click Finish.
Don't forget to stop the IP helper service and close the port after you finish the test for the security.
Now it's ready for the test.
Check your host Windows 10 IP address. For example you may use
ipconfig command. Here, I let the host Windows 10 IP address be
Open a web browser in your mobile device which is in the same network with the host Windows 10.
https://yyy.yyy.yyy.yyy:8080/packages/modelviewer.dev/ in the URL bar. If you see an untrusted web page warning, select an ignore option.
<model-viewer> starts on your mobile. Your mobile accesses the host Windows 10 and it forwards to the guest WSL2.