Skip to content

Physicslibrary/Threejs-WebXR-67P

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Threejs-WebXR-67P

Visualize the size of comet 67P/Churyumov-Gerasimenko in Oculus Quest.

Rosetta 1km from 67P comet.

Rosetta 10km from 67P comet.

This project was inspired by a European Space Agency's webpage explaining the relative size of the Rosetta space probe to comet 67P/Churyumov-Gerasimenko:

ESA: How big is Rosetta compared with the comet?

With ESA and NASA open sourcing their data such as 3D models and images, Three.js, a web browser with WebXR, and Blender can be used to visualize models of a comet (4100m) and Rosetta (32m) in virtual reality.

Threejs-WebXR-67P Pages

https://physicslibrary.github.io/Threejs-WebXR-67P

Hardware

Oculus Quest recommended (6DoF headset/controllers).

Software

Oculus Browser (tested Quest Update >17.0).

Installation

No installation. In Oculus Quest, open Oculus Browser and go to link:

https://physicslibrary.github.io/Threejs-WebXR-67P/examples/67P-Rosetta-1-to-100-scale.html

https://physicslibrary.github.io/Threejs-WebXR-67P/examples/67P-Rosetta-1-to-1-scale.html

With Oculus Quest's headset 6DoF tracking, freely look around Rosetta/67P within Oculus Guardian system. Use Oculus Touch controllers to go to areas out of reach.

Use Oculus Touch controllers to "fly" around Rosetta and comet 67P. It implements a simple way to move around 3D by making a "velocity vector" from left to right controllers.

The distance between controllers is the speed (next to each other is the lowest speed).

Press one front trigger to move (two triggers to double speed).

Hold the left controller fixed and point the right controller in the direction to move.

The simple "fly" code is based on webxr_vr_ballshooter.html.

Note - The white lines from the controllers are not for pointing direction to move but with seeing where the controllers are. Each line is approx 1m in length.

Other buttons on controllers do not work, yet.

