You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
254 lines
7.2 KiB
254 lines
7.2 KiB
2 years ago
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<title>Three.js - postprocessing - 3DLUT w/loader</title>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
|
||
|
|
<style>
|
||
|
|
html, body {
|
||
|
|
min-height: 100%;
|
||
|
|
font-family: monospace;
|
||
|
|
background: #222;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
canvas {
|
||
|
|
min-width: 512px;
|
||
|
|
min-height: 64px;
|
||
|
|
image-rendering: pixelated;
|
||
|
|
}
|
||
|
|
#cube {
|
||
|
|
max-width: calc(100% - 20px);
|
||
|
|
overflow: auto;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1>Adobe LUT to PNG converter</h1>
|
||
|
|
<p>Drag and drop a LUT file here</p>
|
||
|
|
<div>size:<input id="size" type="number" value="8" min="2" max="64"/></div>
|
||
|
|
<p id="result"></p>
|
||
|
|
<p><button type="button">Save...</button></p>
|
||
|
|
<div id="cube"><canvas id="c"></canvas></div>
|
||
|
|
</body>
|
||
|
|
<script type="importmap">
|
||
|
|
{
|
||
|
|
"imports": {
|
||
|
|
"three": "../../build/three.module.js",
|
||
|
|
"three/addons/": "../../examples/jsm/"
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<script type="module">
|
||
|
|
import * as THREE from 'three';
|
||
|
|
import * as lutParser from './resources/lut-reader.js';
|
||
|
|
import * as dragAndDrop from './resources/drag-and-drop.js';
|
||
|
|
import {EffectComposer} from 'three/addons/postprocessing/EffectComposer.js';
|
||
|
|
import {RenderPass} from 'three/addons/postprocessing/RenderPass.js';
|
||
|
|
import {ShaderPass} from 'three/addons/postprocessing/ShaderPass.js';
|
||
|
|
|
||
|
|
function main() {
|
||
|
|
const canvas = document.querySelector('#c');
|
||
|
|
const renderer = new THREE.WebGLRenderer({canvas});
|
||
|
|
|
||
|
|
const makeIdentityLutTexture = function() {
|
||
|
|
const identityLUT = new Uint8Array([
|
||
|
|
0, 0, 0, 255, // black
|
||
|
|
255, 0, 0, 255, // red
|
||
|
|
0, 0, 255, 255, // blue
|
||
|
|
255, 0, 255, 255, // magenta
|
||
|
|
0, 255, 0, 255, // green
|
||
|
|
255, 255, 0, 255, // yellow
|
||
|
|
0, 255, 255, 255, // cyan
|
||
|
|
255, 255, 255, 255, // white
|
||
|
|
]);
|
||
|
|
|
||
|
|
return function(filter) {
|
||
|
|
const texture = new THREE.DataTexture(identityLUT, 4, 2);
|
||
|
|
texture.minFilter = filter;
|
||
|
|
texture.magFilter = filter;
|
||
|
|
texture.needsUpdate = true;
|
||
|
|
texture.flipY = false;
|
||
|
|
return texture;
|
||
|
|
};
|
||
|
|
}();
|
||
|
|
|
||
|
|
const sceneBG = new THREE.Scene();
|
||
|
|
const cameraBG = new THREE.OrthographicCamera(-1, 1, 1, -1, -1, 1);
|
||
|
|
|
||
|
|
const ctx = document.createElement('canvas').getContext('2d');
|
||
|
|
function drawColorCubeImage(ctx, size) {
|
||
|
|
const canvas = ctx.canvas;
|
||
|
|
canvas.width = size * size;
|
||
|
|
canvas.height = size;
|
||
|
|
|
||
|
|
for (let zz = 0; zz < size; ++zz) {
|
||
|
|
for (let yy = 0; yy < size; ++yy) {
|
||
|
|
for (let xx = 0; xx < size; ++xx) {
|
||
|
|
const r = Math.floor(xx / (size - 1) * 255);
|
||
|
|
const g = Math.floor(yy / (size - 1) * 255);
|
||
|
|
const b = Math.floor(zz / (size - 1) * 255);
|
||
|
|
ctx.fillStyle = `rgb(${r},${g},${b})`;
|
||
|
|
ctx.fillRect(zz * size + xx, yy, 1, 1);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const idTexture = new THREE.CanvasTexture(ctx.canvas);
|
||
|
|
idTexture.magFilter = THREE.NearestFilter;
|
||
|
|
idTexture.minFilter = THREE.NearestFilter;
|
||
|
|
|
||
|
|
{
|
||
|
|
const planeGeo = new THREE.PlaneGeometry(2, 2);
|
||
|
|
const planeMat = new THREE.MeshBasicMaterial({
|
||
|
|
map: idTexture,
|
||
|
|
depthTest: false,
|
||
|
|
});
|
||
|
|
sceneBG.add(new THREE.Mesh(planeGeo, planeMat));
|
||
|
|
}
|
||
|
|
|
||
|
|
const lutShader = {
|
||
|
|
uniforms: {
|
||
|
|
tDiffuse: { value: null },
|
||
|
|
lutMap: { value: null },
|
||
|
|
lutMapSize: { value: 1, },
|
||
|
|
},
|
||
|
|
vertexShader: `
|
||
|
|
varying vec2 vUv;
|
||
|
|
void main() {
|
||
|
|
vUv = uv;
|
||
|
|
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
|
||
|
|
}
|
||
|
|
`,
|
||
|
|
fragmentShader: `
|
||
|
|
#include <common>
|
||
|
|
|
||
|
|
#define FILTER_LUT true
|
||
|
|
|
||
|
|
uniform sampler2D tDiffuse;
|
||
|
|
uniform sampler2D lutMap;
|
||
|
|
uniform float lutMapSize;
|
||
|
|
|
||
|
|
varying vec2 vUv;
|
||
|
|
|
||
|
|
vec4 sampleAs3DTexture(sampler2D tex, vec3 texCoord, float size) {
|
||
|
|
float sliceSize = 1.0 / size; // space of 1 slice
|
||
|
|
float slicePixelSize = sliceSize / size; // space of 1 pixel
|
||
|
|
float width = size - 1.0;
|
||
|
|
float sliceInnerSize = slicePixelSize * width; // space of size pixels
|
||
|
|
float zSlice0 = floor( texCoord.z * width);
|
||
|
|
float zSlice1 = min( zSlice0 + 1.0, width);
|
||
|
|
float xOffset = slicePixelSize * 0.5 + texCoord.x * sliceInnerSize;
|
||
|
|
float yRange = (texCoord.y * width + 0.5) / size;
|
||
|
|
float s0 = xOffset + (zSlice0 * sliceSize);
|
||
|
|
|
||
|
|
#ifdef FILTER_LUT
|
||
|
|
|
||
|
|
float s1 = xOffset + (zSlice1 * sliceSize);
|
||
|
|
vec4 slice0Color = texture2D(tex, vec2(s0, yRange));
|
||
|
|
vec4 slice1Color = texture2D(tex, vec2(s1, yRange));
|
||
|
|
float zOffset = mod(texCoord.z * width, 1.0);
|
||
|
|
return mix(slice0Color, slice1Color, zOffset);
|
||
|
|
|
||
|
|
#else
|
||
|
|
|
||
|
|
return texture2D(tex, vec2( s0, yRange));
|
||
|
|
|
||
|
|
#endif
|
||
|
|
}
|
||
|
|
|
||
|
|
void main() {
|
||
|
|
vec4 originalColor = texture2D(tDiffuse, vUv);
|
||
|
|
gl_FragColor = sampleAs3DTexture(lutMap, originalColor.xyz, lutMapSize);
|
||
|
|
}
|
||
|
|
`,
|
||
|
|
};
|
||
|
|
|
||
|
|
const effectLUT = new ShaderPass(lutShader);
|
||
|
|
effectLUT.renderToScreen = true;
|
||
|
|
|
||
|
|
const renderBG = new RenderPass(sceneBG, cameraBG);
|
||
|
|
|
||
|
|
const rtParameters = {
|
||
|
|
minFilter: THREE.NearestFilter,
|
||
|
|
magFilter: THREE.NearestFilter
|
||
|
|
};
|
||
|
|
const composer = new EffectComposer(renderer, new THREE.WebGLRenderTarget(1, 1, rtParameters));
|
||
|
|
|
||
|
|
composer.addPass(renderBG);
|
||
|
|
composer.addPass(effectLUT);
|
||
|
|
|
||
|
|
let name = 'identity';
|
||
|
|
const lutTexture = makeIdentityLutTexture(THREE.LinearFilter);
|
||
|
|
effectLUT.uniforms.lutMap.value = lutTexture;
|
||
|
|
effectLUT.uniforms.lutMapSize.value = 2;
|
||
|
|
|
||
|
|
const sizeElem = document.querySelector('#size');
|
||
|
|
sizeElem.addEventListener('change', render);
|
||
|
|
|
||
|
|
function render() {
|
||
|
|
const size = parseInt(sizeElem.value);
|
||
|
|
renderer.setSize(size * size, size, false);
|
||
|
|
composer.setSize(size * size, size);
|
||
|
|
|
||
|
|
drawColorCubeImage(ctx, size);
|
||
|
|
idTexture.needsUpdate = true;
|
||
|
|
|
||
|
|
composer.render(0);
|
||
|
|
}
|
||
|
|
render();
|
||
|
|
|
||
|
|
dragAndDrop.setup({msg: 'Drop LUT File here'});
|
||
|
|
dragAndDrop.onDropFile(readLUTFile);
|
||
|
|
|
||
|
|
function ext(s) {
|
||
|
|
const period = s.lastIndexOf('.');
|
||
|
|
return s.slice(period + 1);
|
||
|
|
}
|
||
|
|
|
||
|
|
function readLUTFile(file) {
|
||
|
|
const reader = new FileReader();
|
||
|
|
reader.onload = (e) => {
|
||
|
|
const type = ext(file.name);
|
||
|
|
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.needsUpdate = true;
|
||
|
|
|
||
|
|
render();
|
||
|
|
name = `${file.name || lut.name || 'untitled'}`;
|
||
|
|
document.querySelector('#result').textContent = `loaded: ${name}`;
|
||
|
|
};
|
||
|
|
|
||
|
|
reader.readAsText(file);
|
||
|
|
}
|
||
|
|
|
||
|
|
const saveData = (function() {
|
||
|
|
const a = document.createElement('a');
|
||
|
|
document.body.appendChild(a);
|
||
|
|
a.style.display = 'none';
|
||
|
|
return function saveData(blob, fileName) {
|
||
|
|
const url = window.URL.createObjectURL(blob);
|
||
|
|
a.href = url;
|
||
|
|
a.download = fileName;
|
||
|
|
a.click();
|
||
|
|
};
|
||
|
|
}());
|
||
|
|
|
||
|
|
document.querySelector('button').addEventListener('click', () => {
|
||
|
|
render();
|
||
|
|
renderer.domElement.toBlob((blob) => {
|
||
|
|
saveData(blob, `${name}-s${renderer.domElement.height}.png`);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
main();
|
||
|
|
</script>
|
||
|
|
</html>
|