How to test <model-viewer> on mobile and WSL2

Takahiro — Mon, 14 Jun 2021 03:41:19 +0000

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.

What is <model-viewer>?

<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).

Clone and build <model-viewer>

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

Run the web server

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

The above 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 xxx.xxx.xxx.xxx.

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.

Set up port forwarding

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.

> 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.

> 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.

> sc.exe stop iphlpsvc

Open the port

Setting up the port forwarding is not good enough. You also need to open the port for the test.

Open 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.

Test <model-viewer> on mobile devices

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 yyy.yyy.yyy.yyy.

Open a web browser in your mobile device which is in the same network with the host Windows 10.

Enter 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.