Manual: Fix lut-reader.js. (#23388)

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

@@ -283,21 +283,16 @@ separately and then copying and pasting it into the screen capture worked.</p>
   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);
@@ -400,9 +395,9 @@ function readLUTFile(file) {
   const reader = new FileReader();
   reader.onload = (e) =&gt; {
     const type = ext(file.name);
-    const lut = lutParser.lutTo2D3Drgb8(lutParser.parse(e.target.result, type));
+    const lut = lutParser.lutTo2D3Drgba8(lutParser.parse(e.target.result, type));
     const {size, data, name} = lut;
-    const texture = new THREE.DataTexture(data, size * size, size, THREE.RGBFormat);
+    const texture = new THREE.DataTexture(data, size * size, size);
     texture.minFilter = THREE.LinearFilter;
     texture.needsUpdate = true;
     texture.flipY = false;
@@ -422,23 +417,6 @@ function readLUTFile(file) {
   reader.readAsText(file);
 }
 </pre>
-<p>and we need to make the GUI update to include the new file(s)</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const lutSettings = {
-  lut: lutNameIndexMap.thermal,
-};
-const gui = new GUI({ width: 300 });
-gui.addFolder('Choose LUT or Drag&amp;Drop LUT File(s)');
-
-let lutGUI;
-function updateGUI() {
-  makeLutNameIndexMap();
-  if (lutGUI) {
-    gui.remove(lutGUI);
-  }
-  lutGUI = gui.add(lutSettings, 'lut', lutNameIndexMap);
-}
-updateGUI();
-</pre>
 <p>so you should be able to <a href="https://www.google.com/search?q=lut+files">download an Adobe LUT</a> and then drag and drop it on the example below.</p>
 <p></p><div translate="no" class="threejs_example_container notranslate">
   <div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/postprocessing-3dlut-w-loader.html"></iframe></div>

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

@@ -157,31 +157,16 @@ function main() {
     }
   });
 
-  let lutNameIndexMap = {};
-  function makeLutNameIndexMap() {
-    lutNameIndexMap = {};
-    lutTextures.forEach((info, ndx) => {
-      lutNameIndexMap[info.name] = ndx;
-    });
-  }
-  makeLutNameIndexMap();  // called so we can set lutSettings below
+  const lutNameIndexMap = {};
+  lutTextures.forEach((info, ndx) => {
+    lutNameIndexMap[info.name] = ndx;
+  });
 
   const lutSettings = {
-    dummy: () => {},
-    lut: lutNameIndexMap.thermal,
+    lut: lutNameIndexMap.custom,
   };
   const gui = new GUI({ width: 300 });
-  gui.addFolder('Choose LUT or Drag&Drop LUT File(s)');
-
-  let lutGUI;
-  function updateGUI() {
-    makeLutNameIndexMap();
-    if (lutGUI) {
-      gui.remove(lutGUI);
-    }
-    lutGUI = gui.add(lutSettings, 'lut', lutNameIndexMap);
-  }
-  updateGUI();
+  gui.add(lutSettings, 'lut', lutNameIndexMap);
 
   const scene = new THREE.Scene();
 
