Skip to content

Commit

Permalink
Docs: Improve post processing guide.
Browse files Browse the repository at this point in the history
  • Loading branch information
Mugen87 committed Jul 2, 2023
1 parent aff5cb1 commit 952cfd4
Show file tree
Hide file tree
Showing 7 changed files with 59 additions and 27 deletions.
12 changes: 8 additions & 4 deletions docs/manual/en/introduction/How-to-use-post-processing.html
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ <h2>Workflow</h2>
import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
import { GlitchPass } from 'three/addons/postprocessing/GlitchPass.js';
import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
</code>

<p>
Expand Down Expand Up @@ -59,8 +60,8 @@ <h2>Workflow</h2>
<p>
Our composer is now ready so it's possible to configure the chain of post-processing passes. These passes are responsible for creating
the final visual output of the application. They are processed in order of their addition/insertion. In our example, the instance of `RenderPass`
is executed first and then the instance of `GlitchPass`. The last enabled pass in the chain is automatically rendered to the screen. The setup
of the passes looks like so:
is executed first, then the instance of `GlitchPass` and finally `OutputPass`. The last enabled pass in the chain is automatically rendered to the screen.
The setup of the passes looks like so:
</p>

<code>
Expand All @@ -69,12 +70,15 @@ <h2>Workflow</h2>

const glitchPass = new GlitchPass();
composer.addPass( glitchPass );

const outputPass = new OutputPass();
composer.addPass( outputPass );
</code>

