You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
114 lines
4.7 KiB
114 lines
4.7 KiB
3 years ago
|
<!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>
|