@deck.gl-community/layers 9.2.5 → 9.3.1-alpha.0

package/dist/skybox-layer/skybox-layer.d.ts

@@ -0,0 +1,58 @@
+import { type TextureCubeLoaderOptions, type TextureCubeManifest } from '@loaders.gl/textures';
+import { Layer } from '@deck.gl/core';
+import type { DefaultProps, LayerProps, UpdateParameters } from '@deck.gl/core';
+import { DynamicTexture, Model, ShaderInputs } from '@luma.gl/engine';
+type _SkyboxLayerProps = {
+    /** Cubemap manifest URL or manifest object to load and render. */
+    cubemap: string | TextureCubeManifest | null;
+    /** Optional loaders.gl texture-cube load options. */
+    loadOptions?: TextureCubeLoaderOptions | null;
+    /**
+     * Declares how the cubemap faces are oriented relative to deck.gl's Z-up
+     * world. Use `y-up` for cubemaps authored for Y-up scenes, such as the
+     * Tycho star map faces from the luma.gl globe showcase.
+     */
+    orientation?: 'default' | 'y-up';
+};
+export type SkyboxLayerProps = _SkyboxLayerProps & LayerProps;
+type SkyboxLayerState = {
+    /** Active GPU cubemap texture, if one has been loaded successfully. */
+    cubemapTexture: DynamicTexture | null;
+    /** Monotonic load token used to discard stale async cubemap loads. */
+    loadCount: number;
+    /** Backing model that renders the cube geometry. */
+    model?: Model;
+    /** Shader input manager for the skybox uniforms. */
+    shaderInputs?: ShaderInputs<any>;
+};
+/**
+ * Renders a camera-centered cubemap background for `MapView`, `GlobeView`,
+ * `FirstPersonView`, and other 3D-capable deck.gl views.
+ */
+export declare class SkyboxLayer<ExtraProps extends Record<string, unknown> = Record<string, unknown>> extends Layer<Required<_SkyboxLayerProps> & ExtraProps> {
+    static defaultProps: DefaultProps<SkyboxLayerProps>;
+    static layerName: string;
+    state: SkyboxLayerState;
+    /** Initializes the cube model and starts loading the cubemap texture. */
+    initializeState(): void;
+    /** Reloads the cubemap when its source manifest or load options change. */
+    updateState({ props, oldProps }: UpdateParameters<this>): void;
+    /** Releases GPU resources owned by the layer. */
+    finalizeState(): void;
+    /** Draws the skybox cube for the current viewport. */
+    draw(): void;
+    /** Creates the luma.gl model used to render the skybox cube. */
+    protected _getModel(shaderInputs: ShaderInputs<any>): Model;
+    /** Returns the WGSL/GLSL shader pair used by the layer. */
+    getShaders(): {
+        source: string;
+        vs: string;
+        fs: string;
+    };
+    /** Starts an asynchronous cubemap load for the current props. */
+    private _loadCubemap;
+    /** Swaps the active GPU cubemap texture and updates model bindings. */
+    private _setCubemapTexture;
+}
+export {};
+//# sourceMappingURL=skybox-layer.d.ts.map

