Instructables universum i Three.js (7 / 13 steg)

Steg 7: Three.js: partikelsystem i rörelse

Stjärnorna kan animeras på flera olika sätt:

- Varje hörn kan vara flyttade varje bildruta. Detta erbjuder enorma flexibilitet (någon punkt någonstans någon gång), och är hur de flesta av fyrverkerierna / fontän / snö partikel-webgl exempel fungerar. Men med stort antal poäng, prestanda blir ett bekymmer eftersom JavaScript måste slinga över varje partikel, varje bildruta. Om du har 20.000 poäng med 3 dimensioner ändra varje bildruta och du vill behålla en silkeslen slät 60fps bildhastighet, är som 3,6 miljoner beräkningar per sekund. Det är troligt att glida lite.
-Använda vertex shaders för att ersätta formhörn direkt i webgl. Detta är förmodligen den bästa lösningen för prestanda (JavaScript gör ingenting varje bildruta, och alla animeringen är direkt i webgl). Du göra beräkningarna av förskjutning och buller direkt på GPU, lämnar CPU helt gratis för andra uppgifter, till exempel användarinteraktion. Här är en utmärkt demo och handledning för detta slags knep. Du bör kolla in tornado också, som också använder en liknande strategi. Dock göra sval sett, detta gör det svårt att hantera saker som en användare trycka eller klicka på en stjärna. Vad beträffar JavaScript, är hörnen fasta. Mappning av webgl platsen tillbaka till ett JavaScript-objekt var antingen mig eller inte praktiskt möjligt. Jag behövde för att kunna leta upp stjärnor i rymden baserat på användarinteraktion, så detta alternativ var ute.
- Grupp punkter till objekt, och animera varje objekt självständigt. Detta till slut blev min lösning. De sex ringarna för Instructables' sex översta nivån kategorier är sex oberoende partikelsystem i ThreeJS. För att skapa en illusion av att galaxen är ständigt i rörelse, snurra jag varje av particleSystems vid olika hastigheter, i olika riktningar, och runt olika mittpunkter. Detta kräver JavaScript för att beräkna en ny rotation för sex objekt varje ram, men den stora majoriteten av arbetet sker på GPU som mappar varje hörn till en punkt på skärmen. Eftersom JavaScript referens bibehålls till varje punkt, är det möjligt att räkna ut vilken punkt en användare knacka när de knackar på skärmen.

Varje bildruta, detta händer:

animation loop
funktionen update() {
Obs: three.js omfattar requestAnimationFrame shim
requestAnimationFrame(update);

Flytta runt saker som behöver vara:
om (interactionHandler.frozen === falska) {
particleSystemsArray [0].rotation.z-= 0.00008;
particleSystemsArray [1].rotation.z += 0.00002;
particleSystemsArray [2].rotation.z += 0.00012;
particleSystemsArray [3].rotation.z-= 0.00009;
particleSystemsArray [4].rotation.z += 0.00016;
particleSystemsArray [5].rotation.z-= 0,00005;
Sky.rotation.z += 0.00015; rotera bilden också!
}

De små Taggar som reser med stjärnor behöver har uppdaterat positioner
interactionHandler.getTagManager().updateActiveTagPositions();

Rita. Jag ska förklara denna koden senare, men du kan tänka på det
för nu som renderer.render()
_.each(Galaxy.Composers,function(Composer) {
Composer.Render();
});
}