@@ -400,9 +385,9 @@ function main() {
     const reader = new FileReader();
     reader.onload = (e) => {
       const type = ext(file.name);
-      const lut = lutParser.lutTo2D3Drgb8(lutParser.parse(e.target.result, type));
+      const lut = lutParser.lutTo2D3Drgba8(lutParser.parse(e.target.result, type));
       const {size, data, name} = lut;
-      const texture = new THREE.DataTexture(data, size * size, size, THREE.RGBFormat);
+      const texture = new THREE.DataTexture(data, size * size, size);
       texture.magFilter = THREE.LinearFilter;
       texture.minFilter = THREE.LinearFilter;
       texture.needsUpdate = true;
@@ -417,7 +402,6 @@ function main() {
       };
       lutTextures.push(lutTexture);
       lutSettings.lut = lutTextures.length - 1;
-      updateGUI();
 
     };
 

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

@@ -210,14 +210,13 @@ function main() {
     const reader = new FileReader();
     reader.onload = (e) => {
       const type = ext(file.name);
-      const lut = lutParser.lutTo2D3Drgb8(lutParser.parse(e.target.result, type));
+      const lut = lutParser.lutTo2D3Drgba8(lutParser.parse(e.target.result, type));
 
       effectLUT.uniforms.lutMapSize.value = lut.size;
 
       lutTexture.image.data = lut.data;
       lutTexture.image.width = lut.size * lut.size;
       lutTexture.image.height = lut.size;
-      lutTexture.format = THREE.RGBFormat;
       lutTexture.needsUpdate = true;
 
       render();

manual/examples/resources/lut-reader.js

@@ -211,7 +211,7 @@ export function parse(str, format = 'cube') {
   return parser(str);
 }
 
-export function lutTo2D3Drgb8(lut) {
+export function lutTo2D3Drgba8(lut) {
   if (lut.type === '1D') {
     lut = lut1Dto3D(lut);
   }
@@ -220,21 +220,25 @@ export function lutTo2D3Drgb8(lut) {
     return max[ndx] - min;
   });
   const src = lut.data;
-  const data = new Uint8Array(src.length);
-  const offset = (offX, offY, offZ) => {
+  const data = new Uint8Array(size*size*size * 4);
+  const srcOffset = (offX, offY, offZ) => {
     return (offX + offY * size + offZ * size * size) * 3;
   };
+  const dOffset = (offX, offY, offZ) => {
+    return (offX + offY * size + offZ * size * size) * 4;
+  };
   for (let dz = 0; dz < size; ++dz) {
     for (let dy = 0; dy < size; ++dy) {
       for (let dx = 0; dx < size; ++dx) {
         const sx = dx;
         const sy = dz;
         const sz = dy;
-        const sOff = offset(sx, sy, sz);
-        const dOff = offset(dx, dy, dz);
+        const sOff = srcOffset(sx, sy, sz);
+        const dOff = dOffset(dx, dy, dz);
         data[dOff + 0] = (src[sOff + 0] - min[0]) / range[0] * 255;
         data[dOff + 1] = (src[sOff + 1] - min[1]) / range[1] * 255;
         data[dOff + 2] = (src[sOff + 2] - min[2]) / range[2] * 255;
+        data[dOff + 3] = 255;
       }
     }
   }

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

@@ -315,21 +315,16 @@ Photoshopの場合、使用できる調整のほとんどは画像 → 調整メ
   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);
@@ -436,9 +431,9 @@ function readLUTFile(file) {
   const reader = new FileReader();
   reader.onload = (e) => {
     const type = ext(file.name);
-    const lut = lutParser.lutTo2D3Drgb8(lutParser.parse(e.target.result, type));
+    const lut = lutParser.lutTo2D3Drgba8(lutParser.parse(e.target.result, type));
     const {size, data, name} = lut;
-    const texture = new THREE.DataTexture(data, size * size, size, THREE.RGBFormat);
+    const texture = new THREE.DataTexture(data, size * size, size);
     texture.minFilter = THREE.LinearFilter;
     texture.needsUpdate = true;
     texture.flipY = false;
@@ -458,23 +453,6 @@ function readLUTFile(file) {
   reader.readAsText(file);
 }
 </pre>
-<p>新しいファイルを含むようにGUIを更新する必要があります。</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const lutSettings = {
-  lut: lutNameIndexMap.thermal,
-};
-const gui = new GUI({ width: 300 });
-gui.addFolder('Choose LUT or Drag&amp;Drop LUT File(s)');
-
-let lutGUI;
-function updateGUI() {
-  makeLutNameIndexMap();
-  if (lutGUI) {
-    gui.remove(lutGUI);
-  }
-  lutGUI = gui.add(lutSettings, 'lut', lutNameIndexMap);
-}
-updateGUI();
-</pre>
 <p><a href="https://www.google.com/search?q=lut+files">Adobe LUTをダウンロード</a>し、下の例にドラッグ＆ドロップできます。</p>
 <p></p><div translate="no" class="threejs_example_container notranslate">
   <div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/postprocessing-3dlut-w-loader.html"></iframe></div>

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

@@ -283,23 +283,16 @@ drawColorCubeImage(ctx, 8);
   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;
-
-      /**
-       * 크기를 2(identity LUT의 크기)로 설정합니다. 이 크기는 나중에 이미지를
-       * 불러온 뒤 복원합니다. 이러면 lut를 사용하는 코드는 이미지의 적용 여부를
-       * 신경쓰지 않아도 됩니다.
-       **/
-      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);
@@ -404,9 +397,9 @@ function readLUTFile(file) {
   const reader = new FileReader();
   reader.onload = (e) => {
     const type = ext(file.name);
-    const lut = lutParser.lutTo2D3Drgb8(lutParser.parse(e.target.result, type));
+    const lut = lutParser.lutTo2D3Drgba8(lutParser.parse(e.target.result, type));
     const {size, data, name} = lut;
-    const texture = new THREE.DataTexture(data, size * size, size, THREE.RGBFormat);
+    const texture = new THREE.DataTexture(data, size * size, size);
     texture.minFilter = THREE.LinearFilter;
     texture.needsUpdate = true;
     texture.flipY = false;
@@ -426,23 +419,6 @@ function readLUTFile(file) {
   reader.readAsText(file);
 }
 </pre>
-<p>GUI가 새로 불러온 파일을 반영하도록 코드를 추가합니다.</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const lutSettings = {
-  lut: lutNameIndexMap.thermal,
-};
-const gui = new GUI({ width: 300 });
-gui.addFolder('Choose LUT or Drag&amp;Drop LUT File(s)');
-
-let lutGUI;
-function updateGUI() {
-  makeLutNameIndexMap();
-  if (lutGUI) {
-    gui.remove(lutGUI);
-  }
-  lutGUI = gui.add(lutSettings, 'lut', lutNameIndexMap);
-}
-updateGUI();
-</pre>
 <p>이제 <a href="https://www.google.com/search?q=lut+files">Adobe LUT 파일</a>을 다운해 아래 예제에 드래그-앤-드롭으로 불러올 수 있을 겁니다.</p>
 <p></p><div translate="no" class="threejs_example_container notranslate">
   <div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/postprocessing-3dlut-w-loader.html"></iframe></div>