Stap 8: Three.js: een andere helderheid voor elke ster: WebGL Shaders
Sterren zijn niet uniform. Ze zijn verschillende kleuren, verschillende maten en verschillende helderheden. Mijn truc met het hebben van zes voorwerpen uit voordat leek niet om hier van toepassing: ik wilde echt elke ster uniek te zijn, en om na te denken van het relatieve belang van het project. Kortom, de projecten die de "helderste sterren" moeten schijnen. Elk hoekpunt uniek maken is een perfect gebruiken voor WebGL shaders. Herinner me de code van de arcering uit voor:
Galaxy.Utilities.projectData = parsedData; Galaxy.Datasource = parsedData; var instructableIds = _.keys(parsedData); // create geometries for each of the six rings, so the particle systems can move independently var particleGeometries = []; _.each(window.Galaxy.Settings.categories,function(){ particleGeometries.push(new THREE.Geometry()); attributes = { size: { type: 'f', value: [] }, ca: { type: 'c', value: [] }, alpha: { type: 'f', value: [] } }; uniforms = { color: { type: "c", value: new THREE.Color( 0xffffff ) }, texture: { type: "t", value: THREE.ImageUtils.loadTexture("images/particle4B.png")} }; shaderMaterialsArray.push(new THREE.ShaderMaterial( { uniforms: uniforms, attributes: attributes, vertexShader: document.getElementById( 'vertexshader' ).textContent, fragmentShader: document.getElementById( 'fragmentshader' ).textContent, blending: THREE.AdditiveBlending, depthTest: false, transparent: true })); }); _.each(instructableIds,function(id){ var pX = parsedData[id].x - window.Galaxy.Settings.width/2, pY = parsedData[id].y - window.Galaxy.Settings.height/2, pZ = Galaxy.Utilities.random(0,10), particle = new THREE.Vector3(pX, pY, pZ); // add each particle to the correct geometry (ring) so it will end up in an associated particle system later var ring = indexForCategory(parsedData[id].category); if (ring !== -1) { particleGeometries[ring].vertices.push(particle); var appearance = Galaxy.Utilities.vertexAppearanceByViews(parsedData[id].views); shaderMaterialsArray[ring].attributes.size.value.push(appearance.size); shaderMaterialsArray[ring].attributes.ca.value.push(appearance.ca); shaderMaterialsArray[ring].attributes.alpha.value.push(appearance.alpha); // we need to keep references both directions. User clicks particle, we need to look up details by id // Also, if we want to highlight related instructables, we'll need fast easy access to vertices with referenced ids. particle.instructableId = id; parsedData[id].particleMaterial = shaderMaterialsArray[ring]; parsedData[id].vertexNumber = particleGeometries[ring].vertices.length-1; } }); // main scene, for all regular galaxy appearances var scene = new THREE.Scene(); Galaxy.Scene = scene; // create the particle system _.each(particleGeometries,function(particleGeometry, index){ particleGeometry.applyMatrix( new THREE.Matrix4().makeTranslation( Math.random()*50, Math.random()*50, 0 ) ); var system = new THREE.ParticleSystem( particleGeometry, shaderMaterialsArray[index] ); particleSystemsArray.push(system); scene.add(system); }); Deze arceringen werken hand in hand met deze ThreeJS-code:
Galaxy.Utilities.projectData = parsedData; Galaxy.Datasource = parsedData; var instructableIds = _.keys(parsedData); geometrieën maken voor elk van de zes ringen, zodat de particle systemen kunnen gaan zelfstandig var particleGeometries = []; _.each (venster. Galaxy.Settings.categories,function() {particleGeometries.push (nieuwe drie. Geometry()); kenmerken = {grootte: {type: 'f', waarde: []}, ca: {type: 'c', waarde: []}, alpha: {type: 'f', waarde: []}}; uniformen = {kleur: {type: "c", waarde: nieuwe drie. Kleur (0xffffff)}, textuur: {type: "t", waarde: drie. ImageUtils.loadTexture("images/particle4B.png")}}; shaderMaterialsArray.push (nieuwe drie. ShaderMaterial ({uniformen: uniformen, kenmerken: kenmerken, vertexShader: document.getElementById ('vertexshader') .textContent, fragmentShader: document.getElementById ('fragmentshader') .textContent, mengen: drie. AdditiveBlending, depthTest: valse, transparante: true})); }); _.each(instructableIds,function(id) {var pX = parsedData [id] .x - venster. Galaxy.Settings.width/2, pY = parsedData [id] .y - venster. Galaxy.Settings.height/2, pZ = Galaxy.Utilities.random(0,10), particle = nieuwe drie. Vector3 (pX, pY, pZ); toevoegen van elk deeltje aan de juiste geometrie (ring) dus het zal eindigen in een bijbehorende particle systeem later var ring = indexForCategory(parsedData[id].category); Als (ring! == -1) {particleGeometries[ring].vertices.push(particle); vertexAppearanceByViews : function(viewcount){ var prominence = (Math.pow(Math.log(viewcount),3))/(1000); return { size: prominence*9, ca: Galaxy.Utilities.whiteColor, alpha: Math.min(0.15 + 0.3*prominence,0.9) } } We moeten zorgen dat verwijzingen blijven beide richtingen. Gebruiker deeltje, moeten we opzoeken details met id / / ook, als we Markeer verwante instructables willen, moeten we snel gemakkelijk toegang tot de hoekpunten met waarnaar wordt verwezen-id. particle.instructableId = id; .particleMaterial parsedData [id] = shaderMaterialsArray [ring]; parsedData [id] .vertexNumber particleGeometries [ring].vertices.length =-1; } }); belangrijkste scène, voor alle optredens van de reguliere galaxy var particle = new THREE.Vector3(pX, pY, pZ); ... particleGeometries[ring].vertices.push(particle); Hier is wat er gebeurt in plain Engels:1. mij troep opwaarts een drie. ShaderMaterial voor elke drie. ParticleSystem. Terughalen uit de vorige stap zijn er zes ParticleSystems, één voor elke categorie van Instructables, en dat elke ParticleSystem moet twee dingen te worden geïnstantieerd: een geometrie en een materiaal. (Zie ThreeJS: aan de slag hierboven)
2. elke drie. ShaderMaterial is in wezen hetzelfde op dit punt: ze zijn ingesteld op gebruik van het fragment en vertex shaders geladen in het bovenstaande script-tags. Ze omvatten uniformen en attributen doorgegeven van de JavaScript. Dit zijn twee van de drie typen variabelen die kunt u naar WebGL. Zo goed uitgelegd op html5rocks.com:
-Uniformen wijzigen niet binnen een bepaald frame. Ze worden verzonden naar zowel fragment en vertex shaders. In dit geval, geldt de kleur en de textuur afbeelding (de mooi gloeiende ster-achtig beeld) voor elke ster.
-Kenmerken van toepassing op afzonderlijke hoekpunten. Ze worden verzonden naar Vertexshaders alleen. In dit geval zijn de kenmerken die door star variëren kunnen kleur, grootte, en alpha.
-Varyings kunnen de Vertexshaders geschiedde waarden in de arcering fragment.
3. met de lege drie. ShaderMaterials gedefinieerd, mijn volgende stappen van het blok over elke Instructable die wordt weergegeven op het scherm. Het geeft de Instructable aan een helper functie die hoe de ster worden weergegeven bepaalt, gebaseerd op het aantal weergaven voor dat Instructable:
var appearance = Galaxy.Utilities.vertexAppearanceByViews(parsedData[id].views); shaderMaterialsArray[ring].attributes.size.value.push(appearance.size); shaderMaterialsArray[ring].attributes.ca.value.push(appearance.ca); shaderMaterialsArray[ring].attributes.alpha.value.push(appearance.alpha);
In de definitieve versie van het Wetboek variëren niet ik eigenlijk de kleur van de sterren! Alpha doet dat voor mij, want elke ster op de top van een gekleurde achtergrond staat.
4. binnen deze lus, wordt elk deeltje geduwd in een array van de hoekpunten in de meetkunde:
// for each item in the particleGeometries array: var system = new THREE.ParticleSystem( particleGeometry, shaderMaterialsArray[index] ); ... scene.add(system);
en een bijbehorende verzameling "kenmerken" waarden wordt geduwd in de overeenkomstige ShaderMaterial:
... } else if (object instanceof THREE.ParticleSystem) { //See: <a href="https://github.com/mrdoob/three.js/issues/3492"> <a href="https://github.com/mrdoob/three.js/issues/3492"> https://github.com/mrdoob/three.js/issues/3492 </a> </a> var vertices = object.geometry.vertices; var point, distance, intersect, threshold = 3; var localMatrix = new THREE.Matrix4(); var localtempRay = raycaster.ray.clone(); var localOrigin = localtempRay.origin; var localDirection = localtempRay.direction; localMatrix.getInverse(object.matrixWorld); localOrigin.applyMatrix4(localMatrix); localDirection.transformDirection(localMatrix); for ( var i = 0; i < vertices.length; i ++ ) { point = vertices[ i ]; distance = localtempRay.distanceToPoint(point); if ( distance > threshold ) { continue; } intersect = { distance: distance, point: point, face: null, object: object, vertex: i }; intersects.push(intersect); } } else if ... Tot slot, met een array van deeltje geometrieën en bijbehorende matrix van deeltje materialen, de twee worden samengevoegd in één array van ParticleSystems, en elke ParticleSystem is toegevoegd aan de scène:
-Get (x,y) of user's click -Turn this into a THREE.Vector3() -un-project the vector based on the camera position -Set up a raycaster with the camera position and unprojected vector -run ray.intersectObjects() -do something with the results
