From 952cfd417cdde96c21d35828bc79094ad407d8f1 Mon Sep 17 00:00:00 2001 From: Mugen87 Date: Sun, 2 Jul 2023 10:48:47 +0200 Subject: [PATCH] Docs: Improve post processing guide. --- .../introduction/How-to-use-post-processing.html | 12 ++++++++---- .../introduction/How-to-use-post-processing.html | 12 ++++++++---- .../introduction/How-to-use-post-processing.html | 12 ++++++++---- .../introduction/How-to-use-post-processing.html | 11 ++++++++--- .../introduction/How-to-use-post-processing.html | 13 +++++++++---- .../introduction/How-to-use-post-processing.html | 15 ++++++++++----- .../introduction/How-to-use-post-processing.html | 11 ++++++++--- 7 files changed, 59 insertions(+), 27 deletions(-) diff --git a/docs/manual/en/introduction/How-to-use-post-processing.html b/docs/manual/en/introduction/How-to-use-post-processing.html index 31bb893b4d9546..0b0e0a917f919e 100644 --- a/docs/manual/en/introduction/How-to-use-post-processing.html +++ b/docs/manual/en/introduction/How-to-use-post-processing.html @@ -31,6 +31,7 @@

Workflow

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';

@@ -59,8 +60,8 @@

Workflow

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:

@@ -69,12 +70,15 @@

Workflow

const glitchPass = new GlitchPass(); composer.addPass( glitchPass ); + + const outputPass = new OutputPass(); + composer.addPass( outputPass );

`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.

Built-in Passes

diff --git a/docs/manual/fr/introduction/How-to-use-post-processing.html b/docs/manual/fr/introduction/How-to-use-post-processing.html index e6619029e8b289..1e5c9254668eea 100644 --- a/docs/manual/fr/introduction/How-to-use-post-processing.html +++ b/docs/manual/fr/introduction/How-to-use-post-processing.html @@ -31,6 +31,7 @@

Workflow

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';

@@ -58,8 +59,8 @@

Workflow

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:

@@ -69,12 +70,15 @@

Workflow

const glitchPass = new GlitchPass(); composer.addPass( glitchPass ); + + const outputPass = new OutputPass(); + composer.addPass( outputPass );

`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.

Effets Intégrés

diff --git a/docs/manual/it/introduction/How-to-use-post-processing.html b/docs/manual/it/introduction/How-to-use-post-processing.html index 60b3a0d0c0a69c..5ce994a34f4e42 100644 --- a/docs/manual/it/introduction/How-to-use-post-processing.html +++ b/docs/manual/it/introduction/How-to-use-post-processing.html @@ -32,6 +32,7 @@

Workflow

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';

@@ -59,8 +60,8 @@

Workflow

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:

@@ -70,12 +71,15 @@

Workflow

const glitchPass = new GlitchPass(); composer.addPass( glitchPass ); + + const outputPass = new OutputPass(); + composer.addPass( outputPass );

`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.

Passi Built-in

diff --git a/docs/manual/ja/introduction/How-to-use-post-processing.html b/docs/manual/ja/introduction/How-to-use-post-processing.html index fd311f4afae066..7d126119c34cb3 100644 --- a/docs/manual/ja/introduction/How-to-use-post-processing.html +++ b/docs/manual/ja/introduction/How-to-use-post-processing.html @@ -33,6 +33,7 @@

Workflow

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';

@@ -61,8 +62,8 @@

Workflow

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の設定は以下のように行います。

@@ -72,12 +73,16 @@

Workflow

const glitchPass = new GlitchPass(); composer.addPass( glitchPass ); - + + const outputPass = new OutputPass(); + composer.addPass( outputPass ); +

*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]を見てみましょう。

diff --git a/docs/manual/ko/introduction/How-to-use-post-processing.html b/docs/manual/ko/introduction/How-to-use-post-processing.html index 6dce9e4b086378..e2a79138c0a493 100644 --- a/docs/manual/ko/introduction/How-to-use-post-processing.html +++ b/docs/manual/ko/introduction/How-to-use-post-processing.html @@ -31,6 +31,7 @@

작업 절차

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';

@@ -59,7 +60,7 @@

작업 절차

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

@@ -69,12 +70,16 @@

작업 절차

const glitchPass = new GlitchPass(); composer.addPass( glitchPass ); + + const outputPass = new OutputPass(); + composer.addPass( outputPass );

- *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]에서 작동을 확인해보세요.

기본 내장 후처리방식

diff --git a/docs/manual/pt-br/introduction/How-to-use-post-processing.html b/docs/manual/pt-br/introduction/How-to-use-post-processing.html index b91a9c9ab42fd5..210eca4af3cb52 100644 --- a/docs/manual/pt-br/introduction/How-to-use-post-processing.html +++ b/docs/manual/pt-br/introduction/How-to-use-post-processing.html @@ -31,6 +31,7 @@

Workflow

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';

@@ -58,8 +59,8 @@

Workflow

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:

@@ -69,12 +70,16 @@

Workflow

const glitchPass = new GlitchPass(); composer.addPass( glitchPass ); + + const outputPass = new OutputPass(); + composer.addPass( outputPass );

- 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.

Passes integrados

diff --git a/docs/manual/zh/introduction/How-to-use-post-processing.html b/docs/manual/zh/introduction/How-to-use-post-processing.html index 5007e574870c5d..9e31f999b66655 100644 --- a/docs/manual/zh/introduction/How-to-use-post-processing.html +++ b/docs/manual/zh/introduction/How-to-use-post-processing.html @@ -31,6 +31,7 @@

工作流程

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';

@@ -59,7 +60,7 @@

工作流程

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

@@ -69,12 +70,16 @@

工作流程

const glitchPass = new GlitchPass(); composer.addPass( glitchPass ); + + const outputPass = new OutputPass(); + composer.addPass( outputPass );

*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]来看一看它的实际效果。

内置过程