From 2fc42395ac6ca5bbc700e03edd55259bf4917571 Mon Sep 17 00:00:00 2001 From: Mugen87 Date: Sun, 2 Jul 2023 10:20:00 +0200 Subject: [PATCH 1/2] Manual: Clean up. --- manual/en/lights.html | 6 ++++-- manual/fr/lights.html | 6 ++++-- manual/fr/textures.html | 26 ++++++++++++++++++-------- manual/ja/lights.html | 6 ++++-- manual/ja/textures.html | 26 ++++++++++++++++++-------- manual/ko/lights.html | 6 ++++-- manual/ko/textures.html | 26 ++++++++++++++++++-------- manual/ru/lights.html | 6 ++++-- manual/ru/textures.html | 26 ++++++++++++++++++-------- manual/zh/lights.html | 6 ++++-- manual/zh/textures.html | 26 ++++++++++++++++++-------- 11 files changed, 114 insertions(+), 52 deletions(-) diff --git a/manual/en/lights.html b/manual/en/lights.html index a1c34c671b6f3e..9c26891b9d15dc 100644 --- a/manual/en/lights.html +++ b/manual/en/lights.html @@ -291,7 +291,8 @@

PointLight is a light that sits at a point and shoots light in all directions from that point. Let's change the code.

const color = 0xFFFFFF;
-const intensity = 1;
+-const intensity = 1;
++const intensity = 150;
 -const light = new THREE.DirectionalLight(color, intensity);
 +const light = new THREE.PointLight(color, intensity);
 light.position.set(0, 10, 0);
@@ -347,7 +348,8 @@ 
DirectionalLight with helper from above

 
const color = 0xFFFFFF;
-const intensity = 1;
+-const intensity = 1;
++const intensity = 150;
 -const light = new THREE.DirectionalLight(color, intensity);
 +const light = new THREE.SpotLight(color, intensity);
 scene.add(light);
diff --git a/manual/fr/lights.html b/manual/fr/lights.html
index 5c09668dfdf680..7547c25a05caa9 100644
--- a/manual/fr/lights.html
+++ b/manual/fr/lights.html
@@ -238,7 +238,8 @@ 
PointLight

 
Un PointLight est une lumière qui se trouve en un point et projette de la lumière dans toutes les directions à partir de ce point. Changeons le code.

 
const color = 0xFFFFFF;
-const intensity = 1;
+-const intensity = 1;
++const intensity = 150;
 -const light = new THREE.DirectionalLight(color, intensity);
 +const light = new THREE.PointLight(color, intensity);
 light.position.set(0, 10, 0);
@@ -283,7 +284,8 @@ 
SpotLight, nous avons besoin d'une cible tout comme la lumière directionnelle. Le cône de lumière s'ouvrira vers la cible.

 
Modifions notre DirectionalLight avec le 'helper' vu plus haut

 
const color = 0xFFFFFF;
-const intensity = 1;
+-const intensity = 1;
++const intensity = 150;
 -const light = new THREE.DirectionalLight(color, intensity);
 +const light = new THREE.SpotLight(color, intensity);
 scene.add(light);
diff --git a/manual/fr/textures.html b/manual/fr/textures.html
index dde1982e82c554..074b6b7cbbf8e4 100644
--- a/manual/fr/textures.html
+++ b/manual/fr/textures.html
@@ -60,10 +60,12 @@ 
 Hello Texture

 
Modifions l'un de nos premiers échantillons. Tout ce que nous avons à faire, c'est de créer un TextureLoader. Appelons-le avec sa méthode
 load et l'URL d'une image définissons la propriété map du matériau sur le résultat au lieu de définir sa color.

 
+const loader = new THREE.TextureLoader();
++const texture = loader.load( 'resources/images/wall.jpg' );
++texture.colorSpace = THREE.SRGBColorSpace;
 
 const material = new THREE.MeshBasicMaterial({
 -  color: 0xFF8844,
-+  map: loader.load('resources/images/wall.jpg'),
++  map: texture,
 });
 

 
