Docs: Improve PostProcessing page (#27884)

manual/en/post-processing.html

@@ -86,9 +86,7 @@ composer.addPass(bloomPass);
 </pre>
 <p>Next we had a <code class="notranslate" translate="no">FilmPass</code> that draws noise and scanlines on top of its input.</p>
 <pre class="prettyprint showlinemods notranslate lang-js" translate="no">const filmPass = new FilmPass(
-    0.35,   // noise intensity
-    0.025,  // scanline intensity
-    648,    // scanline count
+    0.5,   // intensity
     false,  // grayscale
 );
 composer.addPass(filmPass);
@@ -164,10 +162,8 @@ I found this line:</p>
 <p>Similarly looking in
 <a href="https://github.com/mrdoob/three.js/blob/master/examples/jsm/postprocessing/FilmPass.js"><code class="notranslate" translate="no">FilmPass.js</code></a>
 I found these lines:</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">if ( grayscale !== undefined )    this.uniforms.grayscale.value = grayscale;
-if ( noiseIntensity !== undefined ) this.uniforms.nIntensity.value = noiseIntensity;
-if ( scanlinesIntensity !== undefined ) this.uniforms.sIntensity.value = scanlinesIntensity;
-if ( scanlinesCount !== undefined ) this.uniforms.sCount.value = scanlinesCount;
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">this.uniforms.intensity.value = intensity;
+this.uniforms.grayscale.value = grayscale;
 </pre>
 <p>So which makes it pretty clear how to set them.</p>
 <p>Let's make a quick GUI to set those values</p>
@@ -183,9 +179,7 @@ if ( scanlinesCount !== undefined ) this.uniforms.sCount.value = scanlinesCount;
 {
   const folder = gui.addFolder('FilmPass');
   folder.add(filmPass.uniforms.grayscale, 'value').name('grayscale');
-  folder.add(filmPass.uniforms.nIntensity, 'value', 0, 1).name('noise intensity');
-  folder.add(filmPass.uniforms.sIntensity, 'value', 0, 1).name('scanline intensity');
-  folder.add(filmPass.uniforms.sCount, 'value', 0, 1000).name('scanline count');
+  folder.add(filmPass.uniforms.intensity, 'value', 0, 1).name('intensity');
   folder.open();
 }
 </pre>

manual/examples/postprocessing-gui.html

@@ -98,9 +98,7 @@ function main() {
 	composer.addPass( bloomPass );
 
 	const filmPass = new FilmPass(
-		0.35, // noise intensity
-		0.025, // scanline intensity
-		648, // scanline count
+		0.5, // intensity
 		false, // grayscale
 	);
 	composer.addPass( filmPass );
@@ -137,9 +135,7 @@ function main() {
 
 		const folder = gui.addFolder( 'FilmPass' );
 		folder.add( filmPass.uniforms.grayscale, 'value' ).name( 'grayscale' );
-		folder.add( filmPass.uniforms.nIntensity, 'value', 0, 1 ).name( 'noise intensity' );
-		folder.add( filmPass.uniforms.sIntensity, 'value', 0, 1 ).name( 'scanline intensity' );
-		folder.add( filmPass.uniforms.sCount, 'value', 0, 1000 ).name( 'scanline count' );
+		folder.add( filmPass.uniforms.intensity, 'value', 0, 1 ).name( 'intensity' );
 		folder.open();
 
 	}

manual/examples/postprocessing.html

@@ -97,9 +97,7 @@ function main() {
 	composer.addPass( bloomPass );
 
 	const filmPass = new FilmPass(
-		0.35, // noise intensity
-		0.025, // scanline intensity
-		648, // scanline count
+		0.5, // intensity
 		false, // grayscale
 	);
 	composer.addPass( filmPass );

manual/ja/post-processing.html

@@ -80,9 +80,7 @@ composer.addPass(bloomPass);
 </pre>
 <p>最終的には、元の入力の上にノイズとスキャンラインを描画する <code class="notranslate" translate="no">FilmPass</code> ができました。</p>
 <pre class="prettyprint showlinemods notranslate lang-js" translate="no">const filmPass = new FilmPass(
-    0.35,   // noise intensity
-    0.025,  // scanline intensity
-    648,    // scanline count
+    0.5,   // intensity
     false,  // grayscale
 );
 composer.addPass(filmPass);
@@ -144,10 +142,8 @@ deltaTimeをアニメーションしてる様々なエフェクトに渡しま
 <pre class="prettyprint showlinemods notranslate lang-js" translate="no">bloomPass.copyUniforms.opacity.value = someValue;
 </pre>
 <p>同様に<a href="https://github.com/mrdoob/three.js/blob/master/examples/jsm/postprocessing/FilmPass.js"><code class="notranslate" translate="no">FilmPass.js</code></a>でこの行を見つけました。</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">if ( grayscale !== undefined )    this.uniforms.grayscale.value = grayscale;
-if ( noiseIntensity !== undefined ) this.uniforms.nIntensity.value = noiseIntensity;
-if ( scanlinesIntensity !== undefined ) this.uniforms.sIntensity.value = scanlinesIntensity;
-if ( scanlinesCount !== undefined ) this.uniforms.sCount.value = scanlinesCount;
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">this.uniforms.intensity.value = intensity;
+this.uniforms.grayscale.value = grayscale;
 </pre>
 <p>これでどのように設定するか、かなり明確になりました。</p>
 <p>これらの値を設定する簡単なGUIを作ってみましょう。</p>
@@ -163,9 +159,7 @@ if ( scanlinesCount !== undefined ) this.uniforms.sCount.value = scanlinesCount;
 {
   const folder = gui.addFolder('FilmPass');
   folder.add(filmPass.uniforms.grayscale, 'value').name('grayscale');
-  folder.add(filmPass.uniforms.nIntensity, 'value', 0, 1).name('noise intensity');
-  folder.add(filmPass.uniforms.sIntensity, 'value', 0, 1).name('scanline intensity');
-  folder.add(filmPass.uniforms.sCount, 'value', 0, 1000).name('scanline count');
+  folder.add(filmPass.uniforms.intensity, 'value', 0, 1).name('intensity');
   folder.open();
 }
 </pre>

manual/ko/post-processing.html

@@ -64,9 +64,7 @@ composer.addPass(bloomPass);
 </pre>
 <p>마지막으로 원본 장면에 노이즈와 스캔라인(scanline)을 추가하는 <code class="notranslate" translate="no">FilmPass</code>를 추가합니다.</p>
 <pre class="prettyprint showlinemods notranslate lang-js" translate="no">const filmPass = new FilmPass(
-    0.35,   // 노이즈 강도
-    0.025,  // 스캔라인 강도
-    648,    // 스캔라인 개수
+    0.5,   // 강도
     false,  // 흑백
 );
 composer.addPass(filmPass);
@@ -126,10 +124,8 @@ import {OutputPass} from 'three/addons/postprocessing/OutputPass.js';
 </pre>
 <p>마찬가지로 <a href="https://github.com/mrdoob/three.js/blob/master/examples/jsm/postprocessing/FilmPass.js"><code class="notranslate" translate="no">FilmPass.js</code></a>에서
 아래 코드를 찾았습니다.</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">if ( grayscale !== undefined )    this.uniforms.grayscale.value = grayscale;
-if ( noiseIntensity !== undefined ) this.uniforms.nIntensity.value = noiseIntensity;
-if ( scanlinesIntensity !== undefined ) this.uniforms.sIntensity.value = scanlinesIntensity;
-if ( scanlinesCount !== undefined ) this.uniforms.sCount.value = scanlinesCount;
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">this.uniforms.intensity.value = intensity;
+this.uniforms.grayscale.value = grayscale;
 </pre>
 <p>이제 어떻게 값을 지정해야 하는지 알았으니 이 값을 조작하는 GUI를 만들어봅시다.</p>
 <pre class="prettyprint showlinemods notranslate lang-js" translate="no">import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
@@ -144,9 +140,7 @@ if ( scanlinesCount !== undefined ) this.uniforms.sCount.value = scanlinesCount;
 {
   const folder = gui.addFolder('FilmPass');
   folder.add(filmPass.uniforms.grayscale, 'value').name('grayscale');
-  folder.add(filmPass.uniforms.nIntensity, 'value', 0, 1).name('noise intensity');
-  folder.add(filmPass.uniforms.sIntensity, 'value', 0, 1).name('scanline intensity');
-  folder.add(filmPass.uniforms.sCount, 'value', 0, 1000).name('scanline count');
+  folder.add(filmPass.uniforms.intensity, 'value', 0, 1).name('intensity');
   folder.open();
 }
 </pre>

manual/zh/post-processing.html

@@ -63,9 +63,7 @@ composer.addPass(bloomPass);
 </pre>
 <p>最后,我们用<code class="notranslate" translate="no">FilmPass</code>来添加噪点和扫描线。</p>
 <pre class="prettyprint showlinemods notranslate lang-js" translate="no">const filmPass = new FilmPass(
-    0.35,   // noise intensity
-    0.025,  // scanline intensity
-    648,    // scanline count
+    0.5,   // intensity
     false,  // grayscale
 );
 composer.addPass(filmPass);
@@ -123,10 +121,8 @@ import {OutputPass} from 'three/addons/postprocessing/OutputPass.js';
 <pre class="prettyprint showlinemods notranslate lang-js" translate="no">bloomPass.copyUniforms.opacity.value = someValue;
 </pre>
 <p>类似地，在<code class="notranslate" translate="no">FilmPass.js</code>中我发现这些代码</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">if ( grayscale !== undefined )    this.uniforms.grayscale.value = grayscale;
-if ( noiseIntensity !== undefined ) this.uniforms.nIntensity.value = noiseIntensity;
-if ( scanlinesIntensity !== undefined ) this.uniforms.sIntensity.value = scanlinesIntensity;
-if ( scanlinesCount !== undefined ) this.uniforms.sCount.value = scanlinesCount;
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">this.uniforms.intensity.value = intensity;
+this.uniforms.grayscale.value = grayscale;
 </pre>
 <p>这样就很清楚如何设置它们。</p>
 <p>让我们快速创建一个GUI来设置这些值</p>
@@ -142,9 +138,7 @@ if ( scanlinesCount !== undefined ) this.uniforms.sCount.value = scanlinesCount;
 {
   const folder = gui.addFolder('FilmPass');
   folder.add(filmPass.uniforms.grayscale, 'value').name('grayscale');
-  folder.add(filmPass.uniforms.nIntensity, 'value', 0, 1).name('noise intensity');
-  folder.add(filmPass.uniforms.sIntensity, 'value', 0, 1).name('scanline intensity');
-  folder.add(filmPass.uniforms.sCount, 'value', 0, 1000).name('scanline count');
+  folder.add(filmPass.uniforms.intensity, 'value', 0, 1).name('intensity');
   folder.open();
 }
 </pre>