<p>
`RenderPass` is normally placed at the beginning of the chain in order to provide the rendered scene as an input for the next post-processing step. In our case,
`GlitchPass` is going to use these image data to apply a wild glitch effect. Check out this [link:https://threejs.org/examples/webgl_postprocessing_glitch live example]
to see it in action.
`GlitchPass` is going to use these image data to apply a wild glitch effect. `OutputPass` is usually the last pass in the chain which performs sRGB color space conversion and optional tone mapping.
Check out this [link:https://threejs.org/examples/webgl_postprocessing_glitch live example] to see it in action.
</p>

<h2>Built-in Passes</h2>
Expand Down
12 changes: 8 additions & 4 deletions docs/manual/fr/introduction/How-to-use-post-processing.html
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ <h2>Workflow</h2>
import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
import { GlitchPass } from 'three/addons/postprocessing/GlitchPass.js';
import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
</code>

<p>
Expand Down Expand Up @@ -58,8 +59,8 @@ <h2>Workflow</h2>

<p>
Notre composer est maintenant prêt, il est donc possible de configurer la chaîne d'effets de post-processing. Ces effets (passes) sont chargés de la création
de l'apparence visuelle finale de l'application. Ils sont traités dans l'ordre de leur ajout/insertion. Dans notre example, l'instance de `RenderPass`
est exécutée en première, puis l'instance de `GlitchPass` est exécutée. Le dernier effet activé de la chaîne est automatiquement rendu dans la scène. Le setup
de l'apparence visuelle finale de l'application. Ils sont traités dans l'ordre de leur ajout/insertion. In our example, the instance of `RenderPass`
is executed first, then the instance of `GlitchPass` and finally `OutputPass`. Le dernier effet activé de la chaîne est automatiquement rendu dans la scène. Le setup
des effets ressemble à ça:
</p>

Expand All @@ -69,12 +70,15 @@ <h2>Workflow</h2>

const glitchPass = new GlitchPass();
composer.addPass( glitchPass );

const outputPass = new OutputPass();
composer.addPass( outputPass );
</code>

<p>
`RenderPass` est normalement placé au début de la chaîne pour fournir la scène rendue en tant qu'entrée pour les prochaines étapes de post-processing. Dans notre cas,
`GlitchPass` va utiliser les données de l'image pour appliquer un effet de glitch. Regardez cet [link:https://threejs.org/examples/webgl_postprocessing_glitch exemple live]
pour voir cela en action.
`GlitchPass` va utiliser les données de l'image pour appliquer un effet de glitch. `OutputPass` is usually the last pass in the chain which performs sRGB color space conversion and optional tone mapping.
Regardez cet [link:https://threejs.org/examples/webgl_postprocessing_glitch exemple live] pour voir cela en action.
</p>

<h2>Effets Intégrés</h2>
Expand Down
12 changes: 8 additions & 4 deletions docs/manual/it/introduction/How-to-use-post-processing.html
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ <h2>Workflow</h2>
import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
import { GlitchPass } from 'three/addons/postprocessing/GlitchPass.js';
import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
</code>

<p>
Expand Down Expand Up @@ -59,8 +60,8 @@ <h2>Workflow</h2>

<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.
dell'output visivo finale dell'applicazione. Vengono elaborati nello stesso ordine in cui sono stati aggiunti/inseriti. In our example, the instance of `RenderPass`
is executed first, then the instance of `GlitchPass` and finally `OutputPass`. L'ultimo passaggio abilitato della catena viene automaticamente renderizzato sullo schermo.
La configurazione dei passaggi è la seguente:
</p>

Expand All @@ -70,12 +71,15 @@ <h2>Workflow</h2>

const glitchPass = new GlitchPass();
composer.addPass( glitchPass );

const outputPass = new OutputPass();
composer.addPass( outputPass );
</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.
Nel nostro caso `GlitchPass` utilizzarà questi dati di immagine per applicare un effetto glitch selvaggio. `OutputPass` is usually the last pass in the chain which performs sRGB color space conversion and optional tone mapping.
Guarda questo [link:https://threejs.org/examples/webgl_postprocessing_glitch esempio live] per vederli in azione.
</p>

<h2>Passi Built-in</h2>
Expand Down
11 changes: 8 additions & 3 deletions docs/manual/ja/introduction/How-to-use-post-processing.html
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ <h2>Workflow</h2>
import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
import { GlitchPass } from 'three/addons/postprocessing/GlitchPass.js';
import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
</code>

<p>
Expand Down Expand Up @@ -61,8 +62,8 @@ <h2>Workflow</h2>
<p>
composerが準備できたので、post-processingパスのチェーンを設定できるようになりました。
これらのパスはアプリケーションの最終的なビジュアルを出力することに責任を持ちます。
これらのパスは追加/挿入の順番で処理されます。今回示している例では、*RenderPass*インスタンスがはじめに実行され、
それから*GlitchPass*インスタンスが実行されます。チェーンの中で最後の有効なpassが自動的に画面に描画されます。
これらのパスは追加/挿入の順番で処理されます。In our example, the instance of `RenderPass`
is executed first, then the instance of `GlitchPass` and finally `OutputPass`。チェーンの中で最後の有効なpassが自動的に画面に描画されます。
passの設定は以下のように行います。
</p>

Expand All @@ -72,12 +73,16 @@ <h2>Workflow</h2>

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

const outputPass = new OutputPass();
composer.addPass( outputPass );
</code>

<p>
*RenderPass*は普通チェインのはじめにあります。
これはレンダリングされたシーンを次のpost-processingの入力とするためです。
*GlitchPass*は、これらのイメージをワイルドなglitch effectを適用するために使います。
`OutputPass` is usually the last pass in the chain which performs sRGB color space conversion and optional tone mapping.
実際に動いているものを見るために、[link:https://threejs.org/examples/webgl_postprocessing_glitch sample]を見てみましょう。
</p>

Expand Down
13 changes: 9 additions & 4 deletions docs/manual/ko/introduction/How-to-use-post-processing.html
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ <h2>작업 절차</h2>
import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
import { GlitchPass } from 'three/addons/postprocessing/GlitchPass.js';
import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
</code>

<p>
Expand Down Expand Up @@ -59,7 +60,7 @@ <h2>작업 절차</h2>
<p>
composer는 이제 준비가 다 되었으니, 후처리 과정 연결을 설정할 수 있습니다.
이러한 과정은 앱을 만드는 최종 화면 출력을 담당하며, 첨부/삽입한 순서대로 처리합니다.
이 예제에서 먼저 실행한 것은 *RenderPass* 인스턴스이고 그 다음이 *GlitchPass* 입니다.
In our example, the instance of `RenderPass` is executed first, then the instance of `GlitchPass` and finally `OutputPass`.
마지막 과정이 끝나면 자동으로 화면에 렌더링됩니다. 패스 설정은 아래와 같습니다.
</p>

Expand All @@ -69,12 +70,16 @@ <h2>작업 절차</h2>

const glitchPass = new GlitchPass();
composer.addPass( glitchPass );

const outputPass = new OutputPass();
composer.addPass( outputPass );
</code>

<p>
*RenderPass*는 일반적으로 맨 위에 위치해서 렌더링된 장면을 후처리의 기본 입력 장면으로 활용합니다. 예제의 경우,
*GlitchPass*는 이 이미지 데이터에 거친 글리치 효과를 넣어줍니다. [link:https://threejs.org/examples/webgl_postprocessing_glitch live example]에서 작동을
확인해보세요.
*RenderPass*는 일반적으로 맨 위에 위치해서 렌더링된 장면을 후처리의 기본 입력 장면으로 활용합니다. 예제의 경우,
*GlitchPass*는 이 이미지 데이터에 거친 글리치 효과를 넣어줍니다.
`OutputPass` is usually the last pass in the chain which performs sRGB color space conversion and optional tone mapping.
[link:https://threejs.org/examples/webgl_postprocessing_glitch live example]에서 작동을 확인해보세요.
</p>

<h2>기본 내장 후처리방식</h2>
Expand Down
15 changes: 10 additions & 5 deletions docs/manual/pt-br/introduction/How-to-use-post-processing.html
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ <h2>Workflow</h2>
import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
import { GlitchPass } from 'three/addons/postprocessing/GlitchPass.js';
import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
</code>

<p>
Expand Down Expand Up @@ -58,8 +59,8 @@ <h2>Workflow</h2>

<p>
Nosso composer já está pronto para que seja possível configurar a cadeia de passos de pós-processamento. Esses passos são responsáveis ​​por criar
a saída visual final do aplicativo. Eles são processados ​​na ordem de sua adição/inserção. Em nosso exemplo, a instância de `RenderPass`
é executada primeiro e depois a instância de `GlitchPass`. A última passagem habilitada na cadeia é renderizada automaticamente na tela. A configuração
a saída visual final do aplicativo. Eles são processados ​​na ordem de sua adição/inserção. In our example, the instance of `RenderPass`
is executed first, then the instance of `GlitchPass` and finally `OutputPass`. A última passagem habilitada na cadeia é renderizada automaticamente na tela. A configuração
dos passos fica assim:
</p>

Expand All @@ -69,12 +70,16 @@ <h2>Workflow</h2>

const glitchPass = new GlitchPass();
composer.addPass( glitchPass );

const outputPass = new OutputPass();
composer.addPass( outputPass );
</code>

<p>
O `RenderPass` é normalmente colocado no início da cadeia para fornecer a cena renderizada como entrada para a próxima etapa de pós-processamento. No nosso caso,
o `GlitchPass` usará esses dados de imagem para aplicar um efeito de glitch selvagem. Confira este [link:https://threejs.org/examples/webgl_postprocessing_glitch exemplo]
para vê-lo em ação.
O `RenderPass` é normalmente colocado no início da cadeia para fornecer a cena renderizada como entrada para a próxima etapa de pós-processamento.
No nosso caso, o `GlitchPass` usará esses dados de imagem para aplicar um efeito de glitch selvagem.
`OutputPass` is usually the last pass in the chain which performs sRGB color space conversion and optional tone mapping.
Confira este [link:https://threejs.org/examples/webgl_postprocessing_glitch exemplo] para vê-lo em ação.
</p>

<h2>Passes integrados</h2>
Expand Down
11 changes: 8 additions & 3 deletions docs/manual/zh/introduction/How-to-use-post-processing.html
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ <h2>工作流程</h2>
import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
import { GlitchPass } from 'three/addons/postprocessing/GlitchPass.js';
import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
</code>

<p>
Expand Down Expand Up @@ -59,7 +60,7 @@ <h2>工作流程</h2>
<p>
我们的合成器已经准备好了,现在我们就可以来配置后期处理过程链了。
这些过程负责创建应用程序的最终视觉输出,它们按照添加/插入的顺序来进行处理。
在我们的示例中,首先执行的是*RenderPass*实例,然后是*GlitchPass*。在链中的最后一个过程将自动被渲染到屏幕上
In our example, the instance of `RenderPass` is executed first, then the instance of `GlitchPass` and finally `OutputPass`
这些过程的设置类似这样:
</p>

Expand All @@ -69,12 +70,16 @@ <h2>工作流程</h2>

const glitchPass = new GlitchPass();
composer.addPass( glitchPass );

const outputPass = new OutputPass();
composer.addPass( outputPass );
</code>

<p>
*RenderPass*通常位于过程链的开始,以便将渲染好的场景作为输入来提供给下一个后期处理步骤。
在我们的示例中,*GlitchPass*将会使用这些图像数据,来应用一个疯狂的故障效果。参见这个示例:
[link:https://threejs.org/examples/webgl_postprocessing_glitch live example]来看一看它的实际效果。
在我们的示例中,*GlitchPass*将会使用这些图像数据,来应用一个疯狂的故障效果。
`OutputPass` is usually the last pass in the chain which performs sRGB color space conversion and optional tone mapping.
参见这个示例:[link:https://threejs.org/examples/webgl_postprocessing_glitch live example]来看一看它的实际效果。
</p>

<h2>内置过程</h2>
Expand Down

0 comments on commit 952cfd4

Please sign in to comment.