Composer + LUT

by orion_prime

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r124/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.7/dat.gui.min.js"></script>
<!DOCTYPE html>
<html lang="en">

  <head>
    <title>three.js webgl - glTF loader</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <link type="text/css" rel="stylesheet" href="test.css">
  </head>

  <body>

    <div>
      <script src="https://threejs.org/build/three.js"></script>
      <script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
      <script src=" https://threejs.org/examples/js/loaders/RGBELoader.js"></script>
      <script src=" https://threejs.org/examples/js/loaders/GLTFLoader.js"></script>
      <script src="//cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"></script>

      <script src="https://threejs.org/examples/js/postprocessing/EffectComposer.js"></script>
      <script src="https://threejs.org/examples/js/postprocessing/RenderPass.js"></script>
      <script src="https://threejs.org/examples/js/postprocessing/ShaderPass.js"></script>
      <script src="https://threejs.org/examples/js/postprocessing/UnrealBloomPass.js"></script>
      <script src="https://threejs.org/examples/js/shaders/LuminosityHighPassShader.js"></script>
      <script src="https://threejs.org/examples/js/shaders/GammaCorrectionShader.js"></script>
      <script src="https://threejs.org/examples/js/postprocessing/LUTPass.js"></script>

      <script src="https://threejs.org/examples/js/shaders/CopyShader.js"></script>
      

    </div>


  </body>

</html>

CSS

body {
	margin: 0;
	background-color: #000;
	color: #fff;
	font-family: Monospace;
	font-size: 13px;
	line-height: 24px;
	overscroll-behavior: none;
}

a {
	color: #ff0;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

button {
	cursor: pointer;
	text-transform: uppercase;
}

#info {
	position: absolute;
	top: 0px;
	width: 100%;
	padding: 10px;
	box-sizing: border-box;
	text-align: center;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	pointer-events: none;
	z-index: 1; /* TODO Solve this in HTML */
}

a, button, input, select {
	pointer-events: auto;
}

.dg.ac {
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	z-index: 2 !important; /* TODO Solve this in HTML */
}

#overlay {
	position: absolute;
	z-index: 2;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0,0,0,0.7);
}

	#overlay button {
		background: #ffffff;
		border: 0;
		color: #000000;
		padding: 16px 20px;
		text-transform: uppercase;
		cursor: pointer;
	}

#notSupported {
	width: 50%;
	margin: auto;
	background-color: #f00;
	margin-top: 20px;
	padding: 10px;
}

JavaScript

let scene, camera, renderer, controls
let gui = new dat.GUI();
let lutPass, finalComposer

const params = {

};




const makeLUTTexture = async (url) => {
  const imgLoader = new THREE.ImageLoader();
  const canvas = document.createElement('canvas')
  const ctx = canvas.getContext('2d');
  document.body.appendChild(canvas)
  canvas.style.top = '75%'
  canvas.style.left = '0'
  canvas.style.zIndex = 5
  canvas.style.position = 'absolute'
  canvas.style.minWidth = '128px';
  canvas.style.minHeight = '16px';
  canvas.style.imageRendering = 'pixelated';
  const info = {
    url: url,
    size: 16
  }


  const texture3D = new THREE.DataTexture();
  texture3D.format = THREE.RGBFormat;
  texture3D.magFilter = THREE.LinearFilter;
  texture3D.minFilter = THREE.LinearFilter;
  texture3D.flipY = false
  const texture = texture3D

  if (info.url) {
    const lutSize = info.size;

    const image = await imgLoader.loadAsync(info.url)
    const width = lutSize * lutSize;
    const height = lutSize;
    // info.size = lutSize;
    ctx.canvas.width = width;
    ctx.canvas.height = height;

    ctx.beginPath();
    ctx.rect(0, 0, width, height);
    ctx.fillStyle = "red";
    ctx.fill();

    ctx.drawImage(image, 0, 0);
    const imageData = ctx.getImageData(0, 0, width, height);
    const newImageData = []


    //REmove 4th element
    let j = 0
    for (let i = 0; i < imageData.data.length; i++) {

      if ((i + 1) % 4 !== 0) {
        if (i < 30) {
          console.log(i, imageData.data[i])
        }

        newImageData[j] = imageData.data[i]
        j++
      }
    }
    console.log('REMOVE 4th ELEM', { imageData, newImageData })

    texture.image.data = new Uint8Array(newImageData);
    texture.image.width = width;
    texture.image.height = height;
    texture.needsUpdate = true;
    console.log('LOADED', { imageData, texture }, texture.image)


    return texture;
  }

}








async function init() {
  const container = document.createElement("div");
 ...