package/dist/skybox-layer/skybox-layer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"skybox-layer.d.ts","sourceRoot":"","sources":["../../src/skybox-layer/skybox-layer.ts"],"names":[],"mappings":"AAKA,OAAO,EAEL,KAAK,wBAAwB,EAC7B,KAAK,mBAAmB,EACzB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAC,KAAK,EAAC,MAAM,eAAe,CAAC;AACpC,OAAO,KAAK,EAAC,YAAY,EAAE,UAAU,EAAE,gBAAgB,EAAW,MAAM,eAAe,CAAC;AAGxF,OAAO,EAAe,cAAc,EAAE,KAAK,EAAE,YAAY,EAAC,MAAM,iBAAiB,CAAC;AAqClF,KAAK,iBAAiB,GAAG;IACvB,kEAAkE;IAClE,OAAO,EAAE,MAAM,GAAG,mBAAmB,GAAG,IAAI,CAAC;IAC7C,qDAAqD;IACrD,WAAW,CAAC,EAAE,wBAAwB,GAAG,IAAI,CAAC;IAC9C;;;;OAIG;IACH,WAAW,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;CAClC,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,iBAAiB,GAAG,UAAU,CAAC;AAO9D,KAAK,gBAAgB,GAAG;IACtB,uEAAuE;IACvE,cAAc,EAAE,cAAc,GAAG,IAAI,CAAC;IACtC,sEAAsE;IACtE,SAAS,EAAE,MAAM,CAAC;IAClB,oDAAoD;IACpD,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,oDAAoD;IACpD,YAAY,CAAC,EAAE,YAAY,CAAC,GAAG,CAAC,CAAC;CAClC,CAAC;AAEF;;;GAGG;AACH,qBAAa,WAAW,CACtB,UAAU,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CACpE,SAAQ,KAAK,CAAC,QAAQ,CAAC,iBAAiB,CAAC,GAAG,UAAU,CAAC;IACvD,MAAM,CAAC,YAAY,iCAAgB;IACnC,MAAM,CAAC,SAAS,SAAiB;IAEjC,KAAK,EAAE,gBAAgB,CAAc;IAErC,yEAAyE;IACzE,eAAe,IAAI,IAAI;IAsBvB,2EAA2E;IAC3E,WAAW,CAAC,EAAC,KAAK,EAAE,QAAQ,EAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC,GAAG,IAAI;IAM5D,iDAAiD;IACjD,aAAa,IAAI,IAAI;IAKrB,sDAAsD;IACtD,IAAI,IAAI,IAAI;IAkBZ,gEAAgE;IAChE,SAAS,CAAC,SAAS,CAAC,YAAY,EAAE,YAAY,CAAC,GAAG,CAAC,GAAG,KAAK;IAY3D,2DAA2D;IAC3D,UAAU;;;;;IAQV,iEAAiE;YACnD,YAAY;IAyB1B,uEAAuE;IACvE,OAAO,CAAC,kBAAkB;CAe3B"}

package/dist/skybox-layer/skybox-layer.js

