Skip to content

Commit

Permalink
Manual: Fix lut-reader.js. (#23388)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Mugen87
Mugen87 authored Jan 30, 2022
1 parent df235fe commit 28b4add
Show file tree
Hide file tree
Showing 6 changed files with 42 additions and 123 deletions.
38 changes: 8 additions & 30 deletions manual/en/post-processing-3dlut.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -283,21 +283,16 @@ <h1>Post Processing 3DLUT</h1>
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);
Expand Down Expand Up @@ -400,9 +395,9 @@ <h1>Post Processing 3DLUT</h1>
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;
Expand All @@ -422,23 +417,6 @@ <h1>Post Processing 3DLUT</h1>
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>
Expand Down
32 changes: 8 additions & 24 deletions manual/examples/postprocessing-3dlut-w-loader.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -157,31 +157,16 @@
}
});

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

Expand Down Expand Up @@ -400,9 +385,9 @@
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;
Expand All @@ -417,7 +402,6 @@
};
lutTextures.push(lutTexture);
lutSettings.lut = lutTextures.length - 1;
updateGUI();

};

Expand Down
3 changes: 1 addition & 2 deletions manual/examples/postprocessing-adobe-lut-to-png-converter.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -210,14 +210,13 @@ <h1>Adobe LUT to PNG converter</h1>
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();
Expand Down
14 changes: 9 additions & 5 deletions manual/examples/resources/lut-reader.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Expand All @@ -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;
}
}
}
Expand Down
38 changes: 8 additions & 30 deletions manual/ja/post-processing-3dlut.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -315,21 +315,16 @@ <h1>の3DLUTポストプロセス</h1>
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);
Expand Down Expand Up @@ -436,9 +431,9 @@ <h1>の3DLUTポストプロセス</h1>
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;
Expand All @@ -458,23 +453,6 @@ <h1>の3DLUTポストプロセス</h1>
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>
Expand Down
40 changes: 8 additions & 32 deletions manual/ko/post-processing-3dlut.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -283,23 +283,16 @@ <h1>3DLUT로 후처리하기</h1>
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);
Expand Down Expand Up @@ -404,9 +397,9 @@ <h1>3DLUT로 후처리하기</h1>
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;
Expand All @@ -426,23 +419,6 @@ <h1>3DLUT로 후처리하기</h1>
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>
Expand Down

0 comments on commit 28b4add

Please sign in to comment.