javascript
/
three.js
mirrorاز https://github.com/tazdij/three.js.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
							<!DOCTYPE html>
<html lang="it">
	<head>
		<meta charset="utf-8">
		<base href="../../../" />
		<script src="page.js"></script>
		<link type="text/css" rel="stylesheet" href="page.css" />
	</head>
	<body>
		<h1>Come utilizzare il post-processing (How to use post-processing)</h1>

		<p>
      Molte applicazioni 3D visualizzano i loro oggetti 3D direttamente sullo schermo. A volte, tuttavia, si vuole applicare uno o più effetti grafici
      come Depth-Of-Field, Bloom, Film Grain o vari tipi di Anti-aliasing. Il Post-processing è una soluzione ampiamente utilizzata per implementare questi effetti.
      Prima di tutto, la scena viene renderizzata su un target di rendering che rappresenta un buffer nella memoria della scheda video.
      Nella fase successiva, uno o più passaggi di post-processing applicano filtri ed effetti al buffer dell'immagine prima che questa venga infine renderizzata
      sullo schermo.
		</p>
		<p>
      three.js fornisce una soluzione di post-processing completa tramite [page:EffectComposer] per implementare tale flusso di lavoro.
		</p>

		<h2>Workflow</h2>

		<p>
      Il primo step, nel processo, è quello di importare tutti i file necessari dalla cartella degli esempi. La guida presuppone che si utilizzi
      il [link:https://www.npmjs.com/package/three pacchetto npm] ufficiale di three.js. Per la nostra demo di base in questa guida abbiamo
      bisogno dei seguenti file:
		</p>

		<code>
		import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
		import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
		import { GlitchPass } from 'three/addons/postprocessing/GlitchPass.js';
		</code>

		<p>
      Dopo che tutti i file sono stati importati con successo, possiamo creare il nostro composer passandogli un'istanza di [page:WebGLRenderer].
		</p>

		<code>
		const composer = new EffectComposer( renderer );
		</code>

		<p>
      Quando viene usato un composer è necessario modificare il ciclo di animazine dell'applicazione. Invece di chiamare il metodo render di
      [page:WebGLRenderer], usiamo la rispettiva controparte di [page:EffectComposer].
		</p>

		<code>
		function animate() {

			requestAnimationFrame( animate );

			composer.render();

		}
		</code>

		<p>
      Il composer è pronto, ed è possibile configurare la catena di passaggi di post-processing. Questi passaggi sono i responsabili per la creazione
      dell'output visivo finale dell'applicazione. Vengono elaborati nello stesso ordine in cui sono stati aggiunti/inseriti. Nel nostro esempio, l'istanza
      di `RenderPass` viene eseguita per prima, poi l'istanza di `GlitchPass`. L'ultimo passaggio abilitato della catena viene automaticamente renderizzato sullo schermo.
      La configurazione dei passaggi è la seguente:
		</p>

		<code>
		const renderPass = new RenderPass( scene, camera );
		composer.addPass( renderPass );

		const glitchPass = new GlitchPass();
		composer.addPass( glitchPass );
		</code>

		<p>
      `RenderPass` viene normalmente posizionata all'inizio della catena per fornire la scena renderizzata come input per il passaggio successivo di post-processing.
      Nel nostro caso `GlitchPass` utilizzarà questi dati di immagine per applicare un effetto glitch selvaggio. Guarda questo [link:https://threejs.org/examples/webgl_postprocessing_glitch esempio live]
      per vederli in azione.
		</p>

		<h2>Passi Built-in</h2>

		<p>
      È possibile utilizzare un'ampia gamma di passaggi di post-processing predefiniti forniti dall'engine. Si possono trovare nella
      cartella di [link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm/postprocessing postprocessing].
		</p>

		<h2>Passi personalizzati</h2>

		<p>
      A volte si desidera scrivere uno shader di post-processing personalizzato e includerlo nella catena dei passi di post-processing.
      Per questo scenario puoi utilizzare `ShaderPass`. Dopo aver importato il file e lo shader personalizzato, si può usare il seguente codice per
      impostare i passaggi:
		</p>

		<code>
		import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
		import { LuminosityShader } from 'three/addons/shaders/LuminosityShader.js';

		// later in your init routine

		const luminosityPass = new ShaderPass( LuminosityShader );
		composer.addPass( luminosityPass );
		</code>

		<p>
      Il repository fornisce un file chiamato [link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/shaders/CopyShader.js CopyShader], il quale è un ottimo
      punto di partenza per il tuo shader personalizzato. `CopyShader` copia semplicemente il contenuto dell'immagine del buffer di lettura dell'[page:EffectComposer]
      nel buffer di scrittura senza applicare alcun effetto.
		</p>

	</body>
</html>