@@ -0,0 +1,248 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+import { load } from '@loaders.gl/core';
+import { TextureCubeLoader } from '@loaders.gl/textures';
+import { Layer } from '@deck.gl/core';
+import { Matrix4 } from '@math.gl/core';
+import { CubeGeometry, DynamicTexture, Model, ShaderInputs } from '@luma.gl/engine';
+import { convertLoadedCubemapToTextureData, createCubemapLoadOptions } from "./cubemap-utils.js";
+const app = {
+    name: 'app',
+    uniformTypes: {
+        modelMatrix: 'mat4x4<f32>',
+        viewMatrix: 'mat4x4<f32>',
+        projectionMatrix: 'mat4x4<f32>'
+    }
+};
+const SKYBOX_PARAMETERS = {
+    cullMode: 'front',
+    depthWriteEnabled: false,
+    depthCompare: 'less-equal'
+};
+const SKYBOX_SCALE = new Matrix4().scale([2, 2, 2]);
+const defaultProps = {
+    cubemap: null,
+    loadOptions: null,
+    orientation: 'default'
+};
+/**
+ * Renders a camera-centered cubemap background for `MapView`, `GlobeView`,
+ * `FirstPersonView`, and other 3D-capable deck.gl views.
+ */
+export class SkyboxLayer extends Layer {
+    static defaultProps = defaultProps;
+    static layerName = 'SkyboxLayer';
+    state = undefined;
+    /** Initializes the cube model and starts loading the cubemap texture. */
+    initializeState() {
+        const attributeManager = this.getAttributeManager();
+        attributeManager?.remove(['instancePickingColors']);
+        const shaderInputs = new ShaderInputs(createShaderInputModules(this.context.defaultShaderModules), {
+            disableWarnings: true
+        });
+        const model = this._getModel(shaderInputs);
+        this.setState({
+            cubemapTexture: null,
+            loadCount: 0,
+            model,
+            shaderInputs
+        });
+        this._loadCubemap().catch(() => { });
+    }
+    /** Reloads the cubemap when its source manifest or load options change. */
+    updateState({ props, oldProps }) {
+        if (props.cubemap !== oldProps.cubemap || props.loadOptions !== oldProps.loadOptions) {
+            this._loadCubemap().catch(() => { });
+        }
+    }
+    /** Releases GPU resources owned by the layer. */
+    finalizeState() {
+        this.state.cubemapTexture?.destroy();
+        this.state.model?.destroy();
+    }
+    /** Draws the skybox cube for the current viewport. */
+    draw() {
+        const { model, cubemapTexture, shaderInputs } = this.state;
+        if (!model || !cubemapTexture || !shaderInputs) {
+            return;
+        }
+        const viewport = this.context.viewport;
+        shaderInputs.setProps({
+            app: {
+                modelMatrix: getSkyboxModelMatrix(this.props.orientation),
+                viewMatrix: getSkyboxViewMatrix(viewport),
+                projectionMatrix: viewport.projectionMatrix
+            }
+        });
+        model.draw(this.context.renderPass);
+    }
+    /** Creates the luma.gl model used to render the skybox cube. */
+    _getModel(shaderInputs) {
+        return new Model(this.context.device, {
+            ...this.getShaders(),
+            id: this.props.id,
+            bufferLayout: this.getAttributeManager()?.getBufferLayouts() || [],
+            geometry: new CubeGeometry({ indices: true }),
+            shaderInputs,
+            isInstanced: false,
+            parameters: SKYBOX_PARAMETERS
+        });
+    }
+    /** Returns the WGSL/GLSL shader pair used by the layer. */
+    getShaders() {
+        return {
+            source: SKYBOX_WGSL,
+            vs: SKYBOX_VS,
+            fs: SKYBOX_FS
+        };
+    }
+    /** Starts an asynchronous cubemap load for the current props. */
+    async _loadCubemap() {
+        const { cubemap, loadOptions } = this.props;
+        const nextLoadCount = this.state.loadCount + 1;
+        this.setState({ loadCount: nextLoadCount });
+        if (!cubemap) {
+            this._setCubemapTexture(null);
+            return;
+        }
+        try {
+            const loadedTexture = await loadCubemapSource(cubemap, loadOptions);
+            if (this.state.loadCount !== nextLoadCount || !this.state.model) {
+                return;
+            }
+            const cubemapData = convertLoadedCubemapToTextureData(loadedTexture);
+            this._setCubemapTexture(createCubemapTexture(this.context.device, cubemapData));
+        }
+        catch (error) {
+            if (this.state.loadCount === nextLoadCount) {
+                this.raiseError(error, 'SkyboxLayer failed to load cubemap');
+            }
+        }
+    }
+    /** Swaps the active GPU cubemap texture and updates model bindings. */
+    _setCubemapTexture(texture) {
+        const { cubemapTexture, model } = this.state;
+        if (cubemapTexture === texture) {
+            return;
+        }
+        cubemapTexture?.destroy();
+        this.setState({ cubemapTexture: texture });
+        if (texture && model) {
+            model.setBindings({ cubeTexture: texture });
+        }
+        this.setNeedsRedraw();
+    }
+}
+/** Loads a cubemap manifest or manifest URL through loaders.gl. */
+async function loadCubemapSource(cubemap, loadOptions) {
+    const normalizedLoadOptions = createCubemapLoadOptions(cubemap, loadOptions);
+    if (typeof cubemap === 'string') {
+        return (await load(cubemap, TextureCubeLoader, normalizedLoadOptions));
+    }
+    return (await TextureCubeLoader.parseText(JSON.stringify(cubemap), normalizedLoadOptions));
+}
+/** Creates the runtime `DynamicTexture` instance used by the skybox model. */
+function createCubemapTexture(device, data) {
+    return new DynamicTexture(device, {
+        dimension: 'cube',
+        data,
+        mipmaps: true,
+        sampler: {
+            addressModeU: 'clamp-to-edge',
+            addressModeV: 'clamp-to-edge',
+            addressModeW: 'clamp-to-edge',
+            magFilter: 'linear',
+            minFilter: 'linear',
+            mipmapFilter: 'linear'
+        }
+    });
+}
+/** Removes camera translation from the active view matrix for skybox rendering. */
+function getSkyboxViewMatrix(viewport) {
+    const viewMatrix = new Matrix4(viewport.viewMatrixUncentered || viewport.viewMatrix);
+    viewMatrix[12] = 0;
+    viewMatrix[13] = 0;
+    viewMatrix[14] = 0;
+    return viewMatrix;
+}
+/** Returns the skybox cube transform for the requested cubemap orientation. */
+function getSkyboxModelMatrix(orientation = 'default') {
+    if (orientation === 'y-up') {
+        return new Matrix4().rotateX(Math.PI / 2).scale([2, 2, 2]);
+    }
+    return new Matrix4(SKYBOX_SCALE);
+}
+/** Converts the current shader module list into a name-indexed dictionary. */
+function createShaderInputModules(defaultShaderModules) {
+    return Object.fromEntries([app, ...defaultShaderModules].map((module) => [module.name, module]));
+}
+const SKYBOX_WGSL = /* wgsl */ `
+struct appUniforms {
+  modelMatrix: mat4x4<f32>,
+  viewMatrix: mat4x4<f32>,
+  projectionMatrix: mat4x4<f32>,
+};
+
+@group(0) @binding(auto) var<uniform> app : appUniforms;
+@group(0) @binding(auto) var cubeTexture : texture_cube<f32>;
+@group(0) @binding(auto) var cubeTextureSampler : sampler;
+
+struct VertexInputs {
+  @location(0) positions : vec3<f32>,
+};
+
+struct VertexOutputs {
+  @builtin(position) position : vec4<f32>,
+  @location(0) direction : vec3<f32>,
+};
+
+@vertex
+fn vertexMain(inputs: VertexInputs) -> VertexOutputs {
+  var outputs : VertexOutputs;
+  let clipPosition =
+    app.projectionMatrix *
+    app.viewMatrix *
+    app.modelMatrix *
+    vec4<f32>(inputs.positions, 1.0);
+  outputs.position = vec4<f32>(clipPosition.x, clipPosition.y, clipPosition.w, clipPosition.w);
+  outputs.direction = inputs.positions;
+  return outputs;
+}
+
+@fragment
+fn fragmentMain(inputs: VertexOutputs) -> @location(0) vec4<f32> {
+  return textureSample(cubeTexture, cubeTextureSampler, normalize(inputs.direction));
+}
+`;
+const SKYBOX_VS = /* glsl */ `#version 300 es
+in vec3 positions;
+
+uniform appUniforms {
+  mat4 modelMatrix;
+  mat4 viewMatrix;
+  mat4 projectionMatrix;
+} app;
+
+out vec3 vDirection;
+
+void main(void) {
+  vec4 clipPosition =
+    app.projectionMatrix * app.viewMatrix * app.modelMatrix * vec4(positions, 1.0);
+  gl_Position = clipPosition.xyww;
+  vDirection = positions;
+}
+`;
+const SKYBOX_FS = /* glsl */ `#version 300 es
+precision highp float;
+
+uniform samplerCube cubeTexture;
+
+in vec3 vDirection;
+out vec4 fragColor;
+
+void main(void) {
+  fragColor = texture(cubeTexture, normalize(vDirection));
+}
+`;
+//# sourceMappingURL=skybox-layer.js.map

