How do I create a filter with an additional texture?

[applekeeper-cat]

I'd like to create a custom 1D LUT filter (aka gradient map), the WebGL code is very simple:

        uniform sampler2D uTexture;
        uniform sampler2D uMapTexture;
        void main() {
            vec4 color = texture(uTexture, vTextureCoord.xy);
            vec4 outColor;

            if (color.a > 0.0) {
                outColor = texture2D(uMapTexture, vec2(color.r, 0.5));
                outColor.a = color.a;
            }

How do I define and pass the additional texture (uMapTexture) as an option for my filter? What best practices should I follow? I see that the Filter class has a bindAdditionalTexture() method, but it lacks documentation.

[asturur]

i should have one for showing. Let me see...

[applekeeper-cat]

Any updates?

[asturur]

I extended the base filter and created the LutFilter for example

export class Lut16Filter extends filters.BaseFilter<'LutFilter'> {
  static type = 'LutFilter';

  declare cacheName: string;

  declare textureRef: WebGLTexture | null;

  declare lutTable: HTMLImageElement;

  static uniformLocations = ['uLut'];

  getFragmentSource() {
    return `precision highp float;
    uniform sampler2D uTexture;
    // here is the loot sampler
    uniform sampler2D uLut;
    varying vec2 vTexCoord;
    void main() {
      ...your lutTable shader...  
    }`;
  }

 createTexture(backend: WebGLFilterBackend, image: TexImageSource) {
    const { gl } = backend;

    const texture = backend.getCachedTexture(this.cacheName, image, gl.LINEAR);

    return texture;
  }

  applyToWebGL(options: TWebGLPipelineState) {
    // load texture to blend.
    const gl = options.context;

    if (!this.textureRef) {
      const texture = this.createTexture(options.filterBackend, this.lutTable);

      this.textureRef = texture;
    }

    this.bindAdditionalTexture(gl, this.textureRef!, gl.TEXTURE1);
    super.applyToWebGL(options);
    this.unbindAdditionalTexture(gl, gl.TEXTURE1);
  }

  /**
   * Send data from this filter to its shader program's uniforms.
   *
   * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader.
   * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects
   */
  sendUniformData(gl: WebGLRenderingContext, uniformLocations: TWebGLUniformLocationMap) {
    gl.uniform1i(uniformLocations.uLut, 1); // texture unit 1.
  }

  toObject....

   fromObject....

lutTable is an HtmlImageElement in which i load the lut data.

Then in the applyWebGl function i upload it up as a texture, and in the uniformLocations functions is simply referred as texture unit 1, that is where i load it with

    this.bindAdditionalTexture(gl, this.textureRef!, gl.TEXTURE1);

using gl.TEXTURE1

[applekeeper-cat]

Super informative, thank you so much!