Setting shader module uniforms from a layer

[alexandruandrei91]

Hello and thank you for the amazing work you are doing here!

You can find more details below, but here's the gist of my questions:
How can I set a shader module's uniforms from a layer without much boilerplate? If there's no way or it's not recommended, how can I set a struct uniform from a layer? I'm open to other suggestions as well.
I'm using deck.gl 8.3.12, with luma.gl 8.3.1.

I've written a small shader module that I want to reuse in a few layers which extend the Bitmap layer. The shader module has a couple of uniforms that I would like to modify in each layer, without duplicating all the uniforms in each layer's shader.
I've tried this so far:

  super.draw({
      uniforms: {
          ...uniforms,
          module_uniform1: this.props.param1,
          module_uniform2: this.props.param2,
     });

and this:

super.draw({
    moduleParameters: {
        ...moduleParameters,
        module_uniform1: this.props.param1,
        module_uniform2: this.props.param2,
    }
});

with no success. Then I've tried overriding updateState and check if some specific prop params changed and if so, call setModuleParameters. This seemed to work, but the extra boilerplate makes it easier to just add the uniforms in each layer's shader directly.

After I tried all this and also stumbled upon something in the Luma.gl documentation saying that the shader module uniforms should be treated as implementation details, I've changed strategy. I've defined a struct with all the parameters I need in the module shader and then just use it as an uniform in each layer shader, so I don't need to repeat all the different uniforms for each layer.
In the module shader:

struct Decoder
{
  vec3 param1;
  float param2;
  [...]
};

vec3 foo(Decoder) {
  [...]
}

In a layer's shader:

uniform Decoder decoder;

void main(void) {
   vec3 bar = foo(decoder);
  [...]
}

But now I can't manage to set the struct uniform from the layer's draw method. I've tried these two methods so far:

super.draw({
    uniforms: {
        ...uniforms,
       // METHOD 1
       "decoder.param1": this.props.param1,
       "decoder.param2": this.props.param2,

     // METHOD 2
        param1: this.props.param1,
        param2: this.props.param2,
    },
});

[Pessimistress]

setModuleParameters is called automatically before each redraw with the layer's props. The easiest way to update uniforms is to implement your logic in the shader module's getUniforms callback. You can find several examples in the @deck.gl/extensions source, e.g. https://github.com/visgl/deck.gl/blob/master/modules/extensions/src/data-filter/shader-module.js#L66

[alexandruandrei91]

I tried that, but I got stuck at the next step, setting the shader module options from the layer. I need to set them to some layer props, and change them when the props change. Any pointers on where/how should I do that?

[Pessimistress]

Can you post your code sample? The opts argument that getUniforms receives should contain all of the layer's props in one of the calls.

[alexandruandrei91]

One detail that might matter is that I'm using the JSON extension.

// shader module
import fs from "./decoder.fs.glsl";

const getUniforms = opts => {
    console.log(opts)
}

export default {
    name: "decoder",
    fs,
    getUniforms
};

// Layer
import { BitmapLayer } from "@deck.gl/layers";

import GL from "@luma.gl/constants";
import { Texture2D } from "@luma.gl/core";

import { decoder } from "../shader_modules";
import fsColormap from "./colormap.fs.glsl";

const DEFAULT_TEXTURE_PARAMETERS = {
    [GL.TEXTURE_MIN_FILTER]: GL.LINEAR_MIPMAP_LINEAR,
    [GL.TEXTURE_MAG_FILTER]: GL.LINEAR,
    [GL.TEXTURE_WRAP_S]: GL.CLAMP_TO_EDGE,
    [GL.TEXTURE_WRAP_T]: GL.CLAMP_TO_EDGE,
};

const defaultProps = {
    prop_that_should_be_there: { type: "number", value: 12.34 },
    colormap: { type: "object", value: null, async: true },
};

export default class ColormapLayer extends BitmapLayer {
    draw({ uniforms }) {
        const { gl } = this.context;
        super.draw({
            uniforms: {
                ...uniforms,
                colormap: new Texture2D(gl, {
                    data: this.props.colormap,
                    parameters: DEFAULT_TEXTURE_PARAMETERS,
                })
            },
        });
    }

    getShaders() {
        let parentShaders = super.getShaders();
        parentShaders.fs = fsColormap;
        parentShaders.modules.push(decoder);
        return parentShaders;
    }
}

ColormapLayer.layerName = "ColormapLayer";
ColormapLayer.defaultProps = defaultProps;

Json definition of the map

...
"layers": [
      {
        "@@type": "ColormapLayer",
        "id": "colormap-layer",
        "bounds": [
          -50,
          50,
          50,
          -50
        ],
        "image": "https://i.imgur.com/Dx8eseE.png",
        "colormap": "https://cdn.jsdelivr.net/gh/kylebarron/deck.gl-raster/assets/colormaps/plasma.png",
        "prop_that_should_be_there": 12
      }
    ],
...

Output from the getUniforms in the shader module:

{autoWrapLongitude: false, viewport: Viewport, mousePosition: {…}, pickingActive: 0, devicePixelRatio: 2, …}
autoWrapLongitude: false
colormap: (...)
data: (...)
devicePixelRatio: 2
image: (...)
lightSources: {ambientLight: AmbientLight, directionalLights: Array(2), pointLights: Array(0)}
mousePosition: {x: -1, y: -1}
pickingActive: 0
viewport: Viewport {id: "minimap", x: 722, y: 680, width: 181, height: 227, …}
__proto__: Object

So somehow the prop_that_should_be_there prop is missing, although the colormap one is there..

[Pessimistress]

If you log opts.prop_that_should_be_there it should give you 12. You can see this by expanding __proto__.

[alexandruandrei91]

Yes, it's there, thank you!