package/dist/skybox-layer/skybox-layer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skybox-layer.js","sourceRoot":"","sources":["../../src/skybox-layer/skybox-layer.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deck.gl-community/layers",
-  "version": "9.2.5",
+  "version": "9.3.1-alpha.0",
   "description": "Add-on layers for deck.gl",
   "license": "MIT",
   "publishConfig": {
@@ -33,19 +33,21 @@
     "test-watch": "vitest"
   },
   "dependencies": {
-    "@deck.gl/core": "~9.2.8",
-    "@deck.gl/layers": "~9.2.8",
-    "@deck.gl/mesh-layers": "~9.2.8",
-    "@luma.gl/constants": "~9.2.6",
-    "@luma.gl/core": "~9.2.6",
-    "@luma.gl/engine": "~9.2.6",
-    "@luma.gl/shadertools": "~9.2.6",
+    "@deck.gl/core": "~9.3.0",
+    "@deck.gl/layers": "~9.3.0",
+    "@deck.gl/mesh-layers": "~9.3.0",
+    "@loaders.gl/core": "^4.4.1",
+    "@loaders.gl/textures": "^4.4.1",
+    "@luma.gl/constants": "~9.3.2",
+    "@luma.gl/core": "~9.3.2",
+    "@luma.gl/engine": "~9.3.2",
+    "@luma.gl/shadertools": "~9.3.2",
     "@math.gl/core": "^4.0.0"
   },
   "devDependencies": {
-    "@deck.gl/test-utils": "~9.2.8",
-    "@luma.gl/webgpu": "~9.2.6",
+    "@deck.gl/test-utils": "~9.3.0",
+    "@luma.gl/webgpu": "~9.3.2",
     "@probe.gl/test-utils": "^4.0.4"
   },