If no Oculus Quest, try: (tested on 2018 9.7" iPad/iPadOS 13/Safari, Windows 10/Google Chrome/Firefox)

https://physicslibrary.github.io/Threejs-WebXR-67P/examples/67P-Rosetta-1-to-100-scale-novr.html

Credits

ESA_Gaia_DR2_AllSky_Brightness_Colour_Cartesian_2000x1000.png
Date: 25 April 2018
Satellite: Gaia
Copyright: ESA/Gaia/DPAC, CC BY-SA 3.0 IGO
http://sci.esa.int/gaia/60196-gaia-s-sky-in-colour-equirectangular-projection/

CSHP_DV_257_01_______00343.obj (OBJ File 3.8MB)
Copyright: ESA/Rosetta/NAVCAM – CC BY-SA IGO 3.0
https://imagearchives.esac.esa.int/index.php?/page/navcam_3d_models
https://imagearchives.esac.esa.int/index.php?/page/copyright_information

Rosetta.blend (Rosetta.zip 4MB)
Author/Origin: Eyes on the Solar System. NASA/JPL-Caltech
https://nasa3d.arc.nasa.gov/detail/eoss-rosetta
https://www.nasa.gov/multimedia/guidelines/index.html

Blender 2.81 (or latest) is used to scale CSHP_DV_257_01_______00343.obj to 4100m and exported as "glTF Binary" 67P.glb.

Rosetta.blend (2012 version) is opened with Blender 2.81, fixed few broken things, and exported as "glTF Binary" rosetta.glb.

https://www.blender.org/

km_markers.glb is created in Blender as a series of 10x10x10m cubes spaced by 1km to give a sense of distance.

References

https://threejs.org/

https://github.com/mrdoob/three.js/

Three.js examples is a fantastic place to learn and experiment:

https://github.com/mrdoob/three.js/tree/dev/examples

How to convert WebGL examples to WebVR:

https://threejs.org/docs/index.html#manual/en/introduction/How-to-create-VR-content

How to use the controllers:

https://github.com/mrdoob/three.js/blob/dev/examples/webxr_vr_ballshooter.html

How to load .glb file:

https://github.com/mrdoob/three.js/blob/dev/examples/webgl_loader_gltf.html

Near the end of the webpage is an example of displaying an equirectangular map:

https://threejsfundamentals.org/threejs/lessons/threejs-backgrounds.html

https://www.blender.org/

Rosetta and comet 67P to scale

Making Threejs-WebXR-67P (Feb 10, 2020)

(Update) Feb 20, 2021. This section shows how to use a Raspberry Pi (with built-in wifi) to serve a webpage to an Oculus Quest. "sudo apt-get install http-server -g" is not working on latest Raspberry Pi OS. An alternative is websocketd to serve a webpage (websocketd can pipe sensor readings from a Raspberry Pi gpio to a websocket easily with python or C.

This section assumes users know what a Raspberry Pi single-board computer is and how to use a Linux terminal. Threejs-WebXR-67P is developed on a Raspberry Pi Model 3B+ by coding three.js html5 files.

The following link is for reference. This is where the author first learned about Node.js http-server.

https://threejs.org/docs/index.html#manual/en/introduction/How-to-run-things-locally

Raspberry Pi Model 3B+ has an ethernet port and wireless LAN. We will be making the Pi into a wifi server to connect the Oculus Quest. Learn more about Raspberry Pi at:

https://www.raspberrypi.org/

https://www.raspberrypi.org/help/

Get Raspberry Pi OS Buster with desktop (tested February 2020, 1138 MB version) from:

https://www.raspberrypi.org/software/operating-systems/#raspberry-pi-os-32-bit

Make a bootable Raspbian micro SD card:

https://www.raspberrypi.org/documentation/installation/installing-images/README.md

Connect to the internet using the ethernet port. The wireless LAN will be reconfigured and not available for internet connection.

After booting Raspbian and finishing initial setup, configure Pi as a wireless access point:

https://www.raspberrypi.org/documentation/configuration/wireless/access-point-routed.md

In "Configure the access point software", make own NameOfNetwork and good password for wpa_passphrase. The author skips section "Enable routing and IP masquerading" to keep thing simple (so no internet access from Pi wireless LAN but apt-get work with ethernet). This is useful in developing and serving three.js from a Raspberry Pi with Oculus Quest wifi connected.

Review Terminal:

https://www.raspberrypi.org/documentation/usage/terminal/

In a Terminal, run:

sudo apt-get install npm

sudo apt-get install http-server -g

(Ref: https://www.npmjs.com/package/http-server)

In a terminal (in home directory),

cd ~

mkdir webvr

cd webvr

openssl req -newkey rsa:2048 -new -nodes -x509 -days 3650 -keyout key.pem -out cert.pem

The command is from the preceeding link in section "TLS/SSL".

Open Chromium, and go to:

https://threejs.org/

Click "download" to download master.zip.

After download is completed, extract master.zip to webvr.

In webvr directory, type:

http-server . -p 8000 -S

One way to serve a webpage from a Raspberry Pi is websocketd.

http://websocketd.com/ (more on https://github.com/joewalnes/websocketd)

Websocketd is used in another project (https://github.com/Physicslibrary/Threejs-VR-Sensors) to read sensors from Pi gpio to an Oculus Quest browser.

There is a Linux ARM version for the Raspberry Pi in "Download".

Put websocketd in webvr directory with key.pem and cert.pem.

./websocketd --port=8000 --ssl --sslkey=key.pem --sslcert=cert.pem --staticdir=.

(ctrl-c to end program)

In Chromium, enter https://127.0.0.1:8000 and should get a warning "Your connection is not private". Proceed in "Advanced" as you are connecting to your own Raspberry Pi.

Should look like the left side:

The right side is Chromium console (ctrl-shift-i) which is useful for debugging javascript codes.

If the above work, wifi connect Oculus Quest to Pi, open Oculus Browser, enter https://192.168.4.1:8000.

Try three.js-master/examples/webxr_vr_ballshooter.html:


Copyright (c) 2019 Hartwell Fong