Notez que nous utilisons un MeshBasicMaterial, donc pas besoin de lumières.

@@ -90,20 +92,28 @@ 
<
 
 
Fabriquons juste 6 materiaux et passons-les sous forme de tableau lors de la création de la Mesh

 
const loader = new THREE.TextureLoader();
+-const texture = loader.load( 'resources/images/wall.jpg' );
+-texture.colorSpace = THREE.SRGBColorSpace;
 
 -const material = new THREE.MeshBasicMaterial({
--  map: loader.load('resources/images/wall.jpg'),
+-  map: texture,
 -});
 +const materials = [
-+  new THREE.MeshBasicMaterial({map: loader.load('resources/images/flower-1.jpg')}),
-+  new THREE.MeshBasicMaterial({map: loader.load('resources/images/flower-2.jpg')}),
-+  new THREE.MeshBasicMaterial({map: loader.load('resources/images/flower-3.jpg')}),
-+  new THREE.MeshBasicMaterial({map: loader.load('resources/images/flower-4.jpg')}),
-+  new THREE.MeshBasicMaterial({map: loader.load('resources/images/flower-5.jpg')}),
-+  new THREE.MeshBasicMaterial({map: loader.load('resources/images/flower-6.jpg')}),
++  new THREE.MeshBasicMaterial({map: loadColorTexture('resources/images/flower-1.jpg')}),
++  new THREE.MeshBasicMaterial({map: loadColorTexture('resources/images/flower-2.jpg')}),
++  new THREE.MeshBasicMaterial({map: loadColorTexture('resources/images/flower-3.jpg')}),
++  new THREE.MeshBasicMaterial({map: loadColorTexture('resources/images/flower-4.jpg')}),
++  new THREE.MeshBasicMaterial({map: loadColorTexture('resources/images/flower-5.jpg')}),
++  new THREE.MeshBasicMaterial({map: loadColorTexture('resources/images/flower-6.jpg')}),
 +];
 -const cube = new THREE.Mesh(geometry, material);
 +const cube = new THREE.Mesh(geometry, materials);
+
++function loadColorTexture( path ) {
++  const texture = loader.load( path );
++  texture.colorSpace = THREE.SRGBColorSpace;
++  return texture;
++}
 

 
Ça marche !

 

diff --git a/manual/ja/lights.html b/manual/ja/lights.html
index b2d3cd6cc37bf8..5f202b7630413d 100644
--- a/manual/ja/lights.html
+++ b/manual/ja/lights.html
@@ -261,7 +261,8 @@ 
PointLight（点
 
PointLight はある点から全方向に光を放つライトです。
 コード変更しましょう。

 
const color = 0xFFFFFF;
-const intensity = 1;
+-const intensity = 1;
++const intensity = 150;
 -const light = new THREE.DirectionalLight(color, intensity);
 +const light = new THREE.PointLight(color, intensity);
 light.position.set(0, 10, 0);
@@ -312,7 +313,8 @@ 
SpotLight（集中
 ライトの円錐体がターゲットに向かって照らされます。

 
上記のヘルパーを使って DirectionalLight を修正します。

 
const color = 0xFFFFFF;
-const intensity = 1;
+-const intensity = 1;
++const intensity = 150;
 -const light = new THREE.DirectionalLight(color, intensity);
 +const light = new THREE.SpotLight(color, intensity);
 scene.add(light);
diff --git a/manual/ja/textures.html b/manual/ja/textures.html
index f905815ba23c57..eb4e6331ffe6c2 100644
--- a/manual/ja/textures.html
+++ b/manual/ja/textures.html
@@ -64,10 +64,12 @@ 
 ハロー・テクスチャ

 loadを画像のURLを引数にして呼び、colorを設定する代わりに、
 マテリアルのmap属性にその結果を渡してください。

 
