Image 将LUT应用于图像GLSL

我是CG新手，正在尝试实现一个片段着色器，将png LUT应用于图片，但我没有得到预期的结果，现在我的代码使图片非常蓝。
以下是一个LUT示例： [！[在此处输入图像描述][1][1]

当我使用下面的代码将LUT应用于某个图像时，整个图像只会变成蓝色。
代码：

---

因为您使用的是WebGL2，所以只需使用3D纹理即可

#version 300 es
precision highp float;

in vec2 vUV;

uniform sampler2D uImage;
uniform mediump sampler3D uLUT;

out vec4 outColor;

void main() {
  vec4 color = texture(uImage, vUV);
  vec3 lutSize = vec3(textureSize(uLUT, 0));
  vec3 uvw = (color.rgb * float(lutSize - 1.0) + 0.5) / lutSize;
  outColor = texture(uLUT, uvw);
}

function createLUTTexture(gl, img, filter, size = 8) {
  const tex = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_3D, tex);
  gl.texStorage3D(gl.TEXTURE_3D, 1, gl.RGBA8, size, size, size);
  // grab  slices
  for (let z = 0; z < size; ++z) {
    gl.pixelStorei(gl.UNPACK_SKIP_PIXELS, z * size);
    gl.pixelStorei(gl.UNPACK_ROW_LENGTH, img.width);
    gl.texSubImage3D(
      gl.TEXTURE_3D, 
      0,     // mip level
      0,     // x
      0,     // y
      z,     // z
      size,  // width,
      size,  // height,
      1,     // depth
      gl.RGBA, 
      gl.UNSIGNED_BYTE,
      img,
    );
  }
  gl.texParameteri(gl.TEXTURE_3D, gl.TEXTURE_MIN_FILTER, filter);
  gl.texParameteri(gl.TEXTURE_3D, gl.TEXTURE_MAG_FILTER, filter);
  return tex;
}

您可以使用

UNPACK_ROW_LENGTH

和

UNPACK_SKIP_PIXELS

将PNG片段加载到3D纹理中

#version 300 es
precision highp float;

in vec2 vUV;

uniform sampler2D uImage;
uniform mediump sampler3D uLUT;

out vec4 outColor;

void main() {
  vec4 color = texture(uImage, vUV);
  vec3 lutSize = vec3(textureSize(uLUT, 0));
  vec3 uvw = (color.rgb * float(lutSize - 1.0) + 0.5) / lutSize;
  outColor = texture(uLUT, uvw);
}

function createLUTTexture(gl, img, filter, size = 8) {
  const tex = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_3D, tex);
  gl.texStorage3D(gl.TEXTURE_3D, 1, gl.RGBA8, size, size, size);
  // grab  slices
  for (let z = 0; z < size; ++z) {
    gl.pixelStorei(gl.UNPACK_SKIP_PIXELS, z * size);
    gl.pixelStorei(gl.UNPACK_ROW_LENGTH, img.width);
    gl.texSubImage3D(
      gl.TEXTURE_3D, 
      0,     // mip level
      0,     // x
      0,     // y
      z,     // z
      size,  // width,
      size,  // height,
      1,     // depth
      gl.RGBA, 
      gl.UNSIGNED_BYTE,
      img,
    );
  }
  gl.texParameteri(gl.TEXTURE_3D, gl.TEXTURE_MIN_FILTER, filter);
  gl.texParameteri(gl.TEXTURE_3D, gl.TEXTURE_MAG_FILTER, filter);
  return tex;
}

起初的
应用的LUT：

因为您使用的是WebGL2，所以只需使用3D纹理即可

#version 300 es
precision highp float;

in vec2 vUV;

uniform sampler2D uImage;
uniform mediump sampler3D uLUT;

out vec4 outColor;

void main() {
  vec4 color = texture(uImage, vUV);
  vec3 lutSize = vec3(textureSize(uLUT, 0));
  vec3 uvw = (color.rgb * float(lutSize - 1.0) + 0.5) / lutSize;
  outColor = texture(uLUT, uvw);
}

function createLUTTexture(gl, img, filter, size = 8) {
  const tex = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_3D, tex);
  gl.texStorage3D(gl.TEXTURE_3D, 1, gl.RGBA8, size, size, size);
  // grab  slices
  for (let z = 0; z < size; ++z) {
    gl.pixelStorei(gl.UNPACK_SKIP_PIXELS, z * size);
    gl.pixelStorei(gl.UNPACK_ROW_LENGTH, img.width);
    gl.texSubImage3D(
      gl.TEXTURE_3D, 
      0,     // mip level
      0,     // x
      0,     // y
      z,     // z
      size,  // width,
      size,  // height,
      1,     // depth
      gl.RGBA, 
      gl.UNSIGNED_BYTE,
      img,
    );
  }
  gl.texParameteri(gl.TEXTURE_3D, gl.TEXTURE_MIN_FILTER, filter);
  gl.texParameteri(gl.TEXTURE_3D, gl.TEXTURE_MAG_FILTER, filter);
  return tex;
}

您可以使用

UNPACK_ROW_LENGTH

和

UNPACK_SKIP_PIXELS

将PNG片段加载到3D纹理中

#version 300 es
precision highp float;

in vec2 vUV;

uniform sampler2D uImage;
uniform mediump sampler3D uLUT;

out vec4 outColor;

void main() {
  vec4 color = texture(uImage, vUV);
  vec3 lutSize = vec3(textureSize(uLUT, 0));
  vec3 uvw = (color.rgb * float(lutSize - 1.0) + 0.5) / lutSize;
  outColor = texture(uLUT, uvw);
}

function createLUTTexture(gl, img, filter, size = 8) {
  const tex = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_3D, tex);
  gl.texStorage3D(gl.TEXTURE_3D, 1, gl.RGBA8, size, size, size);
  // grab  slices
  for (let z = 0; z < size; ++z) {
    gl.pixelStorei(gl.UNPACK_SKIP_PIXELS, z * size);
    gl.pixelStorei(gl.UNPACK_ROW_LENGTH, img.width);
    gl.texSubImage3D(
      gl.TEXTURE_3D, 
      0,     // mip level
      0,     // x
      0,     // y
      z,     // z
      size,  // width,
      size,  // height,
      1,     // depth
      gl.RGBA, 
      gl.UNSIGNED_BYTE,
      img,
    );
  }
  gl.texParameteri(gl.TEXTURE_3D, gl.TEXTURE_MIN_FILTER, filter);
  gl.texParameteri(gl.TEXTURE_3D, gl.TEXTURE_MAG_FILTER, filter);
  return tex;
}

起初的
应用的LUT：