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

Steg 6: Three.js: partikelsystem

WebGL och ThreeJS i förlängningen, är bra på att Visa stor och detaljerad maskor i 3-space. Det är vad många 3D modeller består av, och även när modellerna är andra saker ("fasta" eller "NURBs") de återges så småningom till skärmen genom att först förvandlas till så kallade "render maskor".

"Poäng" är egentligen inte en sak.

Partikelsystem är i grunden ett sätt för att hantera 3-dimensionell mesh geometri där du inte bryr dig om kanterna. Om du glömmer bort kanterna på en maska, gör dem osynliga och då ge någon form av punkt-materiella kvalitet korsningarna, har du en partikel system. Partikelsystem låter dig flytta alla punkter av en maska runt självständigt och kan vara bra för effekter som vanligtvis återges som partiklar. Ja, du kan modellera ett timglas detta sätt som de enskilda partiklarna av sand flöde förbi varandra, men du kan också göra något som moln, snö, Ja, stjärnor, crazy självorganiseringeller en helig röran. Hörn är kraftfulla på andra sätt också. Om du är villig att skriva själv en vertex shader, är det ganska snabbt att få till en fin chrome bollen.

Jag faktiskt använder inte partikelsystem för mycket, men threejs gör det enkelt att tillämpa endast vertex-material på particlesystems. Partikelsystem går hand i hand med partikel system material. Så i stället för cubegeometry + material = kuben (från ovan), kan vi particleSystem + particleSystemMaterial = Object3D och Lägg till att till scenen. Om mer detalj på denna grundläggande versionen rekommenderar jag Aerotwist's tutorial på partiklar. Jag slutade gå ett lite annorlunda sätt: min egen custom-rullade vertex och fragment shaders.

JavaScript är rättfram nog:

var particleGeometry = nya tre. Geometry();

lägga till en massa hörn i geometri
var partikel = nya tre. Vector3 (pX, pY, pZ);
particleGeometry.vertices.push(particle); Upprepa för varje punkt

var materialet = nya tre. ShaderMaterial({
uniformer: uniformer,
attribut: attribut,
vertexShader: document.getElementById ('vertexshader') .textContent,
fragmentShader: document.getElementById ('fragmentshader') .textContent,
blandning: tre. AdditiveBlending,
depthTest: falska,
öppet: sanna
})

var systemet = nya tre. () ParticleSystem
particleGeometry,
material
);

scenen som definieras på andra ställen
Scene.Add(system);

Men "vertexshader" och "fragmentshader" beståndsdelar WebGL koden från en främmande planet:

< script typ = "x-shader/x-vertex" id = "vertexshader" >
attributet float alpha;
attributet float storlek;
attributet vec3 ca;
varierande vec3 vColor;
varierande float vAlpha;

void main () {
vColor = ca;
vAlpha = alpha;
vec4 mvPosition = modelViewMatrix * vec4 (position, 1.0);

gl_PointSize = storlek * (1.0 + 300,0 / längd (mvPosition.xyz));
gl_Position = projectionMatrix * mvPosition;
}
< / script >

< script typ = "x-shader/x-fragment" id = "fragmentshader" >
enhetliga vec3 färg;
enhetliga sampler2D textur;
varierande vec3 vColor;
varierande float vAlpha;

void main () {
gl_FragColor = vec4 (vColor, vAlpha);
gl_FragColor = vAlpha * texture2D (textur, gl_PointCoord);
}
< / script >

Skriver här shader koden var smärtsamt för mig, eftersom jag inte vet WebGL och fortfarande inte. Vad jag lärde mig längs vägen, förutom några detaljer som inte är bra att dela, var ett intressant faktum. Jag visste varför en GPU var användbart. Visst, det är bra att ha en andra processor. Men varför inte två CPU? Bara för att en GPU är billigare?

Skillnaden är parallell bearbetning. För en CPU arkitektur att måla varje bildpunkt på skärmen, har den i princip att följa koden som gör varje pixel i sekvens:

för (varje rad) {
för (varje kolumn) {
göra något till pixel på (rad, kolumn);
}
}

GPU koden ser annorlunda ut eftersom GPU: s bearbeta pixlar parallellt, inte sekvens. Du använder en effekt på hela skärmen på en gång, och lagereffekter på varandra. Här kan du göra några riktigt spännande saker med mycket lite kod. Se postprocessing senare för en smak.