+const loader = new THREE.TextureLoader();
++const texture = loader.load( 'resources/images/wall.jpg' );
++texture.colorSpace = THREE.SRGBColorSpace;
 
 const material = new THREE.MeshBasicMaterial({
 -  color: 0xFF8844,
-+  map: loader.load('resources/images/wall.jpg'),
++  map: texture,
 });
 

 
MeshBasicMaterialを使っているので、光源が必要ないことに注意してください。

@@ -94,20 +96,28 @@ 
 立方体の各面に異なる6つ
 
 
Meshを作るときに、単に6つのマテリアルを作り、配列として渡します。

 
const loader = new THREE.TextureLoader();
+-const texture = loader.load( 'resources/images/wall.jpg' );
+-texture.colorSpace = THREE.SRGBColorSpace;
 
 -const material = new THREE.MeshBasicMaterial({
--  map: loader.load('resources/images/wall.jpg'),
+-  map: texture,
 -});
 +const materials = [
-+  new THREE.MeshBasicMaterial({map: loader.load('resources/images/flower-1.jpg')}),
-+  new THREE.MeshBasicMaterial({map: loader.load('resources/images/flower-2.jpg')}),
-+  new THREE.MeshBasicMaterial({map: loader.load('resources/images/flower-3.jpg')}),
-+  new THREE.MeshBasicMaterial({map: loader.load('resources/images/flower-4.jpg')}),
-+  new THREE.MeshBasicMaterial({map: loader.load('resources/images/flower-5.jpg')}),
-+  new THREE.MeshBasicMaterial({map: loader.load('resources/images/flower-6.jpg')}),
++  new THREE.MeshBasicMaterial({map: loadColorTexture('resources/images/flower-1.jpg')}),
++  new THREE.MeshBasicMaterial({map: loadColorTexture('resources/images/flower-2.jpg')}),
++  new THREE.MeshBasicMaterial({map: loadColorTexture('resources/images/flower-3.jpg')}),
++  new THREE.MeshBasicMaterial({map: loadColorTexture('resources/images/flower-4.jpg')}),
++  new THREE.MeshBasicMaterial({map: loadColorTexture('resources/images/flower-5.jpg')}),
++  new THREE.MeshBasicMaterial({map: loadColorTexture('resources/images/flower-6.jpg')}),
 +];
 -const cube = new THREE.Mesh(geometry, material);
 +const cube = new THREE.Mesh(geometry, materials);
+
++function loadColorTexture( path ) {
++  const texture = loader.load( path );
++  texture.colorSpace = THREE.SRGBColorSpace;
++  return texture;
++}
 

 
動きました！

 

diff --git a/manual/ko/lights.html b/manual/ko/lights.html
index e636b40eb022c4..ad4390a4c66241 100644
--- a/manual/ko/lights.html
+++ b/manual/ko/lights.html
@@ -270,7 +270,8 @@ 
PointLight는 한 점에서 무한히 뻗어나가는 광원입니다. 코드를
 다시 한 번 수정해보죠.

 
const color = 0xFFFFFF;
-const intensity = 1;
+-const intensity = 1;
++const intensity = 150;
 -const light = new THREE.DirectionalLight(color, intensity);
 +const light = new THREE.PointLight(color, intensity);
 light.position.set(0, 10, 0);
@@ -324,7 +325,8 @@ 
DirectionalLight와 헬퍼 객체를 수정하겠습니다.

 
const color = 0xFFFFFF;
-const intensity = 1;
+-const intensity = 1;
++const intensity = 150;
 -const light = new THREE.DirectionalLight(color, intensity);
 +const light = new THREE.SpotLight(color, intensity);
 scene.add(light);
diff --git a/manual/ko/textures.html b/manual/ko/textures.html
index 9fccd23dacffe0..3b35f05992e6cc 100644
--- a/manual/ko/textures.html
+++ b/manual/ko/textures.html
@@ -68,10 +68,12 @@ 
 하이, 텍스처

 반환 받은 값을 재질(material)의 map 속성에 지정합니다(color 속성은 지정하지
 않습니다).

 
