-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
6a04193
commit d29a1f2
Showing
1 changed file
with
29 additions
and
4 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,11 +1,36 @@ | ||
| # VU virtual lab | ||
| This is a template for creating a virtual lab environment using 360º panoramic images and the open source panorama viewer [Pannellum](https://pannellum.org). For a demo, go to https://vu-ih2ls.github.io/vu-virtual-lab/. | ||
| This is a template for creating a virtual lab environment using 360º panoramic images and the open source panorama viewer [Pannellum](https://pannellum.org).[^1] For a demo, go to https://vu-ih2ls.github.io/vu-virtual-lab/. | ||
|
|
||
| [^1]: Petroff, Matthew A. "Pannellum: a lightweight web-based panorama viewer." Journal of Open Source Software 4, no. 40 (2019): 1628. doi:10.21105/joss.01628 | ||
|
|
||
| ## Image capture and pre-processing | ||
| The 360º panoramic images are expected to be in [equirectangular](https://en.wikipedia.org/wiki/Equirectangular_projection) format. Below an equirectangular image taken using the Insta360 X3 camera in the 72MP mode is shown. | ||
| The 360º panoramic images are expected to be in the [equirectangular](https://en.wikipedia.org/wiki/Equirectangular_projection) format. Below an equirectangular image is shown, taken using the Insta360 X3 camera in 72MP mode. | ||
|  | ||
|
|
||
| First, the image should be exported as an equirectangular image using the software provided with the camera (in this case Insta360 Studio). Be aware that there could be some errors in stitching the images together, so keep that in mind when setting up the camera. | ||
| First, the image should be exported as an equirectangular image using the software provided with the camera (in this case Insta360 Studio). Be aware that there could be some errors in the stitching of the images by the camera, so keep that in mind when setting up the camera. | ||
|  | ||
|
|
||
| The resulting image is likely large (~30-40 MB), so compression is necessary. This can be done using any image editing software (in this case Pixelmator Pro). The quality is set to 80% and the WebP format is used, as this is most space-efficient. | ||
| The resulting image is likely large (~30-40 MB), so compression is necessary to keep loading times manageable. This can be done using any image editing software (in this case Pixelmator Pro). The quality is set to 80% and the WebP format is used, as this is most space-efficient. | ||
|  | ||
|
|
||
| For removing the tripod, two approaches are possible: adding a logo over the tripod (using the app provided with the 360 camera) or editing it using an image editing program that is able to edit equirectangular images (for example in Affinity Photo using live projection). | ||
|
|
||
| ## Virtual lab setup | ||
| To create a virtual lab environment, first create a new repository using this template. To get started, first look at `settings.js`, which contains the following variables: | ||
| - `baseUrl` (string): the url of the canvas page in the format `https://canvas.<UNIVERSITY>.nl/<COURSE_CODE>/`, where `<UNIVERSITY>` and `<COURSE_CODE>` should be edited, for example `https://canvas.vu.nl/courses/12345/` | ||
| - `folder` (string): the name of the folder containing the images, the default is `img` | ||
| - `smallScreenWarning` (boolean): there is an option to show a warning for screens smaller than 800 pixels, the warning is not permanent and can be clicked away, if you do not want this behavior, set it to `false`, the default is `true` | ||
|
|
||
| The second step is to upload your images into the `img` folder (or any other folder you specified in `settings.js` using `folder`). The rest of the files are explained below: | ||
| - `pannellumViewer.js`: Here you can change all the settings related to Pannellum, the virtual tour, locations of markers and more. For an extensive explanation, see https://pannellum.org/documentation/overview/. Also look at the useful links below. | ||
| - `index.html`: By default, the virtual lab environment consists of one single page that shows the pannellum viewer in fullscreen, as this works best when embedding the website in canvas or any other site. To change anything on this default page, edit `index.html`. | ||
| - `fallback.html`: Shown when the browser does not support WebGL and/or Pannellum. An option could be to show some static images of the lab, as those will always load. | ||
| - `favicon.ico`: The icon that will be shown in the browser tab, the default is the iH2LS logo. The icon can be removed for no icon or replaced by generating an icon using image editing software or an online tool (https://realfavicongenerator.net for example). | ||
| - `pannellum` (folder): In this folder, the Pannellum library is stored, dowloaded from https://pannellum.org/download/. This is used instead of the CDN Pannellum provides for reliability. If necessary, the CDN can also be used instead of the folder. | ||
|
|
||
| ## Useful links | ||
| - The Pannellum examples (https://pannellum.org/documentation/examples/simple-example/) | ||
| - [Adding hotspots](https://pannellum.org/documentation/examples/hot-spots/) | ||
| - [Setting up a tour](https://pannellum.org/documentation/examples/tour/) | ||
| - [Setting the initial view](https://pannellum.org/documentation/examples/initial-view/) | ||
| - All Pannellum JSON configuration options (https://pannellum.org/documentation/reference/#json-configuration-file-options) |