Glitch hosting termination affecting Piping Server instance

[nwtgck]

Hi model-viewer team,

I'm reaching out as the developer of Piping Server. I currently host a public Piping Server instance at https://piping.glitch.me, which https://modelviewer.dev/editor is utilizing.

model-viewer/packages/space-opera/src/components/mobile_view/utils.ts

Line 18 in 64167d4

export const DOMAIN = 'https://piping.glitch.me/';

Unfortunately, Glitch hosting will end soon: https://blog.glitch.com/post/changes-are-coming-to-glitch/. So the link should be replaced with another instance.

I deployed an instance on Render. This might be helpful but since I haven't been using it for a long time, I can't really tell if it's stable enough for long-term use.

• https://piping.onrender.com/

Web server on Render doesn't seem to support HTTP streaming. However, as far as I know, the https://modelviewer.dev/editor doesn't use streaming.

[samaneh-kazemi]

Thanks for reaching out! I'm gonna try to update the domain and see if that works.

[samaneh-kazemi]

@nwtgck I'm not familiar with this part of code yet. Do you have any suggestions on what scenarios to test out on https://modelviewer.dev/editor to make sure the new instance works?

[nwtgck]

@samaneh-kazemi

Demo

Here is a demo video.
https://x.com/modelviewer/status/1352304331358236672

Design Doc

This describes the connection flow.
#1746 (comment)

[nwtgck]

Unfortunately, the Glitch instance was deleted now as scheduled.

The render.com instance was updated because it used an old Docker image.

[samaneh-kazemi]

Thanks for the update. Sorry I didn't get a chance to test it sooner. I submitted the PR, but it seems like the render instance is unreachable. @nwtgck any thoughts on that? For now I reverted the PR

[samaneh-kazemi]

Seems like https://piping.onrender.com/ is broken?

[nwtgck]

@samaneh-kazemi
It works now but I did not do anything.

[nwtgck]

I checked MONITOR > LOGS in render.com, but there is no error logs at that time. So it might be render.com problem.

[samaneh-kazemi]

Interesting. Now the website works, but the feature is still broken. For now, I submit the PR and will investigate later because the glitch link is not valid anyways.

[nwtgck]

Hi,

It appears there might be a compatibility issue between how Render.com serves content and how model-viewer utilizes Piping Server. While I'd like to investigate the root cause further, I've confirmed that switching to https://ppng.io (the most stable Piping Server hosting) resolves the problem.

git diff

diff --git a/packages/space-opera/src/components/mobile_view/components/mobile_modal.ts b/packages/space-opera/src/components/mobile_view/components/mobile_modal.ts
index 0d1575b5..d84ef7fe 100644
--- a/packages/space-opera/src/components/mobile_view/components/mobile_modal.ts
+++ b/packages/space-opera/src/components/mobile_view/components/mobile_modal.ts
@@ -63,7 +63,10 @@ export class MobileModal extends ConnectedLitElement {
       Use the QR Code to open your edited model, environment image, and &ltmodel-viewer&gt snippet on a mobile device to test out AR features.
       After every subsequent change, click the "Refresh Mobile" button.
     </div>
-    <canvas id="qr" style="display: block; margin-bottom: 90px;"></canvas>
+    <canvas id="qr" style="display: block; margin-bottom: 10px;"></canvas>
+    <div class="modal-text" style="margin-bottom: 80px;">
+      <a href="${this.viewableSite}" target="_blank" style="color: white">${this.viewableSite}</a>
+    </div>
     <div class="modal-text">
       This uses a third-party <a href="https://github.com/nwtgck/piping-server" target="_blank" class="piping-link">piping server</a> to deploy to your mobile device. This server does not store data.
     </div>
diff --git a/packages/space-opera/src/components/mobile_view/utils.ts b/packages/space-opera/src/components/mobile_view/utils.ts
index 29bf0871..47f6f340 100644
--- a/packages/space-opera/src/components/mobile_view/utils.ts
+++ b/packages/space-opera/src/components/mobile_view/utils.ts
@@ -15,7 +15,7 @@
  *
  */
 
-export const DOMAIN = 'https://piping.onrender.com/';
+export const DOMAIN = 'https://ppng.io/';
 
 export function getRandomInt(max: number): number {
   return Math.floor(Math.random() * Math.floor(max));

Here's a video demonstrating the solution:

model-viewer-ppng.io.mp4

In the video, you'll first see a metallic horse being shared. After a refresh, it changes to a non-metallic horse.

Please note that the localhost link below the QR code in the video was added by me for debugging purposes, specifically to verify the behavior without needing a mobile device.

[nwtgck]

If you'd like to set up a Piping Server locally (localhost:8081) for testing, you can do so by running one of the following commands:

docker run -p 8081:8081 nwtgck/piping-server --http-port 8081

OR

npx -y piping-server --http-port 8081