+const loader = new THREE.TextureLoader();
++const texture = loader.load( 'resources/images/wall.jpg' );
++texture.colorSpace = THREE.SRGBColorSpace;
 
 const material = new THREE.MeshBasicMaterial({
 -  color: 0xFF8844,
-+  map: loader.load('resources/images/wall.jpg'),
++  map: texture,
 });
 

 
※ MeshBasicMaterial을 사용했으므로 광원을 사용할 필요가 없습니다.

@@ -98,20 +100,28 @@ 
 육면체 각 면에 다른 텍스처
 
 
단순히 재질을 6개 만들어 Mesh를 생성할 때 배열로 넘겨주기만 하면 됩니다.

 
const loader = new THREE.TextureLoader();
+-const texture = loader.load( 'resources/images/wall.jpg' );
+-texture.colorSpace = THREE.SRGBColorSpace;
 
 -const material = new THREE.MeshBasicMaterial({
--  map: loader.load('resources/images/wall.jpg'),
+-  map: texture,
 -});
 +const materials = [
-+  new THREE.MeshBasicMaterial({map: loader.load('resources/images/flower-1.jpg')}),
-+  new THREE.MeshBasicMaterial({map: loader.load('resources/images/flower-2.jpg')}),
-+  new THREE.MeshBasicMaterial({map: loader.load('resources/images/flower-3.jpg')}),
-+  new THREE.MeshBasicMaterial({map: loader.load('resources/images/flower-4.jpg')}),
-+  new THREE.MeshBasicMaterial({map: loader.load('resources/images/flower-5.jpg')}),
-+  new THREE.MeshBasicMaterial({map: loader.load('resources/images/flower-6.jpg')}),
++  new THREE.MeshBasicMaterial({map: loadColorTexture('resources/images/flower-1.jpg')}),
++  new THREE.MeshBasicMaterial({map: loadColorTexture('resources/images/flower-2.jpg')}),
++  new THREE.MeshBasicMaterial({map: loadColorTexture('resources/images/flower-3.jpg')}),
++  new THREE.MeshBasicMaterial({map: loadColorTexture('resources/images/flower-4.jpg')}),
++  new THREE.MeshBasicMaterial({map: loadColorTexture('resources/images/flower-5.jpg')}),
++  new THREE.MeshBasicMaterial({map: loadColorTexture('resources/images/flower-6.jpg')}),
 +];
 -const cube = new THREE.Mesh(geometry, material);
 +const cube = new THREE.Mesh(geometry, materials);
+
++function loadColorTexture( path ) {
++  const texture = loader.load( path );
++  texture.colorSpace = THREE.SRGBColorSpace;
++  return texture;
++}
 

 
껌이네요.

 

diff --git a/manual/ru/lights.html b/manual/ru/lights.html
index d1a25ecf8ab44c..926d15d141631d 100644
--- a/manual/ru/lights.html
+++ b/manual/ru/lights.html
@@ -289,7 +289,8 @@ 
PointLight - это свет, который сидит в какой-то точке и излучает свет 
 во всех направлениях от этой точки. Давайте изменим код.

 
const color = 0xFFFFFF;
-const intensity = 1;
+-const intensity = 1;
++const intensity = 150;
 -const light = new THREE.DirectionalLight(color, intensity);
 +const light = new THREE.PointLight(color, intensity);
 light.position.set(0, 10, 0);
@@ -342,7 +343,8 @@ 
DirectionalLight с помощником сверху

 
const color = 0xFFFFFF;
-const intensity = 1;
+-const intensity = 1;
++const intensity = 150;
 -const light = new THREE.DirectionalLight(color, intensity);
 +const light = new THREE.SpotLight(color, intensity);
 scene.add(light);
diff --git a/manual/ru/textures.html b/manual/ru/textures.html
index f96fc1adda9bfb..1631fb691382cc 100644
--- a/manual/ru/textures.html
+++ b/manual/ru/textures.html
@@ -65,10 +65,12 @@ 
 Hello Texture

 load метод с URL-адресом изображения и установите для
 изображения и установите его возвращаемое значение для map свойства материала, вместо установки color.

 
