Custom RenderNode - Color modification

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.

1
2
3
4
5
6
7
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.

1
2
3
4
5
6
7
8
9
10
11
  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.

1
2
3
4
5
6
const luminanceRenderNode = new LuminanceRenderNode({ view });

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

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.

The developer dashboard has moved

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close