Manual: More clean up. (#23387)

manual/en/post-processing-3dlut.html

@@ -166,9 +166,7 @@ const lutNearestShader = {
 <p>To generate the second shader we comment out that line.</p>
 <p>Then we use them to make 2 custom effects</p>
 <pre class="prettyprint showlinemods notranslate lang-js" translate="no">const effectLUT = new THREE.ShaderPass(lutShader);
-effectLUT.renderToScreen = true;
 const effectLUTNearest = new THREE.ShaderPass(lutNearestShader);
-effectLUTNearest.renderToScreen = true;
 </pre>
 <p>Translating our existing code that draws the background as a separate scene we a <code class="notranslate" translate="no">RenderPass</code> for both the scene drawing the glTF and the scene drawing the background.</p>
 <pre class="prettyprint showlinemods notranslate lang-js" translate="no">const renderModel = new THREE.RenderPass(scene, camera);
@@ -176,17 +174,14 @@ renderModel.clear = false;  // so we don't clear out the background
 const renderBG = new THREE.RenderPass(sceneBG, cameraBG);
 </pre>
 <p>and we can setup our <code class="notranslate" translate="no">EffectComposer</code> to use all the passes</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const rtParameters = {
-  minFilter: THREE.LinearFilter,
-  magFilter: THREE.LinearFilter,
-  format: THREE.RGBFormat,
-};
-const composer = new THREE.EffectComposer(renderer, new THREE.WebGLRenderTarget(1, 1, rtParameters));
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const composer = new THREE.EffectComposer(renderer);
 
 composer.addPass(renderBG);
 composer.addPass(renderModel);
 composer.addPass(effectLUT);
 composer.addPass(effectLUTNearest);
+composer.addPass(effectLUTNearest);
+composer.addPass(gammaPass);
 </pre>
 <p>Let's make some GUI code to select one lut or the other</p>
 <pre class="prettyprint showlinemods notranslate lang-js" translate="no">const lutNameIndexMap = {};
@@ -466,11 +461,11 @@ updateGUI();
         </div>
       </div>
     </div>
-  
+
   <script src="/manual/resources/prettify.js"></script>
   <script src="/manual/resources/lesson.js"></script>
 
 
 
 
-</body></html>
+</body></html>

manual/examples/postprocessing-3dlut-identity.html

@@ -248,16 +248,15 @@ function main() {
   const renderModel = new RenderPass(scene, camera);
   renderModel.clear = false;  // so we don't clear out the background
   const renderBG = new RenderPass(sceneBG, cameraBG);
+  const gammaPass = new ShaderPass(GammaCorrectionShader);
 
-  renderModel.clear = false;
-
-  const composer = new EffectComposer(renderer, new THREE.WebGLRenderTarget(1, 1));
+  const composer = new EffectComposer(renderer);
 
   composer.addPass(renderBG);
   composer.addPass(renderModel);
   composer.addPass(effectLUT);
   composer.addPass(effectLUTNearest);
-  composer.addPass(new ShaderPass(GammaCorrectionShader));
+  composer.addPass(gammaPass);
 
   function resizeRendererToDisplaySize(renderer) {
     const canvas = renderer.domElement;

manual/examples/postprocessing-3dlut-w-loader.html

@@ -98,8 +98,7 @@ function main() {
 
     return function(filter) {
       const texture = new THREE.DataTexture(identityLUT, 4, 2);
-      texture.minFilter = filter;
-      texture.magFilter = filter;
+      texture.minFilter = texture.magFilter = filter ? THREE.LinearFilter : THREE.NearestFilter;
       texture.needsUpdate = true;
       texture.flipY = false;
       return texture;
@@ -111,21 +110,16 @@ function main() {
     const ctx = document.createElement('canvas').getContext('2d');
 
     return function(info) {
-      const texture = makeIdentityLutTexture(
-          info.filter ? THREE.LinearFilter : THREE.NearestFilter);
+      const lutSize = info.size;
+      const width = lutSize * lutSize;
+      const height = lutSize;
+      const texture = new THREE.DataTexture(new Uint8Array(width * height), width, height);
+      texture.minFilter = texture.magFilter = info.filter ? THREE.LinearFilter : THREE.NearestFilter;
+      texture.flipY = false;
 
       if (info.url) {
-        const lutSize = info.size;
-
-        // set the size to 2 (the identity size). We'll restore it when the
-        // image has loaded. This way the code using the lut doesn't have to
-        // care if the image has loaded or not
-        info.size = 2;
 
         imgLoader.load(info.url, function(image) {
-          const width = lutSize * lutSize;
-          const height = lutSize;
-          info.size = lutSize;
           ctx.canvas.width = width;
           ctx.canvas.height = height;
           ctx.drawImage(image, 0, 0);
@@ -157,9 +151,10 @@ function main() {
         info.size = parseInt(m[1]);
         info.filter = info.filter === undefined ? m[2] !== 'n' : info.filter;
       }
+      info.texture = makeLUTTexture(info);
+    } else {
+      info.texture = makeIdentityLutTexture(info.filter);
     }
-
-    info.texture = makeLUTTexture(info);
   });
 
   let lutNameIndexMap = {};
@@ -332,14 +327,15 @@ function main() {
   const renderModel = new RenderPass(scene, camera);
   renderModel.clear = false;  // so we don't clear out the background
   const renderBG = new RenderPass(sceneBG, cameraBG);
+  const gammaPass = new ShaderPass(GammaCorrectionShader);
 
-  const composer = new EffectComposer(renderer, new THREE.WebGLRenderTarget(1, 1));
+  const composer = new EffectComposer(renderer);
 
   composer.addPass(renderBG);
   composer.addPass(renderModel);
   composer.addPass(effectLUT);
   composer.addPass(effectLUTNearest);
-  composer.addPass(new ShaderPass(GammaCorrectionShader));
+  composer.addPass(gammaPass);
 
   function resizeRendererToDisplaySize(renderer) {
     const canvas = renderer.domElement;

manual/examples/postprocessing-3dlut.html

@@ -100,8 +100,7 @@ function main() {
 
     return function(filter) {
       const texture = new THREE.DataTexture(identityLUT, 4, 2);
-      texture.minFilter = filter;
-      texture.magFilter = filter;
+      texture.minFilter = texture.magFilter = filter ? THREE.LinearFilter : THREE.NearestFilter;
       texture.needsUpdate = true;
       texture.flipY = false;
       return texture;
@@ -113,21 +112,16 @@ function main() {
     const ctx = document.createElement('canvas').getContext('2d');
 
     return function(info) {
-      const texture = makeIdentityLutTexture(
-          info.filter ? THREE.LinearFilter : THREE.NearestFilter);
+      const lutSize = info.size;
+      const width = lutSize * lutSize;
+      const height = lutSize;
+      const texture = new THREE.DataTexture(new Uint8Array(width * height), width, height);
+      texture.minFilter = texture.magFilter = info.filter ? THREE.LinearFilter : THREE.NearestFilter;
+      texture.flipY = false;
 
       if (info.url) {
-        const lutSize = info.size;
-
-        // set the size to 2 (the identity size). We'll restore it when the
-        // image has loaded. This way the code using the lut doesn't have to
-        // care if the image has loaded or not
-        info.size = 2;
 
         imgLoader.load(info.url, function(image) {
-          const width = lutSize * lutSize;
-          const height = lutSize;
-          info.size = lutSize;
           ctx.canvas.width = width;
           ctx.canvas.height = height;
           ctx.drawImage(image, 0, 0);
@@ -159,9 +153,10 @@ function main() {
         info.size = parseInt(m[1]);
         info.filter = info.filter === undefined ? m[2] !== 'n' : info.filter;
       }
+      info.texture = makeLUTTexture(info);
+    } else {
+      info.texture = makeIdentityLutTexture(info.filter);
     }
-
-    info.texture = makeLUTTexture(info);
   });
 
   const lutNameIndexMap = {};
@@ -319,14 +314,15 @@ function main() {
   const renderModel = new RenderPass(scene, camera);
   renderModel.clear = false;  // so we don't clear out the background
   const renderBG = new RenderPass(sceneBG, cameraBG);
+  const gammaPass = new ShaderPass(GammaCorrectionShader);
 
-  const composer = new EffectComposer(renderer, new THREE.WebGLRenderTarget(1, 1));
+  const composer = new EffectComposer(renderer);
 
   composer.addPass(renderBG);
   composer.addPass(renderModel);
   composer.addPass(effectLUT);
   composer.addPass(effectLUTNearest);
-  composer.addPass(new ShaderPass(GammaCorrectionShader));
+  composer.addPass(gammaPass);
 
   function resizeRendererToDisplaySize(renderer) {
     const canvas = renderer.domElement;

manual/examples/postprocessing-adobe-lut-to-png-converter.html

@@ -63,7 +63,7 @@ function main() {
     ]);
 
     return function(filter) {
-      const texture = new THREE.DataTexture(identityLUT, 4, 2, THREE.RGBAFormat);
+      const texture = new THREE.DataTexture(identityLUT, 4, 2);
       texture.minFilter = filter;
       texture.magFilter = filter;
       texture.needsUpdate = true;

manual/ja/post-processing-3dlut.html

@@ -186,9 +186,7 @@ const lutNearestShader = {
 <p>2番目のシェーダーを生成するためにその行をコメントアウトします。</p>
 <p>これらを使用して2つのカスタムエフェクトを作成します。</p>
 <pre class="prettyprint showlinemods notranslate lang-js" translate="no">const effectLUT = new THREE.ShaderPass(lutShader);
-effectLUT.renderToScreen = true;
 const effectLUTNearest = new THREE.ShaderPass(lutNearestShader);
-effectLUTNearest.renderToScreen = true;
 </pre>
 <p>背景を別のシーンに描画する既存コードを変更し、glTFと背景を描画するシーンの両方に <code class="notranslate" translate="no">RenderPass</code> を適用します。</p>
 <pre class="prettyprint showlinemods notranslate lang-js" translate="no">const renderModel = new THREE.RenderPass(scene, camera);
@@ -196,17 +194,13 @@ renderModel.clear = false;  // so we don't clear out the background
 const renderBG = new THREE.RenderPass(sceneBG, cameraBG);
 </pre>
 <p>全てのパスを使用するように <code class="notranslate" translate="no">EffectComposer</code> を設定できます。</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const rtParameters = {
-  minFilter: THREE.LinearFilter,
-  magFilter: THREE.LinearFilter,
-  format: THREE.RGBFormat,
-};
-const composer = new THREE.EffectComposer(renderer, new THREE.WebGLRenderTarget(1, 1, rtParameters));
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const composer = new THREE.EffectComposer(renderer);
 
 composer.addPass(renderBG);
 composer.addPass(renderModel);
 composer.addPass(effectLUT);
 composer.addPass(effectLUTNearest);
+composer.addPass(gammaPass);
 </pre>
 <p>LUTを選択するためのGUIコードを作ってみましょう。</p>
 <pre class="prettyprint showlinemods notranslate lang-js" translate="no">const lutNameIndexMap = {};
@@ -510,11 +504,11 @@ updateGUI();
         </div>
       </div>
     </div>
-  
+
   <script src="/manual/resources/prettify.js"></script>
   <script src="/manual/resources/lesson.js"></script>
 
 
 
 
-</body></html>
+</body></html>

manual/ko/post-processing-3dlut.html

@@ -167,9 +167,7 @@ const lutNearestShader = {
 <p>주석 처리했던 두 번째 쉐이더를 생성하기 위한 것입니다.</p>
 <p>그리고 각 쉐이더로 <code class="notranslate" translate="no">Pass</code>를 만듭니다.</p>
 <pre class="prettyprint showlinemods notranslate lang-js" translate="no">const effectLUT = new THREE.ShaderPass(lutShader);
-effectLUT.renderToScreen = true;
 const effectLUTNearest = new THREE.ShaderPass(lutNearestShader);
-effectLUTNearest.renderToScreen = true;
 </pre>
 <p>기존에 배경과 glTF를 별도 장면으로 분리했으므로 각 장면의 <code class="notranslate" translate="no">RenderPass</code>를 따로 생성합니다.</p>
 <pre class="prettyprint showlinemods notranslate lang-js" translate="no">const renderModel = new THREE.RenderPass(scene, camera);
@@ -178,17 +176,13 @@ const renderBG = new THREE.RenderPass(sceneBG, cameraBG);
 </pre>
 <p>다음으로 사용할 pass*를 <code class="notranslate" translate="no">EffectComposer</code>에 추가합니다.</p>
 <p>※ 편의상 <code class="notranslate" translate="no">Pass</code> 인스턴스를 pass로 번역합니다.</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const rtParameters = {
-  minFilter: THREE.LinearFilter,
-  magFilter: THREE.LinearFilter,
-  format: THREE.RGBFormat,
-};
-const composer = new THREE.EffectComposer(renderer, new THREE.WebGLRenderTarget(1, 1, rtParameters));
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const composer = new THREE.EffectComposer(renderer);
 
 composer.addPass(renderBG);
 composer.addPass(renderModel);
 composer.addPass(effectLUT);
 composer.addPass(effectLUTNearest);
+composer.addPass(gammaPass);
 </pre>
 <p>GUI를 만들어 LUT를 바꿀 수 있도록 합니다.</p>
 <pre class="prettyprint showlinemods notranslate lang-js" translate="no">const lutNameIndexMap = {};
@@ -332,7 +326,7 @@ drawColorCubeImage(ctx, 8);
 +lutTextures.forEach((info) =&gt; {
 +  // 사이즈값이 없다면 사이즈 정보를 파일 이름에서 가져옵니다.
 +  if (!info.size) {
-+    /**    
++    /**
 +     * 파일 이름이 '-s&lt;숫자&gt;[n]' 이렇게 끝난다고 가정합니다.
 +     * &lt;숫자&gt;는 3DLUT 정육면체의 크기입니다.
 +     * [n]은 '필터링 없음' 또는 'nearest'를 의미합니다.
@@ -470,11 +464,11 @@ updateGUI();
         </div>
       </div>
     </div>
-  
+
   <script src="/manual/resources/prettify.js"></script>
   <script src="/manual/resources/lesson.js"></script>
 
 
 
 
-</body></html>
+</body></html>