Ported Jenn3D to the web

[ShawnZhong]

See the live site at https://shawnzhong.github.io/jenn3d/.

• Compiled the C++ source code to WebAssembly using Emscripten. See glut_wasm.h on unsupported features
• Implemented the web UI. The menu functionality is moved to the web since the API for rendering texts is not available.
• Emulated the wireframe effect using GL_LINE* since glPolygonMode is not supported
• Added support to simulate the right/middle button using ctrl/alt.
• Added shift-drag for panning the model.
• Reimplemented capture using web-native APIs.

[fritzo]

Hi @ShawnZhong this is great, it even works on mobile. I think this should become the main page for jenn3d.org now, and maybe "Homepage" link could be renamed to "Desktop" or "Background" and point to the old page (what's currently at jenn3d.org).  Do you know the easiest way to host directly on github? I'm surprised this works on my phone too. Any ideas how to add different controls to the phone version?

[ShawnZhong]

I think this should become the main page for jenn3d.org now, and maybe "Homepage" link could be renamed to "Desktop" or "Background" and point to the old page (what's currently at jenn3d.org).

I'm glad you like the web version. Renaming the "Homepage" link to "Desktop" sounds good to me.

Do you know the easiest way to host directly on github?

You can refer to this page for more detail.

For the publishing source, you can only choose the root folder / or /docs folder.

People usually create a new (empty) branch called gh-pages, put all the web source there, and choose the root folder of gh-pages to be the publishing source. This is what I did for https://shawnzhong.github.io/jenn3d, and you can find the source of the website here.

Alternatively, you can rename the /web folder to /docs in the master branch and set it to be the publishing source. Note that you also need to commit the two compiled artifacts jenn3d.js and jenn3d.wasm to the branch.

Any ideas how to add different controls to the phone version?

I haven't tried it on a mobile phone until you mentioned it. Most of the part turns out to work surprisingly well. But I noticed that some of the complicated models (e.g., 335-family) fail to load on a mobile device, and the full-screen feature doesn't work (probably due to API restrictions).

In terms of controlling the model on mobile devices, since the modifier keys (e.g., Shift, Alt & Control) don't work, the user needs to use the "flip mouse" feature to rotate the model.

For adding new controls, it might be possible to use the device orientation API, which provides three degrees of freedom (roll, pitch & yaw). The user should be able to rotate the model by rotating the phone.