OpenGL intialisatie
OpenGL intialisatie.
Alles is geoptimaliseerd voor het renderen van visualisaties die niet vaak veranderen. Pannen en zoomen telt hierbij niet aangezien dat alleen van toepassing is op de modelview matrix. Tenzij er hierdoor meer content bij komt die voorheen niet gerenderd hoefde te worden.
De implementatie is als volgt:
- De OpenGL viewport is 1600 pixels bij 900 pixels (16:9).
- De OpenGL viewport word in het midden van het canvas gecentreerd en zo groot mogelijk gemaakt. Dit betekend dat de randen van de viewport niet altijd zichtbaar zijn. Dus alhoewel de viewport zelf 1600x900 is, is de effectieve viewport de grootte van het canvas. Dit heeft voor onze use case echter ook een aantal voordelen.
- Dit betekend namelijk dat de visualisatie altijd word geschaald om op het canvas te passen. Hierdoor ziet de visualisatie er altijd hetzelfde uit ongeacht de monitor resolutie / browser grootte.
- Het tweede voordeel is dat het coördinaten systeem tijdens het visualiseren vast staan. Dus dingen hoeven niet geschaald te worden tijdens het visualiseren. En er kan worden aangenomen dat maximaal 1600x900 zichtbaar is en dat dus content buiten dit rechthoek niet gevisualiseerd hoeft te worden. Ook niet als de user de browser resized.
- Het enige moment waarop de visualisatie opnieuw berekent hoef te worden is als er door pannen/zoomen naar nieuwe content word genavigeerd die voorheen niet zichtbaar was. Afhankelijk van de visualisatie zou hier eventueel echter ook een incrementeel proces gebruikt kunnen worden.
- Het coordinaten system is gecentreerd met 0,0 in het midden van de OpenGL viewport. Dit betekend dat als er niet gepand/gezoomed is het zichtbare deel van de visualisatie van -800 tot 800 x en van -450 tot 450 y loopt.
- De rede dat de viewport 1600x900 is, is omdat standaard de OpenGL viewport voor zowel x als y van -1 tot 1 loopt. Dus afhankelijk van de resolutie van het canvas is een quad van 0.1 bij 0.1 niet altijd vierkant. Door zelf een assen stelsel te definiëren is dit wel zo.
De performance van het renderen is op zich best goed:
De test is uitgevoerd met n
quads en met Firefox Quantum 59.0.2 64-bits. Voor elke test is Firefox eerst opnieuw opgestart. De nummers voor RAM zijn RAM gebruik na het laden van de visualisatie
- idle RAM gebruik
.
n=3, ram=141MB
n=1000, ram=158MB
n=10000, ram=309MB
n=100000, ram=1883MB
n=1000000, ram=17415MB
De webpagina zelf ziet er nu zo uit: 1000000 quads: 13 quads:
fixes #6 (closed) Quads zijn ook geïmplementeerd, maar dit zijn axis aligned quads en we hebben nog iets meer nodig als alleen dat.
Ik heb het idee dat er een aantal dingen zijn die ik ben vergeten om te melden, dus als er vragen zijn hoor ik het wel. In de code staan ook redelijk wat comments.