Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Manual: Improve PostProcessing page. #27884

Merged
merged 1 commit into from Mar 8, 2024
Merged

Manual: Improve PostProcessing page. #27884

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
14 changes: 4 additions & 10 deletions manual/en/post-processing.html
View file
Open in desktop
Expand Up @@ -86,9 +86,7 @@ <h2 id="-rendertoscreen-"><code class="notranslate" translate="no">renderToScree
</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);
Expand Down Expand Up @@ -164,10 +162,8 @@ <h2 id="-rendertoscreen-"><code class="notranslate" translate="no">renderToScree
<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>
Expand All @@ -183,9 +179,7 @@ <h2 id="-rendertoscreen-"><code class="notranslate" translate="no">renderToScree
{
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>
Expand Down
8 changes: 2 additions & 6 deletions manual/examples/postprocessing-gui.html
View file
Open in desktop
Expand Up @@ -98,9 +98,7 @@
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 );
Expand Down Expand Up @@ -137,9 +135,7 @@

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();

}
Expand Down
4 changes: 1 addition & 3 deletions manual/examples/postprocessing.html
View file
Open in desktop
Expand Up @@ -97,9 +97,7 @@
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 );
Expand Down
14 changes: 4 additions & 10 deletions manual/ja/post-processing.html
View file
Open in desktop
Expand Up @@ -80,9 +80,7 @@ <h2 id="-rendertoscreen-"><code class="notranslate" translate="no">renderToScree
</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);
Expand Down Expand Up @@ -144,10 +142,8 @@ <h2 id="-rendertoscreen-"><code class="notranslate" translate="no">renderToScree
<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>
Expand All @@ -163,9 +159,7 @@ <h2 id="-rendertoscreen-"><code class="notranslate" translate="no">renderToScree
{
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>
Expand Down
14 changes: 4 additions & 10 deletions manual/ko/post-processing.html
View file
Open in desktop
Expand Up @@ -64,9 +64,7 @@ <h2 id="-rendertoscreen-"><code class="notranslate" translate="no">renderToScree
</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);
Expand Down Expand Up @@ -126,10 +124,8 @@ <h2 id="-rendertoscreen-"><code class="notranslate" translate="no">renderToScree
</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';
Expand All @@ -144,9 +140,7 @@ <h2 id="-rendertoscreen-"><code class="notranslate" translate="no">renderToScree
{
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>
Expand Down
14 changes: 4 additions & 10 deletions manual/zh/post-processing.html
View file
Open in desktop
Expand Up @@ -63,9 +63,7 @@ <h2 id="rendertoscreen">renderToScreen</h2>
</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);
Expand Down Expand Up @@ -123,10 +121,8 @@ <h2 id="rendertoscreen">renderToScreen</h2>
<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>
Expand All @@ -142,9 +138,7 @@ <h2 id="rendertoscreen">renderToScreen</h2>
{
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>
Expand Down