-  "gitHead": "c6b0f45b1e7f9916c1b79a43c39b839a8096c163"
+  "gitHead": "dd572a3491cb15a6ff2f0008e93ae1dc38962b06"
 }

package/src/index.ts

@@ -7,3 +7,6 @@ export {PathOutlineLayer} from './path-outline-layer/path-outline-layer';
 
 export type {PathMarkerLayerProps} from './path-marker-layer/path-marker-layer';
 export {PathMarkerLayer} from './path-marker-layer/path-marker-layer';
+
+export type {SkyboxLayerProps} from './skybox-layer/skybox-layer';
+export {SkyboxLayer} from './skybox-layer/skybox-layer';

package/src/path-outline-layer/outline.ts

@@ -59,8 +59,6 @@ in float outline_vzLevel;
 // in vec2 outline_vUV;
 in vec4 outline_vPosition;
 
-out vec4 fragColor;
-
 const float OUTLINE_Z_LEVEL_ERROR = 0.01;
 
 // Return a darker color in shadowmap
@@ -73,12 +71,12 @@ vec4 outline_filterDarkenColor(vec4 color) {
   if (outline_uEnabled) {
     float maxZLevel;
     if (outline_vPosition.q > 0.0) {
-      maxZLevel = texture2DProj(outline_uShadowmap, outline_vPosition).r * 255.;
+      maxZLevel = textureProj(outline_uShadowmap, outline_vPosition).r * 255.;
     } else {
       discard;
     }
     if (maxZLevel < outline_vzLevel + OUTLINE_Z_LEVEL_ERROR) {
-      vec4(color.rgb * 0.5, color.a);
+      return vec4(color.rgb * 0.5, color.a);
     } else {
       discard;
     }

package/src/path-outline-layer/path-outline-layer.ts

@@ -5,9 +5,8 @@
 import type {PathLayerProps} from '@deck.gl/layers';
 import {PathLayer} from '@deck.gl/layers';
 import type {DefaultProps, LayerContext} from '@deck.gl/core';
-import {GL} from '@luma.gl/constants';
 import {Framebuffer} from '@luma.gl/core';
-import type {RenderPipelineParameters} from '@luma.gl/core';
+import type {RenderPipelineParameters, Texture} from '@luma.gl/core';
 import {outline} from './outline';
 
 /**
@@ -89,30 +88,65 @@ export class PathOutlineLayer<DataT = any, ExtraPropsT = Record<string, unknown>
   initializeState(context: LayerContext) {
     super.initializeState();
 
+    const attributeManager = this.getAttributeManager();
+
+    if (!attributeManager) {
+      throw new Error('PathOutlineLayer requires an attribute manager during initialization.');
+    }
+
     // Create an outline "shadow" map
     // TODO - we should create a single outlineMap for all layers
     const outlineFramebuffer = context.device.createFramebuffer({
-      colorAttachments: ['rgba8unorm']
-    });
-
-    this.setState({
-      outlineFramebuffer
+      colorAttachments: [
+        context.device.createTexture({
+          format: 'rgba8unorm',
+          width: 1,
+          height: 1,
+          mipLevels: 1
+        })
+      ]
     });
 
-    // Create an attribute manager
-    // @ts-expect-error check whether this.getAttributeManager works here
-    this.state.attributeManager.addInstanced({
+    attributeManager.addInstanced({
       instanceZLevel: {
         size: 1,
-        type: GL.UNSIGNED_BYTE,
+        type: 'uint8',
         accessor: 'getZLevel'
       }
     });
+
+    this.setState({
+      outlineFramebuffer,
+      model: this._getModel()
+    });
+  }
+
+  finalizeState(context: LayerContext) {
+    this.state.outlineFramebuffer?.destroy();
+    super.finalizeState(context);
   }
 
   // Override draw to add render module
-  draw({moduleParameters = {}, parameters, uniforms, context}) {
-    // Need to calculate same uniforms as base layer
+  draw() {
+    const model = this.state.model;
+    const outlineFramebuffer = this.state.outlineFramebuffer;
+
+    if (!model || !outlineFramebuffer) {
+      return;
+    }
+
+    const viewport = this.context.viewport;
+    const viewportWidth = Math.max(1, Math.ceil(viewport.width));
+    const viewportHeight = Math.max(1, Math.ceil(viewport.height));
+
+    outlineFramebuffer.resize({width: viewportWidth, height: viewportHeight});
+
+    const shadowmapTexture = getFramebufferTexture(outlineFramebuffer);
+
+    if (!shadowmapTexture) {
+      return;
+    }
+
     const {
       jointRounded,
       capRounded,
@@ -124,7 +158,7 @@ export class PathOutlineLayer<DataT = any, ExtraPropsT = Record<string, unknown>
       widthMaxPixels
     } = this.props;
 
-    uniforms = Object.assign({}, uniforms, {
+    const basePathProps = {
       jointType: Number(jointRounded),
       capType: Number(capRounded),
       billboard,
@@ -133,58 +167,57 @@ export class PathOutlineLayer<DataT = any, ExtraPropsT = Record<string, unknown>
       miterLimit,
       widthMinPixels,
       widthMaxPixels
-    });
+    };
 
     // Render the outline shadowmap (based on segment z orders)
-    const {outlineFramebuffer} = this.state;
-
-    if (context?.viewport) {
-      const viewportWidth = Math.max(1, Math.ceil(context.viewport.width));
-      const viewportHeight = Math.max(1, Math.ceil(context.viewport.height));
-
-      outlineFramebuffer.resize({width: viewportWidth, height: viewportHeight});
-    } else {
-      outlineFramebuffer.resize();
-    }
-
-    const shadowmapTexture = outlineFramebuffer.colorAttachments[0]?.texture;
-
-    if (!shadowmapTexture) {
-      return;
-    }
-    // TODO(v9): resize, see 'sf' example.
-    // outlineFramebuffer.resize();
-    // TODO(v9) clear FBO
-    // outlineFramebuffer.clear({ color: true, depth: true, stencil: true });
-
-    this.state.model.updateModuleSettings({
-      outlineEnabled: true,
-      outlineRenderShadowmap: true,
-      outlineShadowmap: shadowmapTexture
+    this.setShaderModuleProps({
+      outline: {
+        outlineEnabled: true,
+        outlineRenderShadowmap: true,
+        outlineShadowmap: shadowmapTexture
+      }
     });
-
-    this.state.model.draw({
-      uniforms: Object.assign({}, uniforms, {
+    model.shaderInputs.setProps({
+      path: {
+        ...basePathProps,
         jointType: 0,
-        widthScale: this.props.widthScale * 1.3
-      }),
-      parameters: OUTLINE_SHADOWMAP_PARAMETERS,
-      framebuffer: outlineFramebuffer
+        widthScale: widthScale * 1.3
+      }
     });
+    model.setParameters(OUTLINE_SHADOWMAP_PARAMETERS);
+    const shadowRenderPass = this.context.device.beginRenderPass({
+      id: `${this.props.id}-outline-shadowmap`,
+      framebuffer: outlineFramebuffer,
+      parameters: {viewport: [0, 0, viewportWidth, viewportHeight]},
+      clearColor: [0, 0, 0, 0],
+      clearDepth: 1,
+      clearStencil: 0
+    });
+    model.draw(shadowRenderPass);
+    shadowRenderPass.end();
 
     // Now use the outline shadowmap to render the lines (with outlines)
-    this.state.model.updateModuleSettings({
-      outlineEnabled: true,
-      outlineRenderShadowmap: false,
-      outlineShadowmap: shadowmapTexture
+    this.setShaderModuleProps({
+      outline: {
+        outlineEnabled: true,
+        outlineRenderShadowmap: false,
+        outlineShadowmap: shadowmapTexture
+      }
     });
-    this.state.model.draw({
-      uniforms: Object.assign({}, uniforms, {
-        jointType: Number(jointRounded),
-        capType: Number(capRounded),
-        widthScale: this.props.widthScale
-      }),
-      parameters: OUTLINE_RENDER_PARAMETERS
+    model.shaderInputs.setProps({
+      path: basePathProps
     });
+    model.setParameters(OUTLINE_RENDER_PARAMETERS);
+    model.draw(this.context.renderPass);
   }
 }
+
+function getFramebufferTexture(framebuffer: Framebuffer): Texture | null {
+  const colorAttachment = framebuffer.colorAttachments[0];
+
+  if (!colorAttachment) {
+    return null;
+  }
+
+  return 'texture' in colorAttachment ? colorAttachment.texture : colorAttachment;
+}