+const loader = new THREE.TextureLoader();
++const texture = loader.load( 'resources/images/wall.jpg' );
++texture.colorSpace = THREE.SRGBColorSpace;
 
 const material = new THREE.MeshBasicMaterial({
 -  color: 0xFF8844,
-+  map: loader.load('../resources/images/wall.jpg'),
++  map: texture,
 });
 

 
Обратите внимание, что мы используем MeshBasicMaterial поэтому не нужно никаких источников света.

@@ -95,20 +97,28 @@ 
 6 текстур, разные дл
 
 
Мы просто создадим 6 материалов и передаем их в виде массива при создании Mesh

 
const loader = new THREE.TextureLoader();
+-const texture = loader.load( 'resources/images/wall.jpg' );
+-texture.colorSpace = THREE.SRGBColorSpace;
 
 -const material = new THREE.MeshBasicMaterial({
--  map: loader.load('../resources/images/wall.jpg'),
+-  map: texture,
 -});
 +const materials = [
-+  new THREE.MeshBasicMaterial({map: loader.load('../resources/images/flower-1.jpg')}),
-+  new THREE.MeshBasicMaterial({map: loader.load('../resources/images/flower-2.jpg')}),
-+  new THREE.MeshBasicMaterial({map: loader.load('../resources/images/flower-3.jpg')}),
-+  new THREE.MeshBasicMaterial({map: loader.load('../resources/images/flower-4.jpg')}),
-+  new THREE.MeshBasicMaterial({map: loader.load('../resources/images/flower-5.jpg')}),
-+  new THREE.MeshBasicMaterial({map: loader.load('../resources/images/flower-6.jpg')}),
++  new THREE.MeshBasicMaterial({map: loadColorTexture('resources/images/flower-1.jpg')}),
++  new THREE.MeshBasicMaterial({map: loadColorTexture('resources/images/flower-2.jpg')}),
++  new THREE.MeshBasicMaterial({map: loadColorTexture('resources/images/flower-3.jpg')}),
++  new THREE.MeshBasicMaterial({map: loadColorTexture('resources/images/flower-4.jpg')}),
++  new THREE.MeshBasicMaterial({map: loadColorTexture('resources/images/flower-5.jpg')}),
++  new THREE.MeshBasicMaterial({map: loadColorTexture('resources/images/flower-6.jpg')}),
 +];
 -const cube = new THREE.Mesh(geometry, material);
 +const cube = new THREE.Mesh(geometry, materials);
+
++function loadColorTexture( path ) {
++  const texture = loader.load( path );
++  texture.colorSpace = THREE.SRGBColorSpace;
++  return texture;
++}
 

 
Оно работает!

 

diff --git a/manual/zh/lights.html b/manual/zh/lights.html
index def14504408ea4..fed1c36faf2a56 100644
--- a/manual/zh/lights.html
+++ b/manual/zh/lights.html
@@ -233,7 +233,8 @@ 
方向光（点光源（PointLight）

 
点光源（PointLight）表示的是从一个点朝各个方向发射出光线的一种光照效果。我们修改一下代码：

 
const color = 0xFFFFFF;
-const intensity = 1;
+-const intensity = 1;
++const intensity = 150;
 -const light = new THREE.DirectionalLight(color, intensity);
 +const light = new THREE.PointLight(color, intensity);
 light.position.set(0, 10, 0);
@@ -278,7 +279,8 @@ 
聚光灯（聚光灯（SpotLight）类似方向光（DirectionalLight）一样需要一个目标点，光源的位置是圆锥的顶点，目标点处于圆锥的中轴线上。

 
修改上面 DirectionalLight 的代码如下：

 
const color = 0xFFFFFF;
-const intensity = 1;
+-const intensity = 1;
++const intensity = 150;
 -const light = new THREE.DirectionalLight(color, intensity);
 +const light = new THREE.SpotLight(color, intensity);
 scene.add(light);
