externalRenderers

SceneView uses WebGL version 2.0 to render the map/scene on screen. The ArcGIS Maps SDK for JavaScript offers a low-level interface to access the SceneView's WebGL context, and thus enables creating custom visualizations that interact with the scene the same way as built-in layers. Developers can either write WebGL code directly, or integrate with third-party WebGL libraries.

Porting to custom render nodes

A RenderNode provides an extended functionality over the deprecated externalRenderers API. It can consume additional input framebuffers and can replace the current framebuffer with a new, modified version. The following section provides a guideline on how to port an external renderer implementation to a RenderNode implementation.

The RenderNode is meant to be used as base class instead of providing an interface by global function pointers. The subclass derived from the RenderNode has to provide details about when the render function should be called. For external renderer the output is either "opaque-color" or "transparent-color". The required inputs will be "opaque-color" or "transparent-color" as well. The RenderNode does allow additional inputs. Check out the doc for RenderNodeInput and RenderNodeOutput for details. Once a RenderNode is constructed it is added automatically to the provided view.

 require(["esri/Map", "esri/views/SceneView", "esri/views/3d/webgl/RenderNode"], function (
  Map,
  SceneView,
  RenderNode
) {
  export const ExternalRenderNode = RenderNode.createSubclass({
    constructor() {
      this.consumes = { required: ["opaque-color"] };
      this.produces = "opaque-color";
    },

The RenderNode needs to define a render function, similar to the external renderer interface. The render function allows explicit handling of render targets and is required to return an output framebuffer. Inputs can either be used as textures, or can be bound directly to render top of the existing framebuffer. The deprecated externalRenderers API always updated the bound framebuffer. Using bindRenderTarget will allow you to keep the existing rendering function:

  export const ExternalRenderNode = RenderNode.createSubclass({
   ...
    render(inputs) {
      this.resetWebGLState();
      const output = this.bindRenderTarget();

      ...existing render function code...
      return output;
    }
  });
}

The setup and dispose functions do not exist in the render node API. Instead, a custom render node implementation can watch the view.ready property:

  export const ExternalRenderNode = RenderNode.createSubclass({
   ...
   initialize(): void {
     this.addHandles(
       watch(
         () => this.view.ready,
         (ready) => {
           if (ready) {
             setup();
           } else {
             dispose();
           }
         },
         initial,
       ),
     );
   }
 }

The RenderContext passed to the render function is deprecated. All its properties are available on the RenderNode instance with the same name. The now deprecated function externalRenderers.requestRender(view) is also available on the RenderNode instance.