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

Stap 12: Three.js: post-processing & effecten: dimmen, vervagen

Check this out! (en de tutorial die gaat mee)

Gekke effecten zijn mogelijk met postprocessing in ThreeJS, maar ik nodig iets simpels: dimmen alles behalve het sterrenbeeld ik wilde laten zien. Heldere witte lijnen en punten bovenop een anderszins grijs scène.

Turns out, de 3D-wereld is niet zoals KineticJS. Ik kan niet toevoegen van een laag bovenop en rekenen op de browser het alfakanaal van die laag verduisteren van de spullen achter het renderen. Of liever gezegd ik kon, maar ik zou moeten een hele aparte scène, doek en context, en het is niet helemaal duidelijk wat er gebeurt als je twee webgl vensters boven elkaar. Ik geloof niet dat het is triviaal om een semi-transparante webgl rendering context.

Dus was de volgende beste ding postprocesses toevoegen aan mijn bestaande renderer. Dit is hoe, toen ik sprak over Particle systemen in beweging,

 Galaxy.ComposeScene = function(options){ var composers = []; var mainComposer = new THREE.EffectComposer( renderer, renderTarget ); var renderPass = new THREE.RenderPass( scene, camera ); mainComposer.addPass( renderPass ); if (_.isObject(options) && options.blur === true) { var bluriness = 0.9; // Prepare the blur shader passes var hblur = new THREE.ShaderPass( THREE.HorizontalBlurShader ); hblur.uniforms[ "h" ].value = bluriness / Galaxy.Settings.width; mainComposer.addPass(hblur); var vblur = new THREE.ShaderPass( THREE.VerticalBlurShader ); vblur.uniforms[ "v" ].value = bluriness / Galaxy.Settings.height; mainComposer.addPass( vblur ); var brightnessContrastPass = new THREE.ShaderPass( THREE.BrightnessContrastShader ); brightnessContrastPass.uniforms[ "brightness" ].value = -0.3; brightnessContrastPass.uniforms[ "contrast" ].value = -0.2; mainComposer.addPass(brightnessContrastPass); } else { mainComposer.addPass( new THREE.ShaderPass( THREE.CopyShader ) ); } var topComposer = new THREE.EffectComposer(renderer, renderTarget2); var topRenderPass = new THREE.RenderPass(topScene,camera); topComposer.addPass(topRenderPass); topComposer.addPass( new THREE.ShaderPass( THREE.CopyShader ) ); //////////////////////////////////////////////////////////////////////// // final composer will blend composer2.render() results with the scene //////////////////////////////////////////////////////////////////////// var blendPass = new THREE.ShaderPass( THREE.AdditiveBlendShader ); blendPass.uniforms[ 'tBase' ].value = mainComposer.renderTarget1; blendPass.uniforms[ 'tAdd' ].value = topComposer.renderTarget1; var blendComposer = new THREE.EffectComposer( renderer ); blendComposer.addPass( blendPass ); blendPass.renderToScreen = true; composers.push(mainComposer,topComposer,blendComposer); return composers; }; 

werd

 var mainComposer = new THREE.EffectComposer( renderer, renderTarget ); var renderPass = new THREE.RenderPass( scene, camera ); mainComposer.addPass( renderPass ); // add a shader var shaderpass = new THREE.ShaderPass( THREE.SomeShader ); ... (do some settings for the shader here) mainComposer.addPass(shaderpass); // add a copy, so webgl knows what to render: var copypass = new THREE.ShaderPass( THREE.CopyShader ); copypass.renderToScreen = true; mainComposer.addPass(copypass); // render mainComposer.render(); 

Bereiden:

1. in de threejs repo, neem een kijkje op voorbeelden/js/shaders en voorbeelden/js/postprocessing
2. Kies aantal shaders. Deze zijn gewoon WebGL code opgeslagen in JS-bestanden, maar ze zijn in principe hetzelfde als de shaders ging ik door bij het beschrijven van een andere helderheid voor elke ster.
3. de postprocessing directory heeft een bos van nutsbedrijven, in wezen, waarmee u laag effecten op elkaar

Monteren (de scripts op uw pagina plaatsen):

-DRIE. EffectComposer
-DRIE. RenderPass (u moet een renderpass zodat uw invloed van toepassing op iets)
-DRIE. ShaderPass (of twee of drie--deze wrap uw effecten)
-DRIE. CopyShader (in geval die u wilt weergeven zonder effecten soms)
-DRIE. AdditiveBlendShader (om te mengen andere shaders)
-sommige arceringen u graag

De Code:

 var blendPass = new THREE.ShaderPass( THREE.AdditiveBlendShader ); blendPass.uniforms[ 'tBase' ].value = mainComposer.renderTarget1; blendPass.uniforms[ 'tAdd' ].value = topComposer.renderTarget1; var blendComposer = new THREE.EffectComposer( renderer ); blendComposer.addPass( blendPass ); blendPass.renderToScreen = true; 

Kortom u zult worden belt .render() op een componist nu, in plaats van direct op een renderer. U kunt vrijwel elk willekeurig bereik van effecten die u door eerst doet een render-pass wilt, toe te voegen aan de componist, dan latere shaderpasses toe te voegen aan de dezelfde componist samenstellen. Uiteindelijk, zou u wilt toevoegen van een copyshader om alles bij elkaar komen, stel deze in op renderToScreen en renderen. Neer, het als volgt uitzien:

 // in the composeScene function return composers.push(mainComposer,topComposer,blendComposer); ... // results of ComposeScene are stored each time the user enters/exits a constellation Galaxy.Composers = Galaxy.ComposeScene(); ... // In the render loop, each composer is rendered _.each(Galaxy.Composers,function(composer){ composer.render(); }); 

Maar in het geval van wat ik heb gedaan hier, er zijn eigenlijk twee aparte componisten waarmee twee verschillende sets van objecten in de scene. Wanneer een constellatie actief is, worden de sterren en de verbindingslijnen weergegeven zonder vervagen, en bij volledige helderheid. De sterren van de achtergrond, echter, zijn verduisterd en wazig. Dus als u de effecten toegepast op een verzameling van dingen en de andere niet, moet je een hele aparte scène met gekloonde objecten (topScene), en een hele aparte componist stapel.

Dit zorgt ervoor dat de lichte complicatie die de twee moeten samen als een laatste stap worden gemengd: ik kon maken van de topscene, maar het zou de onderste scène bedekken. Zo is het laatste ding dat wordt weergegeven in mijn geval een additieve mix van de twee composers resultaten:

De definitieve bits: je moet alle drie componisten elk frame renderen, of de inhoud van die componist niet bijgewerkt:

in de functie composeScene retourneert composers.push(mainComposer,topComposer,blendComposer); ... / / resultaten van ComposeScene worden opgeslagen telkens wanneer de gebruiker opent/sluit een sterrenbeeld Galaxy.Composers = Galaxy.ComposeScene(); ... / / De render lus, elke componist wordt gerenderd

Dat is allen daar is aan het!