diff --git a/manual/zh/textures.html b/manual/zh/textures.html
index 9fcccac4e588c6..a17a0146596e1f 100644
--- a/manual/zh/textures.html
+++ b/manual/zh/textures.html
@@ -57,10 +57,12 @@ 
 你好，纹理

 
 
我们将修改我们的第一个例子中的其中一个。我们需要做的就是创建一个TextureLoader。调用它的load方法，同时传入图像的URL，并将材质的 map 属性设置为该方法的返回值，而不是设置它的 color属性。

 
+const loader = new THREE.TextureLoader();
++const texture = loader.load( 'resources/images/wall.jpg' );
++texture.colorSpace = THREE.SRGBColorSpace;
 
 const material = new THREE.MeshBasicMaterial({
 -  color: 0xFF8844,
-+  map: loader.load('resources/images/wall.jpg'),
++  map: texture,
 });
 

 
注意，我们使用的是 MeshBasicMaterial， 所以没有必要增加光线

@@ -87,20 +89,28 @@ 
 6种纹理，在立方体的每个
 
 
我们只需制作6种材料，并在创建 Mesh 时将它们作为一个数组传递给它们。

 
const loader = new THREE.TextureLoader();
+-const texture = loader.load( 'resources/images/wall.jpg' );
+-texture.colorSpace = THREE.SRGBColorSpace;
 
 -const material = new THREE.MeshBasicMaterial({
--  map: loader.load('resources/images/wall.jpg'),
+-  map: texture,
 -});
 +const materials = [
-+  new THREE.MeshBasicMaterial({map: loader.load('resources/images/flower-1.jpg')}),
-+  new THREE.MeshBasicMaterial({map: loader.load('resources/images/flower-2.jpg')}),
-+  new THREE.MeshBasicMaterial({map: loader.load('resources/images/flower-3.jpg')}),
-+  new THREE.MeshBasicMaterial({map: loader.load('resources/images/flower-4.jpg')}),
-+  new THREE.MeshBasicMaterial({map: loader.load('resources/images/flower-5.jpg')}),
-+  new THREE.MeshBasicMaterial({map: loader.load('resources/images/flower-6.jpg')}),
++  new THREE.MeshBasicMaterial({map: loadColorTexture('resources/images/flower-1.jpg')}),
++  new THREE.MeshBasicMaterial({map: loadColorTexture('resources/images/flower-2.jpg')}),
++  new THREE.MeshBasicMaterial({map: loadColorTexture('resources/images/flower-3.jpg')}),
++  new THREE.MeshBasicMaterial({map: loadColorTexture('resources/images/flower-4.jpg')}),
++  new THREE.MeshBasicMaterial({map: loadColorTexture('resources/images/flower-5.jpg')}),
++  new THREE.MeshBasicMaterial({map: loadColorTexture('resources/images/flower-6.jpg')}),
 +];
 -const cube = new THREE.Mesh(geometry, material);
 +const cube = new THREE.Mesh(geometry, materials);
+
++function loadColorTexture( path ) {
++  const texture = loader.load( path );
++  texture.colorSpace = THREE.SRGBColorSpace;
++  return texture;
++}
 

 
有效果了！

 


From c21ab9d0cd0aab8b318c8e7091888f72224f0e81 Mon Sep 17 00:00:00 2001
From: Mugen87 
Date: Sun, 2 Jul 2023 10:33:08 +0200
Subject: [PATCH 2/2] Manual: More clean up.

---
 manual/en/post-processing.html                  | 17 +++++++++--------
 manual/examples/background-v01.html             |  1 -
 manual/examples/background.html                 |  1 -
 manual/examples/postprocessing-3dlut-prep.html  |  1 -
 ...stprocessing-adobe-lut-to-png-converter.html |  1 -
 manual/examples/postprocessing-custom.html      |  1 -
 manual/ja/post-processing.html                  |  3 ---
 manual/ko/post-processing.html                  |  2 --
 manual/zh/post-processing.html                  |  2 --
 9 files changed, 9 insertions(+), 20 deletions(-)

