Custom Modules

WebGL doesn't have a system for handling dependencies and modules, so I use a system developed by the luma.gl library.

This system works by defining hooks designating where the code can be modified, and injections that insert custom code into those hooks.

Currently, two such hooks exist in the RasterLayer and RasterMeshLayer, one for assembling an image and one for altering the colors in the existing image.

Create color

Mutate color

Example: Averaging Bands

Suppose you wanted to implement a spectral index that averages three bands.

// average.js
const fs = `\
float average_calc(vec4 image) {
  return (image.r + image.g + image.b) / 3.;
}
`;

export default {
  name: 'average',
  fs,
  inject: {
    'fs:DECKGL_MUTATE_COLOR': `
    image = vec4(average_calc(image), 0., 0., 0.);
    `,
  },
};

Important Notes

Prop names must be unique.