Stap 7: Three.js: Particle systemen in beweging
De sterren kon worden geanimeerd op verschillende manieren:
- Elk hoekpunt zou elk frame verplaatst. Dit biedt enorme flexibiliteit (om het even welk punt overal elk moment), en is hoe de meeste van het vuurwerk / fontein / Sneeuwwitje deeltje-webgl voorbeelden werken. Maar met een groot aantal punten, prestaties wordt een bron van zorg omdat de JavaScript moet lus over elk deeltje, elk frame. Als u hebt 20.000 punten met 3 dimensies wijzigen van elk frame en u wilt een zijdeachtige vlotte 60fps framesnelheid te behouden, is dat 3,6 miljoen berekeningen per seconde. Het is waarschijnlijk een beetje glijden.
-Verticale shaders kunt verplaatsen van de hoekpunten rechtstreeks in webgl. Dit is waarschijnlijk de beste oplossing voor prestaties (de JavaScript niet elk frame, en alle van de animatie is direct in webgl). Jij de verplaatsing en lawaai berekeningen direct op de GPU, waardoor de CPU volledig vrij voor andere taken, zoals de interactie van de gebruiker. Hier is een uitstekende demo en de tutorial voor dit soort truc. U moet uitchecken de tornado ook, die maakt ook gebruik van een verwante strategie. Hoewel cool op zoek, dit maakt het moeilijk om zaken zoals een gebruiker te tikken of te klikken op een ster aan te pakken. Wat betreft de JavaScript, worden de hoekpunten opgelost. Kaart brengen van de locatie webgl terug naar een JavaScript-object was ofwel onbegrijpelijk of praktisch niet mogelijk. Ik nodig had om te kunnen lokaliseren van de sterren in de ruimte op basis van de interactie van de gebruiker, zodat deze optie was.
- De punten in objecten te groeperen, en elk object onafhankelijk animeren. Dit trachten opwaarts zijnde mijn oplossing. De zes ringen voor Instructables zes op het hoogste niveau categorieën zijn zes onafhankelijke particle systemen in ThreeJS. Als u wilt maken een illusie dat het sterrenstelsel voortdurend in beweging is, draai ik elk van de particleSystems op verschillende snelheden, in verschillende richtingen, en rond verschillende middelpunten. Dit vereist JavaScript voor het berekenen van een nieuwe rotatie voor zes objecten elk frame, maar het merendeel van het werk wordt gedaan op de GPU waarmee elk hoekpunt aan een punt op het scherm. Aangezien een verwijzing JavaScript wordt gehandhaafd om elk punt, is het mogelijk om erachter te komen welk punt een gebruiker is wanneer ze het scherm onttrekt onttrekken.
Elk frame, dit gebeurt:
<script type="x-shader/x-vertex" id="vertexshader"> attribute float alpha; attribute float size; attribute vec3 ca; varying vec3 vColor; varying float vAlpha; void main() { vColor = ca; vAlpha = alpha; vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 ); gl_PointSize = size * (1.0+ 300.0 / length( mvPosition.xyz ) ); gl_Position = projectionMatrix * mvPosition; } </script> <script type="x-shader/x-fragment" id="fragmentshader"> uniform vec3 color; uniform sampler2D texture; varying vec3 vColor; varying float vAlpha; void main() { gl_FragColor = vec4( vColor, vAlpha ); gl_FragColor = vAlpha * texture2D( texture, gl_PointCoord ); } </script>