diff --git a/manual/en/post-processing.html b/manual/en/post-processing.html
index 19e1c40fbfc33f..bcf918ce154f90 100644
--- a/manual/en/post-processing.html
+++ b/manual/en/post-processing.html
@@ -67,8 +67,7 @@ 
clear

 
Whether or not to clear before rendering this pass

 
renderToScreen

 
Whether or not to render to the canvas instead the current destination render
-target. Usually you need to set this to true on the last pass you add to your
-EffectComposer.

+target. In most use cases you do not set this flag explicitly since the last pass in the pass chain is automatically rendered to screen.

 
Let's put together a basic example. We'll start with the example from the
 article on responsiveness.

 
To that first we create an EffectComposer.

@@ -89,19 +88,21 @@ 
renderToScree
 );
 composer.addPass(bloomPass);
 

-
Finally we had a FilmPass that draws noise and scanlines on top of its input.

+
Next we had a FilmPass that draws noise and scanlines on top of its input.

 
const filmPass = new FilmPass(
     0.35,   // noise intensity
     0.025,  // scanline intensity
     648,    // scanline count
     false,  // grayscale
 );
-filmPass.renderToScreen = true;
 composer.addPass(filmPass);
 

-
Since the filmPass is the last pass we set its renderToScreen property to
-true to tell it to render to the canvas. Without setting this it would instead
-render to the next render target.

+
Finally we had a OutputPass which performs color space conversion to sRGB and optional tone mapping.
+This pass is usually the last pass of the pass chain.
+

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

 
To use these classes we need to import a bunch of scripts.

 
import {EffectComposer} from 'three/addons/postprocessing/EffectComposer.js';
 import {RenderPass} from 'three/addons/postprocessing/RenderPass.js';
@@ -109,7 +110,7 @@ 
renderToScree
 import {FilmPass} from 'three/addons/postprocessing/FilmPass.js';
 import {OutputPass} from 'three/addons/postprocessing/OutputPass.js';
 

-
For pretty much any post processing EffectComposer.js, and RenderPass.js
+
For pretty much any post processing EffectComposer.js, RenderPass.js and OutputPass.js
 are required.

 
The last things we need to do are to use EffectComposer.render instead of
 WebGLRenderer.render and to tell the EffectComposer to match the size of
diff --git a/manual/examples/background-v01.html b/manual/examples/background-v01.html
index 60ee99cd4a25de..a21161634175d2 100644
--- a/manual/examples/background-v01.html
+++ b/manual/examples/background-v01.html
@@ -68,7 +68,6 @@
 
 	}
 
-	renderer.outputColorSpace = THREE.SRGBColorSpace;
 	renderer.shadowMap.enabled = true;
 
 	const hemiLight = new THREE.HemisphereLight( 0xffffff, 0xffffff, 2 );
diff --git a/manual/examples/background.html b/manual/examples/background.html
index 2ab8ada98f9bb3..4585cddabbdda0 100644
--- a/manual/examples/background.html
+++ b/manual/examples/background.html
@@ -69,7 +69,6 @@
 
 	}
 
-	renderer.outputColorSpace = THREE.SRGBColorSpace;
 	renderer.shadowMap.enabled = true;
 
 	const hemiLight = new THREE.HemisphereLight( 0xffffff, 0xffffff, 2 );
diff --git a/manual/examples/postprocessing-3dlut-prep.html b/manual/examples/postprocessing-3dlut-prep.html
index 77e6bb0ce5277b..f3e5b01276027e 100644
--- a/manual/examples/postprocessing-3dlut-prep.html
+++ b/manual/examples/postprocessing-3dlut-prep.html
@@ -42,7 +42,6 @@
 
 	const canvas = document.querySelector( '#c' );
 	const renderer = new THREE.WebGLRenderer( { antialias: true, canvas } );
