Table of Contents
PanGL
Zielsetzung
performanter, WebGL-basierter Panoramaviewer für kubische 180/360° Panoramen mit unterschiedlichen Qualitäts/Zoomstufen sowie intelligentem nachladen selbiger. Objektorientierter Ansatz zur Strukturierung (d.h. es gibt ein Objekt “texturierte 2D fläche”, …)
ToDo
- laden Würfel/Kacheln in verschiedenen Qualitätsstufen, on-the-fly Texturen laden (v0.1)
done - onresize-Handler nahezu done (aspect ratio wird nicht resettet)
- Mausnavigation im Firefox fixen (Mausrad!) (v0.11) done
- ermitteln welcher Bildausschnitt gerade gezeigt wird
(xyz/rgb colorcube), nur entsprechende Kacheln nachladen wenn bspw 1 Texturpixel größer als 1 Bildschirmpixel ist, eine Textur also vergrößert/pixelig wäre: intelligentes Nachladen der Kacheln
in progress - Hotspots basierend auf radialem Koordinatensystem (auf Kugeloberfläche)
- Pfad muss zum Zeichnen in Polygone/Fläche umgewandelt werden
(delaunay?)–> ear clipping prototyp funktioniert zufriedenstellend - einbauen (als objekt/klasse)
- hotspots mit links/tooltips versehen (auch mittels colorpicking, am besten eigenen algo hierfür [im vergl. zu nachlade-colorcube, 16777216 möglichkeiten vorhanden, nur 393216 genutzt, sind 2,3%, ein renderpass für beides reicht also/kein clear])
- externes Konfigurationsfile/parser
- Soundscape (richtungsabhängiges Hintergrundgedudel) done, eigene js-Klasse (html5 audio-basiert; firefox opera chrome funktionieren)
- fx
- ein/ausblend-effekte (von/zu farbe) nach dem laden/beim überblenden
- Lensflare done, auch nette Gegenlichteffekte möglich
- Regen/Schnee/Partikeleffekte
- mobile firefox: https://developer.mozilla.org/en/DOM/Touch_events webgl tut schon
OOP Struktur
- flatsquare [Texturierte 2d-Fläche]
- init(textur_url)
- render()
- setoffset(ofsx,ofsy,ofsz) ← funktionalität ggf. in init verschieben
- setscale(sclx,scly,sclz) ← funktionalität ggf. in init verschieben
- square [2d-Array von flatsquares]
- init(textur_url(mit wildcards) ,breite(px),höhe(px),kachelbreite/höhe)
- render()
- cube [würfel, beinhaltet 6 squares]
- init(level of detail) ← überarbeiten! / nachlade-logik intigrieren
- trigger_texload(xmin,xmax,ymin,ymax) ← neu einfügen für colorcube-basiertes nachladen?
- render()
- colorcube [für colorpicker würfel aus 6 flächen, wobei die farbe der Flächen für r,g,b jeweils proportional zur raumposition (x,y,z) ist.]
- init()
- render()
- hotspot [gefülltes polygon] ← noch nicht implementiert
- init(polygon-pfad, render-einstellungen(farbe,transparenz,rand,dicke,…),link)
- render(colorpick?)
- uIDMan
- init()
- register(callback)
- event(uID,type) ← vom colorpick; type=mouse move, click etc.
init() beinhaltet jeweils das generieren der Meshs, laden der Shader etc. render() beinhaltet die Zeichenkommandos und ggf. nötige Vorarbeit
später noch szenen-manager etc. notwenig, welcher dann auch das configfile parsed etc… noch fliegen die Objekte lose umher
colorpick
colorcube
Farbwürfel nutzt Farben [0,0-255,0-255], [255,0-255,0-255], [0-255,0,0-255], [0-255,255,0-255], [0-255,0-255,0], [0-255,0-255,255] für Cursorpositionsermittlung über Würfel bzw. welchen Bereich des Würfels die Kamera abdeckt / sieht
Extrem langsamer als Projezieren und gucken obs sichtbar ist… daher das verwendet.
unique IDs
es bleiben die IDs nach folgender Vorschrift übrig:
[1-254,1-254,1-254];
uID = (farbe[0]-1) + (farbe[1]-1)*255 + (farbe[2]-1)*255*255
farbe = [r,g,b]
→ uID-Handler/Verwaltungs-Klasse notwendig, welche Callbacks zu den IDs verwaltet und bei entsprechenden Events zurückruft (somit kein pollen aller objekte notwendig)
Ideen
- Panning, tilting and zooming. Full navigation using either mouse
or keyboard. - check
- Link any document to any point in the image using hotspots. - check (nearly done)
- Complete VR-Tours in Browsers and Appletviewer. → config file / links
- Scriptable via html/javascript → theoretisch… interface muss definiert werden
- Tiny file size - check
- high performance … momentan völlig Banane
