This is the introductory example on how to implement a custom RenderNode.

A RenderNode offers a low-level interface to access the SceneView’s WebGL context, and thus enables creating custom visualizations. In this sample, a color modification render node is added to the composite color stage in the render pipeline. The render node uses a fragment shader that converts each pixel of the color composite from colored to grayscale.

First, we create a new class LuminanceRenderNode by creating a subclass of RenderNode. consumes and produces need to be set in the constructor. This defines where in the render pipeline the render node is inserted. In this case, the render node consumes composite-color and produces composite-color, hence it is inserted in the composite color stage.

const LuminanceRenderNode = RenderNode.createSubclass({
  constructor: function () {
    // constructor params consumes and produces define where in the render graph the render node is injected
    this.consumes = { required: ["composite-color"] };
    this.produces = "composite-color";
  },
  ...

We then define a getter and setter for the class member enabled. This allows us to enable/disable the render node.

  properties: {
    enabled: {
      get: function () {
        return this.produces != null;
      },
      set: function (value) {
        this.produces = value ? "composite-color" : null;
        this.requestRender();
      }
    }
  },

The render function is where the actual logic happens: WebGL state changes, framebuffer object handling, and vertex and fragment shader programs. See WebGL and GLSL shader documentation for more info.

The new render node is created and connected to the view. Its member enabled is connected to a toggle button to turn it on and off.

const luminanceRenderNode = new LuminanceRenderNode({ view });

const renderNodeToggle = document.getElementById("renderNodeToggle");
renderNodeToggle.addEventListener("calciteSwitchChange", () => {
  luminanceRenderNode.enabled = !luminanceRenderNode.enabled;
});