-	renderer.outputColorSpace = THREE.SRGBColorSpace;
 	renderer.autoClearColor = false;
 
 	const fov = 45;
diff --git a/manual/examples/postprocessing-adobe-lut-to-png-converter.html b/manual/examples/postprocessing-adobe-lut-to-png-converter.html
index 78eb40081a976c..a5a134db2b3c4c 100644
--- a/manual/examples/postprocessing-adobe-lut-to-png-converter.html
+++ b/manual/examples/postprocessing-adobe-lut-to-png-converter.html
@@ -181,7 +181,6 @@ 
Adobe LUT to PNG converter

 	};
 
 	const effectLUT = new ShaderPass( lutShader );
-	effectLUT.renderToScreen = true;
 
 	const renderBG = new RenderPass( sceneBG, cameraBG );
 
diff --git a/manual/examples/postprocessing-custom.html b/manual/examples/postprocessing-custom.html
index 8e795ad5181145..61e9368ed8afd8 100644
--- a/manual/examples/postprocessing-custom.html
+++ b/manual/examples/postprocessing-custom.html
@@ -118,7 +118,6 @@
 	};
 
 	const colorPass = new ShaderPass( colorShader );
-	colorPass.renderToScreen = true;
 	composer.addPass( colorPass );
 
 	function resizeRendererToDisplaySize( renderer ) {
diff --git a/manual/ja/post-processing.html b/manual/ja/post-processing.html
index 2131f52a102218..1e7b1fe2b0fab2 100644
--- a/manual/ja/post-processing.html
+++ b/manual/ja/post-processing.html
@@ -89,11 +89,8 @@ 
renderToScree
     648,    // scanline count
     false,  // grayscale
 );
-filmPass.renderToScreen = true;
 composer.addPass(filmPass);
 

-
filmPass は最後のPassなので、renderToScreen プロパティをtrueに設定し、キャンバスにレンダリングするようにします。
-この設定がないと次のレンダーターゲットにレンダリングされます。

 
これらのクラスを使用するには、以下をインポートする必要があります。

 
import {EffectComposer} from 'three/addons/postprocessing/EffectComposer.js';
 import {RenderPass} from 'three/addons/postprocessing/RenderPass.js';
diff --git a/manual/ko/post-processing.html b/manual/ko/post-processing.html
index 7c383d3b5f0bfb..fe8ac92c952ab1 100644
--- a/manual/ko/post-processing.html
+++ b/manual/ko/post-processing.html
@@ -73,10 +73,8 @@ 
renderToScree
     648,    // 스캔라인 개수
     false,  // 흑백
 );
-filmPass.renderToScreen = true;
 composer.addPass(filmPass);
 

-
filmPass가 마지막 pass이기에 캔버스에 결과를 바로 렌더링하도록 renderToScreen 옵션을 true로 설정했습니다. 이 옵션을 설정하지 않으면 캔버스가 아닌 다음 렌더 타겟에 장면을 렌더링할 거예요.

 
또 이 클래스들을 사용하기 위해 여러 스크립트를 불러와야 합니다.

 
import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
 import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
diff --git a/manual/zh/post-processing.html b/manual/zh/post-processing.html
index 12265feaf94687..a4df8e7fe92ea4 100644
--- a/manual/zh/post-processing.html
+++ b/manual/zh/post-processing.html
@@ -72,10 +72,8 @@ 
renderToScreen

     648,    // scanline count
     false,  // grayscale
 );
-filmPass.renderToScreen = true;
 composer.addPass(filmPass);
 

-
由于filmPass是最后一次传递，我们将其renderToScreen属性设置为true来告诉它渲染到画布。如果不设置它，它将渲染到下一个渲染目标。

 
为了使用这些类,我们需要导入一些js模块

 
import {EffectComposer} from 'three/addons/postprocessing/EffectComposer.js';
 import {RenderPass} from 'three/addons/postprocessing/RenderPass.js';