Logo Header
Life+ for WebPanOpticAverFaceLiPaSonaria
AboutTurn-720HistoryRumpelkammerDownload

PanOptic

♦ JavaScript snippet to view equirectangular panoramas in 3D freelook mode with hue cycling (without WebGL) ♦
♦ JavaScript-сниппет для кругового 3D-просмотра сферических панорам с прокруткой оттенков (без WebGL) ♦
♦ JavaScript-сніппет для кругового 3D-перегляду сферичних панорам з прокруткою відтінків (без WebGL) ♦



Inventing a wheel

Obviously, this kind of thing should be named «Yet Another ...». There are Html5pano from Martin Wengenmayer, Marzipano, Pannellum from Matthew Petroff, Panolens.js from Ray Chen, Threejs, ... This one introduces anything sensational; it has no external dependencies and doesn't require WebGL, using precalculated tables along with Web Worker-based parallelizing to accelerate things a bit.

The «hue cycling» («color»'s less precise) is mostly adorning; this feature works for non-natural environments like the fractal ones seen above, where it adds «movement», emphasizing depth and parts of the structures. With «natural» panoramas, like the Google Street ones, hue cycling becomes encumbering and distracting.

Usage

Get the snippet and few testing panorama images from Download page. Add your own images (remember that width:height ratio must be 2:1). Put all panoramas somewhere. If «somewhere» is on the other domain, make sure that domain is CORS-enabled. Hint for DropBox users: change "www.dropbox.com" to "dl.dropboxusercontent.com" in share-link.

Put two .js files — "panoptic-x.y.z.js" and "panoptic-worker-x.y.z.js" — to some dir of your site. Open the former in editor. There are few parameters at the beginning you should set:

Change the Panoptic.panoramaDirPath parameter accordingly (it may begin with "http[s]://"). The dir-path must be relative to the .html file representing the web page where you want the snippet to work, excluding trailing slash "/". The Panoptic.panoramaFileNames specifies set of images to choose randomly from, when the page is opened.

Similarly, Panoptic.workerScriptDirPath points to dir with the worker counterpart of the script and is relative to the same .html. Change default number of workers, Panoptic.defaultNumWorkers, if you like; basically, this should be the number of CPU cores. If the browser can get this number (most modern ones can), so can do the script, replacing the default.

Panoptic.byXHRequest, if set to true, makes the snippet to load panorama using XMLHttpRequest. This is probably required if you put them on the other domain, but works for the same-domain case too, and allows to display progress bar while loading.

Customize other parameters to your needs (see below).

Insert the script into .html with the following line of code:


<script src="path-to-dir-with-snippet/panoptic-x.y.z.js" type="text/javascript"></script>


(Please do not get the script from this page, this instance has been «tuned» specifically for this page)

Controls

Hold the button and move the mouse to roll the «eye» horizontally and vertically. Double-click stops/starts hue cycling. Press D key anywhere on the page to display rather simple «debug» info.

Customization

Edit the initial values of parameters in the beginning of the .js file to adjust viewscreen dimensions, field of view, set of panoramas, initial view angles, framerate, mouse sensitivity etc. Surely, there's more than primary parameters; modify the code as you wish.

Mandelbulber

This snippet uses images rendered with Mandelbulber, the visualizer of 3D fractals:

mandelbulber.com

sourceforge.net/projects/mandelbulber/

github.com/buddhi1980/mandelbulber2

Copyright © 2014–2018 Sunkware
Style:  NightWinterSea
This site gathers statistics with StatCounter