Instructables Universe in Three.js (6 / 13 stap)

Stap 6: Three.js: Particle systemen

WebGL en ThreeJS in het verlengde daarvan, zijn groot bij het weergeven van grote en gedetailleerde mazen in 3-ruimte. Dat is wat veel 3D-modellen bestaan uit, en zelfs wanneer modellen zijn nog andere dingen ("stoffen" of "NURBs") ze uiteindelijk aan het uw computerscherm worden weergegeven door eerst worden omgezet in zogenaamde "render mazen".

"Points" niet echt een ding.

Particle systemen zijn in principe een manier voor het beheren van 3-dimensionale mesh geometrie waar u geen zorg over de randen. Als u over de randen van een mesh vergeet, hen onzichtbaar maken en dan een soort van punt-achtige materiaalkwaliteit geven door de snijpunten, hebt u een particle systeem. Particle systemen kunnen u alle punten van een Kabelhoes om afzonderlijk verplaatsen, en kunnen grote voor effecten die meestal als deeltjes weergegeven worden. Ja, u kan een model van een zandloper op deze manier als de individuele deeltjes van zand stroom langs elkaar, maar je kunt ook iets doen zoals wolken, sneeuw, Ja, sterren, gek zelf-organisatieof een Heilige puinhoop. Hoekpunten zijn ook krachtig in andere opzichten. Als u bereid bent om zelf een vertex shader schrijven, is het vrij snel om naar een mooie chroom bal.

Ik eigenlijk niet gebruik particle systemen voor een groot deel, maar threejs maakt het gemakkelijk toe te passen alleen-hoekpunt materialen op particlesystems. Particle systemen gaan hand in hand met particle systeem materialen. Dus in plaats van cubegeometry + materiaal = kubus (van boven), kunnen we zeggen particleSystem + particleSystemMaterial = Object3D, en dat aan de scène toevoegen. Voor meer informatie over deze basisversie adviseer ik de Aerotwist leerprogramma op deeltjes. Uiteindelijk heb ik een iets andere manier gaan: mijn eigen aangepaste gewalste vertex- en fragment shaders.

De JavaScript is ongecompliceerd genoeg:

 <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> 

Maar de elementen van het "vertexshader" en "fragmentshader" vermeld zijn WebGL-code uit een buitenaardse planeet:

 for (each row) { for (each column) { do something to pixel at (row, column); } } 

Schrijven van deze code arcering was pijnlijk voor mij, omdat ik niet WebGL weet en nog steeds niet. Wat ik heb geleerd langs de weg, naast enkele kleinigheden die niet nuttig zijn om te delen, was een interessant feit. Ik heb nooit geweten waarom een GPU was nuttig. Tuurlijk, het is goed om te beschikken over een tweede processor. Maar waarom niet twee CPU's? Gewoon omdat een GPU goedkoper is?

Het verschil is parallelle verwerking. Voor een CPU's architectuur te schilderen van elke pixel op het scherm, in feite heeft code die elke pixel in de juiste volgorde doet te hanteren:

 // animation loop function update() { // note: three.js includes requestAnimationFrame shim requestAnimationFrame(update); // Move things around as need be: if (interactionHandler.frozen === false) { 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; // rotate the background image too! } // The little tags that travel with stars need to have updated positions interactionHandler.getTagManager().updateActiveTagPositions(); // draw. I'll explain this code later, but you can think of it // for now as renderer.render() _.each(Galaxy.Composers,function(composer){ composer.render(); }); } 

De GPU-code ziet er anders uit omdat GPU's pixels in parallel, niet in volgorde verwerken. U toepassen een effect op het hele scherm in een keer, en laag-effecten op elkaar. Dit kunt u doen wat echt spannend materiaal met zeer weinig code. Zie postprocessing later voor een voorproefje.

Gerelateerde Artikelen

The Instructables University Game

The Instructables University Game

Ik had niet gepland op het invoeren van de "How to play wedstrijd" want ik niet echt een gameconsole ben. Na het nadenken, kwam ik met The Instructables Universiteit Game. Ik heb geprobeerd om mijn volwassen zoon aan bij de pret hier, maar zijn
Verleden projecten/Pre Instructables...

Verleden projecten/Pre Instructables...

I wish I would have found Instructables two or three years ago. Ik kon een deurklink van een veel meer hebben bijgedragen. Met mijn recente verplaatsen onvermijdelijk dat heb ik besloten om enkele foto's van eerdere projecten in mijn huidige huis ver
Jus te gaan met een gebraden

Jus te gaan met een gebraden

hoewel dit dom eenvoudig is, ik ben voortdurend verbaasd over het aantal mensen die geïntimideerd, zijn wanneer het gaat om het maken van een simpele jus te gaan met een gebraden. Deze jus werkt ruim aardappelen, besprenkeld over het vlees of de volg
Gedetailleerde geweven Duct Tape portefeuilles Instructable

Gedetailleerde geweven Duct Tape portefeuilles Instructable

