/domemod

A webgl-based tool for visualising fulldome media.

Primary LanguageJavaScript

domemod (beta)

domemod: a webgl-based webtool for visualising fulldome media. This is only the source repository.

###Motivation

There is a myriad of websites that offer preview of panoramic media. On (are rather past) the brink of VR becoming the next hot medium, you can watch your gopro footage in youtube and on facebook and your panoramic images on flickr. So why another »panorama viewer«? The motivation is twofold: 1. Fill out the space (niche) left by the others, provide a tool, a shortcut which enables hassle-free visualisation of fulldome media. 2. This is a personal learning project. More on that in the history section.

###Usage

Domemod allows you to view your files locally in your browser, without the need to upload them to a server or install desktop software. (Please note that a modern browser is needed for this.) In the future, handheld support will be also added.

Most of the effort has flown so far into the functionality of the software, that's why (for now) the UI is rather spartan.

GUI

  • Choose File: opens a single image or video file. The video is looped and muted (the latter is a bug).

  • Enter youtube video id: Unfortunately, this is a hack, not using/supported by the official API. It has only been tested on chrome. Also, you need to manually disable CORS in the browser. (With this plugin, for example. If the plugin is on, media on normal websites won't load, so you'll have to turn it back off again.) Different privacy plugins / ad blockers may also thwart the loading of youtube videos. Finally, the video that you get this way will have, a very low if available 720p resolution. (In terms of planar video it would be ok, but we are stretching the pixels across space.)

  • Projection Type: you may choose between equirectangular (corresponds to general panoramic footage), azimuthal 90° (or fulldome domemaster) and azimuthal 180° This should become modular and extensible by using lookup-textures. Lookup textures won't work unless they have at least 16bit depth (otherwise you have less-than-a-degree precision which is comparable to a pixelation shader), even then, some artifacts appear. In the meantime, raise an issue for another projection type, so that i may implement it.

  • camera position x, y and z: used to change viewer position. Equivalent to shift + mouse drag on the canvas (affects only x and z).

  • camera orientation x and y: to pan / tilt the camera. Equivalent to mouse drag

  • dome radius: the radius of the virtual dome. The units are arbitrary but coherent with the rest.

  • dome orientation x and y: used to rotate the dome around its geometrical origin.

  • dome latitude: shows the height of the dome canvas. 180° is, for example, a full sphere. Suggestions for a better label, anybody?

  • show grid: Overlays a procedurally generated graticule. On some systems this feature doesn't work, only a transparent yellow surface is visible.

###Development and technical information

If you are interested in contributing in any way, open an issue, or look at the domemod trelloboard or simply fork the project. Drop me a line if you want to be added to the board editors.

To make the app run locally, you need to clone / fork the repository, have node installed and run npm install from the project root. npm run build will watch / complile the source. You can use your favourite apache server (e.g. MAMP) to serve the app.

As already mentioned, this is a learning project. It uses webgl. I have some prior experience with opengl; for webgl my favourite resources is among others MDN (also the source of some code snippets). Other than that, while I haven't fully embraced it yet, i really like the philosophy of node and its webgl counterpart, stack.gl. The core of the app is a custom fragment shader. It does some minimal raytracing, but only to analitically find intersections with a known sphere (the dome). This limits somewhat the extensibility of the project (e.g. you can't just add some 3d models to it) but ensures a good mix of rendering performance and visual quality. (theoretically :) Some billboarding should be possible (and also planned) though.

###(Un)Known bugs

The app …

  • … has been tested on OS X, in Chrome 48 and Firefox 44.

  • … probably won't work on a handheld device, support is coming up.

  • … might have some graphical memory leak issues. The fix is coming up. Reports of performance issues are welcome.

###History

The original domemod started as a processing application while i was studying at the Potsdam University of Sciences and it was much less usable (but in a way cooler). Also, it actually failed at mapping the pixels correctly! Shame on me.

Christopher Warnow joined the project to make a simplified cinder version to play videos. That was 2010. Since then, it has been in hybernation. And now it rises from the ashes! However, if you are interested in the old app, check it out at its archive project page.