Ja, ja, het is een ander Duct Tape wallet instructable.Hoe saai, juiste?De reden dat ik dit doe is dat ik proberen zal te doen samenballen van kennis over het bouwen van allerlei soorten Duct Tape portefeuilles en ingaan op veel aspecten zodat u zal
Steven Universe jurk

Steven Universe jurk

Een goede vriend van mij houdt Steven Universe, dus ik haar deze jurk als een gift van de verjaardag maakte. Ik denk dat dit is een echt mooie jurk, en zou een geweldig cosplay of Halloween kostuum!Ik maakte haar ook een volledige set van kat vinger
TestrBot: De $300 Universal testmachine

TestrBot: De $300 Universal testmachine

UPDATE 9-2-15: ik vrijgegeven een batch van testresultaten die aantonen dat mijn beweegredenen voor terwijl "infill"-ontwerp is de beste!* Wat is TestrBot?TestrBot is een $300 Universal Test Machine (UTM) en kan worden gebruikt voor het uitvoere
Steven Universe lumi inkodye ondergoed met crystal gem Garnet

Steven Universe lumi inkodye ondergoed met crystal gem Garnet

Een van de dingen die mijn geld kan niet kopen is prima super held/favoriet karakter ondergoed (of elke merch echt) voor dames. Elke vorm van boksers schijnt beschikbaar te zijn, en soms heb ik geprobeerd kopen sommige "jongens" grootte ondergoe
SUMO&nbsp;:&nbsp;&nbsp;Slimme&nbsp;/*&nbsp;*&nbsp;Smart&nbsp;Pulse&nbsp;Monitor&nbsp;*&nbsp;Author&nbsp;:&nbsp;Geeve&nbsp;George&nbsp;*&nbsp;Instructables&nbsp;:&nbsp;*/&nbsp;#include&nbsp;const&nbsp;int&nbsp;analo

SUMO&nbsp;:&nbsp;<youtube&nbsp;id="lDKM7UKUL5A"></youtube>&nbsp;Slimme&nbsp;/*&nbsp;*&nbsp;Smart&nbsp;Pulse&nbsp;Monitor&nbsp;*&nbsp;Author&nbsp;:&nbsp;Geeve&nbsp;George&nbsp;*&nbsp;Instructables&nbsp;:&nbsp;*/&nbsp;#include&nbsp;const&nbsp;int&nbsp;analo

src = "HalloIedereen,Ik benGeeveGeorgeeen15jaaroudeMaker/elektronicaHobbyist.IliefdeComputerVisie,AndroïdeOntwikkelingenAlgoritmeDesign.Iamop dit momentin11eRangComputerWetenschapStudentbijWeinigRockIndischeSchool.:)Zoekenmeerovermebij:href = "h
DIY zelf geactiveerd PRIVATE UNIVERSE

DIY zelf geactiveerd PRIVATE UNIVERSE

dit is mijn allereerste ooit Instructables uploaden dus, wees voorzichtig met mij.Ik maakte dit voor een kleine galerie ruimte in een ARI genoemd Constance in Hobart, Tasmanië, Australië, en is speciaal ontworpen om te worden geactiveerd wanneer mens
Knex verstek zagen instructies

Knex verstek zagen instructies

het is teruggekeerd! Ja, na 3 jaar, heb ik eindelijk besloten om te posten van instructies van mijn verstek zaag. Deze zaag is net als de oude is, behalve een paar kleine kleurwijzigingen te geven een meer consistent kleurenschema. Voor degenen onder
Pimp mijn PSP hoofdstuk 1 uw one-stop Instructable voor al uw PSP behoeften!

Pimp mijn PSP hoofdstuk 1 uw one-stop Instructable voor al uw PSP behoeften!

Dit instructable leert u sommige unieke dingen die uw PSP in een Multi-Media beest transformeren zal.Dit instructable zal u tonen hoe te:1. update uw PSP (officiële Firmware, niet Custom Firmware)2. video's toevoegen aan uw PSP (hoofdstuk 2)3. foto's
Met de Switch()-instructie als Sequencing Control

Met de Switch()-instructie als Sequencing Control

In dit Instructable, zal wij gaan over de "switch()"-instructie en het gebruik in de programmering. De instructie switch is een krachtig hulpmiddel voor het organiseren van uw programma, gemakkelijk kunt u complexe stroomdiagrammen doorlopen.In
Overleven in het wild-het meest unieke instructable tot nu toe

Overleven in het wild-het meest unieke instructable tot nu toe

u hebben net wakker om jezelf te vinden op de grond in het wild.  Vóór het opstaan vanuit je liggende positie realiseert je je dat, naast het feit dat niet in uw eigen warme comfortabele bed, u hebben gewekt in het kreupelhout onder het bladerdak van
Stalen Python Knex achtbaan - instructies

Stalen Python Knex achtbaan - instructies

is terug iedereen-staal Python!Dit model is de recreatie van mijn oudere ontwerp, met een paar kleine wijzigingen, aangezien ik nooit had specifieke foto's van het origineel. Dit ontwerp heeft natuurlijk zijn gebreken, zodat u wellicht om te knoeien