@luma.gl/engine 9.0.0-beta.1 → 9.0.0-beta.10

package/src/model/model.ts

@@ -1,25 +1,24 @@
-// luma.gl, MIT license
+// luma.gl
+// SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
+// A lot of imports, but then Model is where it all comes together...
 import type {TypedArray, RenderPipelineProps, RenderPipelineParameters} from '@luma.gl/core';
-import type {BufferLayout, VertexArray, TransformFeedback} from '@luma.gl/core';
+import type {BufferLayout, Shader, VertexArray, TransformFeedback} from '@luma.gl/core';
 import type {AttributeInfo, Binding, UniformValue, PrimitiveTopology} from '@luma.gl/core';
-import {
-  Device,
-  Buffer,
-  RenderPipeline,
-  RenderPass,
-  UniformStore,
-  getTypedArrayFromDataType
-} from '@luma.gl/core';
-import {log, uid, deepEqual, splitUniformsAndBindings, isNumberArray} from '@luma.gl/core';
-import {getAttributeInfosFromLayouts} from '@luma.gl/core';
+import {Device, DeviceFeature, Buffer, Texture, TextureView, Sampler} from '@luma.gl/core';
+import {RenderPipeline, RenderPass, UniformStore} from '@luma.gl/core';
+import {log, uid, deepEqual, isObjectEmpty, splitUniformsAndBindings} from '@luma.gl/core';
+import {getTypedArrayFromDataType, getAttributeInfosFromLayouts} from '@luma.gl/core';
+
 import type {ShaderModule, PlatformInfo} from '@luma.gl/shadertools';
 import {ShaderAssembler, getShaderLayoutFromWGSL} from '@luma.gl/shadertools';
-import {ShaderInputs} from '../shader-inputs';
+
 import type {Geometry} from '../geometry/geometry';
 import {GPUGeometry, makeGPUGeometry} from '../geometry/gpu-geometry';
+import {ShaderInputs} from '../shader-inputs';
 import {PipelineFactory} from '../lib/pipeline-factory';
+import {ShaderFactory} from '../lib/shader-factory';
 import {getDebugTableForShaderLayout} from '../debug/debug-shader-layout';
 import {debugFramebuffer} from '../debug/debug-framebuffer';
 
@@ -28,8 +27,9 @@ const LOG_DRAW_TIMEOUT = 10000;
 
 export type ModelProps = Omit<RenderPipelineProps, 'vs' | 'fs'> & {
   source?: string;
-  vs: {glsl?: string; wgsl?: string} | string | null;
-  fs: {glsl?: string; wgsl?: string} | string | null;
+  vs: string | null;
+  fs: string | null;
+
   /** shadertool shader modules (added to shader code) */
   modules?: ShaderModule[];
   /** Shadertool module defines (configures shader code)*/
@@ -38,10 +38,6 @@ export type ModelProps = Omit<RenderPipelineProps, 'vs' | 'fs'> & {
 
   /** Shader inputs, used to generated uniform buffers and bindings */
   shaderInputs?: ShaderInputs;
-  /** pipeline factory to use to create render pipelines. Defaults to default factory for the device */
-  pipelineFactory?: PipelineFactory;
-  /** Shader assembler. Defaults to the ShaderAssembler.getShaderAssembler() */
-  shaderAssembler?: ShaderAssembler;
 
   /** Parameters that are built into the pipeline */
   parameters?: RenderPipelineParameters;
@@ -59,14 +55,26 @@ export type ModelProps = Omit<RenderPipelineProps, 'vs' | 'fs'> & {
   attributes?: Record<string, Buffer>;
   /**   */
   constantAttributes?: Record<string, TypedArray>;
+  /** Some applications intentionally supply unused attributes */
+  ignoreUnknownAttributes?: boolean;
 
-  /** @internal For use with {@link TransformFeedback}, WebGL 2 only. */
+  /** @internal For use with {@link TransformFeedback}, WebGL only. */
   varyings?: string[];
 
   transformFeedback?: TransformFeedback;
 
   /** Mapped uniforms for shadertool modules */
   moduleSettings?: Record<string, Record<string, any>>;
+
+  /** Show shader source in browser? */
+  debugShaders?: 'never' | 'errors' | 'warnings' | 'always';
+
+  /** Factory used to create a {@link RenderPipeline}. Defaults to {@link Device} default factory. */
+  pipelineFactory?: PipelineFactory;
+  /** Factory used to create a {@link Shader}. Defaults to {@link Device} default factory. */
+  shaderFactory?: ShaderFactory;
+  /** Shader assembler. Defaults to the ShaderAssembler.getShaderAssembler() */
+  shaderAssembler?: ShaderAssembler;
 };
 
 /**
@@ -97,15 +105,21 @@ export class Model {
 
     shaderInputs: undefined!,
     pipelineFactory: undefined!,
+    shaderFactory: undefined!,
     transformFeedback: undefined,
-    shaderAssembler: ShaderAssembler.getDefaultShaderAssembler()
+    shaderAssembler: ShaderAssembler.getDefaultShaderAssembler(),
+
+    debugShaders: undefined,
+    ignoreUnknownAttributes: undefined
   };
 
   readonly device: Device;
   readonly id: string;
+  readonly source: string;
   readonly vs: string;
   readonly fs: string;
   readonly pipelineFactory: PipelineFactory;
+  readonly shaderFactory: ShaderFactory;
   userData: {[key: string]: any} = {};
 
   // Fixed properties (change can trigger pipeline rebuild)
@@ -154,12 +168,18 @@ export class Model {
 
   _uniformStore: UniformStore;
 
-  _pipelineNeedsUpdate: string | false = 'newly created';
   _attributeInfos: Record<string, AttributeInfo> = {};
   _gpuGeometry: GPUGeometry | null = null;
   private _getModuleUniforms: (props?: Record<string, Record<string, any>>) => Record<string, any>;
   private props: Required<ModelProps>;
 
+  _pipelineNeedsUpdate: string | false = 'newly created';
+  private _needsRedraw: string | false = 'initializing';
+  private _destroyed = false;
+
+  /** "Time" of last draw. Monotonically increasing timestamp */
+  _lastDrawTimestamp: number = -1;
+
   constructor(device: Device, props: ModelProps) {
     this.props = {...Model.defaultProps, ...props};
     props = this.props;
@@ -174,35 +194,40 @@ export class Model {
     );
     this.setShaderInputs(props.shaderInputs || new ShaderInputs(moduleMap));
 
-    const isWebGPU = this.device.info.type === 'webgpu';
-    // TODO - hack to support unified WGSL shader
-    // TODO - this is wrong, compile a single shader
-    if (this.props.source) {
-      if (isWebGPU) {
-        this.props.shaderLayout ||= getShaderLayoutFromWGSL(this.props.source);
-      }
-      this.props.fs = this.props.source;
-      this.props.vs = this.props.source;
-    }
-
-    // Support WGSL shader layout introspection
-    if (isWebGPU && typeof this.props.vs !== 'string') {
-      this.props.shaderLayout ||= getShaderLayoutFromWGSL(this.props.vs.wgsl);
-    }
-
     // Setup shader assembler
     const platformInfo = getPlatformInfo(device);
+
+    // Extract modules from shader inputs if not supplied
     const modules =
       (this.props.modules?.length > 0 ? this.props.modules : this.shaderInputs?.getModules()) || [];
-    const {vs, fs, getUniforms} = this.props.shaderAssembler.assembleShaders({
-      platformInfo,
-      ...this.props,
-      modules
-    });
 
-    this.vs = vs;
-    this.fs = fs;
-    this._getModuleUniforms = getUniforms;
+    const isWebGPU = this.device.type === 'webgpu';
+
+    // WebGPU
+    // TODO - hack to support unified WGSL shader
+    // TODO - this is wrong, compile a single shader
+    if (isWebGPU && this.props.source) {
+      // WGSL
+      this.props.shaderLayout ||= getShaderLayoutFromWGSL(this.props.source);
+      const {source, getUniforms} = this.props.shaderAssembler.assembleShader({
+        platformInfo,
+        ...this.props,
+        modules
+      });
+      this.source = source;
+      this._getModuleUniforms = getUniforms;
+    } else {
+      // GLSL
+      const {vs, fs, getUniforms} = this.props.shaderAssembler.assembleShaderPair({
+        platformInfo,
+        ...this.props,
+        modules
+      });
+
+      this.vs = vs;
+      this.fs = fs;
+      this._getModuleUniforms = getUniforms;
+    }
 
     this.vertexCount = this.props.vertexCount;
     this.instanceCount = this.props.instanceCount;
@@ -213,11 +238,12 @@ export class Model {
 
     // Geometry, if provided, sets topology and vertex cound
     if (props.geometry) {
-      this._gpuGeometry = this.setGeometry(props.geometry);
+      this.setGeometry(props.geometry);
     }
 
     this.pipelineFactory =
       props.pipelineFactory || PipelineFactory.getDefaultPipelineFactory(this.device);
+    this.shaderFactory = props.shaderFactory || ShaderFactory.getDefaultShaderFactory(this.device);
 
     // Create the pipeline
     // @note order is important
@@ -247,7 +273,9 @@ export class Model {
       this.setIndexBuffer(props.indexBuffer);
     }
     if (props.attributes) {
-      this.setAttributes(props.attributes);
+      this.setAttributes(props.attributes, {
+        ignoreUnknownAttributes: props.ignoreUnknownAttributes
+      });
     }
     if (props.constantAttributes) {
       this.setConstantAttributes(props.constantAttributes);
@@ -266,51 +294,93 @@ export class Model {
       this.transformFeedback = props.transformFeedback;
     }
 
-    // WebGL1?
-    // this.setUniforms(this._getModuleUniforms()); // Get all default module uniforms
-
     // Catch any access to non-standard props
     Object.seal(this);
   }
 
   destroy(): void {
+    if (this._destroyed) return;
     this.pipelineFactory.release(this.pipeline);
+    this.shaderFactory.release(this.pipeline.vs);
+    if (this.pipeline.fs) {
+      this.shaderFactory.release(this.pipeline.fs);
+    }
     this._uniformStore.destroy();
+    // TODO - mark resource as managed and destroyIfManaged() ?
+    this._gpuGeometry?.destroy();
+    this._destroyed = true;
   }
 
   // Draw call
 
+  /** Query redraw status. Clears the status. */
+  needsRedraw(): false | string {
+    // Catch any writes to already bound resources
+    if (this._getBindingsUpdateTimestamp() > this._lastDrawTimestamp) {
+      this.setNeedsRedraw('contents of bound textures or buffers updated');
+    }
+    const needsRedraw = this._needsRedraw;
+    this._needsRedraw = false;
+    return needsRedraw;
+  }
+
+  /** Mark the model as needing a redraw */
+  setNeedsRedraw(reason: string): void {
+    this._needsRedraw ||= reason;
+  }
+
   predraw() {
     // Update uniform buffers if needed
     this.updateShaderInputs();
+    // Check if the pipeline is invalidated
+    this.pipeline = this._updatePipeline();
   }
 
-  draw(renderPass: RenderPass): void {
+  draw(renderPass: RenderPass): boolean {
     this.predraw();
 
+    let drawSuccess: boolean;
     try {
       this._logDrawCallStart();
 
-      // Check if the pipeline is invalidated
-      // TODO - this is likely the worst place to do this from performance perspective. Perhaps add a predraw()?
+      // Update the pipeline if invalidated
+      // TODO - inside RenderPass is likely the worst place to do this from performance perspective.
+      // Application can call Model.predraw() to avoid this.
       this.pipeline = this._updatePipeline();
 
       // Set pipeline state, we may be sharing a pipeline so we need to set all state on every draw
       // Any caching needs to be done inside the pipeline functions
       this.pipeline.setBindings(this.bindings);
-      this.pipeline.setUniforms(this.uniforms);
+      if (!isObjectEmpty(this.uniforms)) {
+        this.pipeline.setUniformsWebGL(this.uniforms);
+      }
+
+      const {indexBuffer} = this.vertexArray;
+      const indexCount = indexBuffer
+        ? indexBuffer.byteLength / (indexBuffer.indexType === 'uint32' ? 4 : 2)
+        : undefined;
 
-      this.pipeline.draw({
+      drawSuccess = this.pipeline.draw({
         renderPass,
         vertexArray: this.vertexArray,
         vertexCount: this.vertexCount,
         instanceCount: this.instanceCount,
+        indexCount,
         transformFeedback: this.transformFeedback
       });
     } finally {
       this._logDrawCallEnd();
     }
     this._logFramebuffer(renderPass);
+
+    // Update needsRedraw flag
+    if (drawSuccess) {
+      this._lastDrawTimestamp = this.device.timestamp;
+      this._needsRedraw = false;
+    } else {
+      this._needsRedraw = 'waiting for resource initialization';
+    }
+    return drawSuccess;
   }
 
   // Update fixed fields (can trigger pipeline rebuild)
@@ -320,38 +390,17 @@ export class Model {
    * Geometry, set topology and bufferLayout
    * @note Can trigger a pipeline rebuild / pipeline cache fetch on WebGPU
    */
-  setGeometry(geometry: GPUGeometry | Geometry): GPUGeometry {
+  setGeometry(geometry: GPUGeometry | Geometry | null): void {
+    this._gpuGeometry?.destroy();
     const gpuGeometry = geometry && makeGPUGeometry(this.device, geometry);
-    this.setTopology(gpuGeometry.topology || 'triangle-list');
-    this.bufferLayout = mergeBufferLayouts(this.bufferLayout, gpuGeometry.bufferLayout);
-    if (this.vertexArray) {
-      this._setGeometryAttributes(gpuGeometry);
-    }
-    return gpuGeometry;
-  }
-
-  /**
-   * Updates the optional geometry attributes
-   * Geometry, sets several attributes, indexBuffer, and also vertex count
-   * @note Can trigger a pipeline rebuild / pipeline cache fetch on WebGPU
-   */
-  _setGeometryAttributes(gpuGeometry: GPUGeometry): void {
-    // Filter geometry attribute so that we don't issue warnings for unused attributes
-    const attributes = {...gpuGeometry.attributes};
-    for (const [attributeName] of Object.entries(attributes)) {
-      if (
-        !this.pipeline.shaderLayout.attributes.find(layout => layout.name === attributeName) &&
-        attributeName !== 'positions'
-      ) {
-        delete attributes[attributeName];
+    if (gpuGeometry) {
+      this.setTopology(gpuGeometry.topology || 'triangle-list');
+      this.bufferLayout = mergeBufferLayouts(gpuGeometry.bufferLayout, this.bufferLayout);
+      if (this.vertexArray) {
+        this._setGeometryAttributes(gpuGeometry);
       }
     }
-
-    // TODO - delete previous geometry?
-    this.vertexCount = gpuGeometry.vertexCount;
-    this.setIndexBuffer(gpuGeometry.indices);
-    this.setAttributes(gpuGeometry.attributes, 'ignore-unknown');
-    this.setAttributes(attributes);
+    this._gpuGeometry = gpuGeometry;
   }
 
   /**
@@ -367,7 +416,7 @@ export class Model {
 
   /**
    * Updates the buffer layout.
-   * @note Triggers a pipeline rebuild / pipeline cache fetch on WebGPU
+   * @note Triggers a pipeline rebuild / pipeline cache fetch
    */
   setBufferLayout(bufferLayout: BufferLayout[]): void {
     this.bufferLayout = this._gpuGeometry
@@ -410,6 +459,7 @@ export class Model {
    */
   setVertexCount(vertexCount: number): void {
     this.vertexCount = vertexCount;
+    this.setNeedsRedraw('vertexCount');
   }
 
   /**
@@ -418,6 +468,7 @@ export class Model {
    */
   setInstanceCount(instanceCount: number): void {
     this.instanceCount = instanceCount;
+    this.setNeedsRedraw('instanceCount');
   }
 
   setShaderInputs(shaderInputs: ShaderInputs): void {
@@ -428,39 +479,13 @@ export class Model {
       const uniformBuffer = this._uniformStore.getManagedUniformBuffer(this.device, moduleName);
       this.bindings[`${moduleName}Uniforms`] = uniformBuffer;
     }
-  }
-
-  /**
-   * Updates shader module settings (which results in uniforms being set)
-   */
-  setShaderModuleProps(props: Record<string, any>): void {
-    const uniforms = this._getModuleUniforms(props);
-
-    // Extract textures & framebuffers set by the modules
-    // TODO better way to extract bindings
-    const keys = Object.keys(uniforms).filter(k => {
-      const uniform = uniforms[k];
-      return !isNumberArray(uniform) && typeof uniform !== 'number' && typeof uniform !== 'boolean';
-    });
-    const bindings: Record<string, Binding> = {};
-    for (const k of keys) {
-      bindings[k] = uniforms[k];
-      delete uniforms[k];
-    }
+    this.setNeedsRedraw('shaderInputs');
   }
 
   updateShaderInputs(): void {
     this._uniformStore.setUniforms(this.shaderInputs.getUniformValues());
-  }
-
-  /**
-   * @deprecated Updates shader module settings (which results in uniforms being set)
-   */
-  updateModuleSettings(props: Record<string, any>): void {
-    log.warn('Model.updateModuleSettings is deprecated. Use Model.shaderInputs.setProps()')();
-    const {bindings, uniforms} = splitUniformsAndBindings(this._getModuleUniforms(props));
-    Object.assign(this.bindings, bindings);
-    Object.assign(this.uniforms, uniforms);
+    // TODO - this is already tracked through buffer/texture update times?
+    this.setNeedsRedraw('shaderInputs');
   }
 
   /**
@@ -468,17 +493,15 @@ export class Model {
    */
   setBindings(bindings: Record<string, Binding>): void {
     Object.assign(this.bindings, bindings);
+    this.setNeedsRedraw('bindings');
   }
 
   /**
-   * Sets individual uniforms
-   * @deprecated WebGL only, use uniform buffers for portability
-   * @param uniforms
-   * @returns self for chaining
+   * Updates optional transform feedback. WebGL only.
    */
-  setUniforms(uniforms: Record<string, UniformValue>): void {
-    this.pipeline.setUniforms(uniforms);
-    Object.assign(this.uniforms, uniforms);
+  setTransformFeedback(transformFeedback: TransformFeedback | null): void {
+    this.transformFeedback = transformFeedback;
+    this.setNeedsRedraw('transformFeedback');
   }
 
   /**
@@ -487,27 +510,26 @@ export class Model {
    */
   setIndexBuffer(indexBuffer: Buffer | null): void {
     this.vertexArray.setIndexBuffer(indexBuffer);
-  }
-
-  /**
-   * Updates optional transform feedback. WebGL 2 only.
-   */
-  setTransformFeedback(transformFeedback: TransformFeedback | null): void {
-    this.transformFeedback = transformFeedback;
+    this.setNeedsRedraw('indexBuffer');
   }
 
   /**
    * Sets attributes (buffers)
    * @note Overrides any attributes previously set with the same name
    */
-  setAttributes(buffers: Record<string, Buffer>, _option?: 'ignore-unknown'): void {
+  setAttributes(
+    buffers: Record<string, Buffer>,
+    options?: {ignoreUnknownAttributes?: boolean}
+  ): void {
     if (buffers.indices) {
       log.warn(
         `Model:${this.id} setAttributes() - indexBuffer should be set using setIndexBuffer()`
       )();
     }
     for (const [bufferName, buffer] of Object.entries(buffers)) {
-      const bufferLayout = this.bufferLayout.find(layout => getAttributeNames(layout).includes(bufferName));
+      const bufferLayout = this.bufferLayout.find(layout =>
+        getAttributeNames(layout).includes(bufferName)
+      );
       if (!bufferLayout) {
         log.warn(`Model(${this.id}): Missing layout for buffer "${bufferName}".`)();
         continue; // eslint-disable-line no-continue
@@ -523,12 +545,13 @@ export class Model {
           set = true;
         }
       }
-      if (!set && _option !== 'ignore-unknown') {
+      if (!set && (options?.ignoreUnknownAttributes || this.props.ignoreUnknownAttributes)) {
         log.warn(
           `Model(${this.id}): Ignoring buffer "${buffer.id}" for unknown attribute "${bufferName}"`
         )();
       }
     }
+    this.setNeedsRedraw('attributes');
   }
 
   /**
@@ -543,45 +566,127 @@ export class Model {
     for (const [attributeName, value] of Object.entries(attributes)) {
       const attributeInfo = this._attributeInfos[attributeName];
       if (attributeInfo) {
-        this.vertexArray.setConstant(attributeInfo.location, value);
+        this.vertexArray.setConstantWebGL(attributeInfo.location, value);
       } else {
         log.warn(
           `Model "${this.id}: Ignoring constant supplied for unknown attribute "${attributeName}"`
         )();
       }
     }
+    this.setNeedsRedraw('constants');
   }
 
+  // DEPRECATED METHODS
+
+  /**
+   * Sets individual uniforms
+   * @deprecated WebGL only, use uniform buffers for portability
+   * @param uniforms
+   */
+  setUniforms(uniforms: Record<string, UniformValue>): void {
+    if (!isObjectEmpty(uniforms)) {
+      this.pipeline.setUniformsWebGL(uniforms);
+      Object.assign(this.uniforms, uniforms);
+    }
+    this.setNeedsRedraw('uniforms');
+  }
+
+  /**
+   * @deprecated Updates shader module settings (which results in uniforms being set)
+   */
+  updateModuleSettings(props: Record<string, any>): void {
+    log.warn('Model.updateModuleSettings is deprecated. Use Model.shaderInputs.setProps()')();
+    const {bindings, uniforms} = splitUniformsAndBindings(this._getModuleUniforms(props));
+    Object.assign(this.bindings, bindings);
+    Object.assign(this.uniforms, uniforms);
+    this.setNeedsRedraw('moduleSettings');
+  }
+
+  // Internal methods
+
+  /** Get the timestamp of the latest updated bound GPU memory resource (buffer/texture). */
+  _getBindingsUpdateTimestamp(): number {
+    let timestamp = 0;
+    for (const binding of Object.values(this.bindings)) {
+      if (binding instanceof TextureView) {
+        timestamp = Math.max(timestamp, binding.texture.updateTimestamp);
+      } else if (binding instanceof Buffer || binding instanceof Texture) {
+        timestamp = Math.max(timestamp, binding.updateTimestamp);
+      } else if (!(binding instanceof Sampler)) {
+        timestamp = Math.max(timestamp, binding.buffer.updateTimestamp);
+      }
+    }
+    return timestamp;
+  }
+
+  /**
+   * Updates the optional geometry attributes
+   * Geometry, sets several attributes, indexBuffer, and also vertex count
+   * @note Can trigger a pipeline rebuild / pipeline cache fetch on WebGPU
+   */
+  _setGeometryAttributes(gpuGeometry: GPUGeometry): void {
+    // Filter geometry attribute so that we don't issue warnings for unused attributes
+    const attributes = {...gpuGeometry.attributes};
+    for (const [attributeName] of Object.entries(attributes)) {
+      if (
+        !this.pipeline.shaderLayout.attributes.find(layout => layout.name === attributeName) &&
+        attributeName !== 'positions'
+      ) {
+        delete attributes[attributeName];
+      }
+    }
+
+    // TODO - delete previous geometry?
+    this.vertexCount = gpuGeometry.vertexCount;
+    this.setIndexBuffer(gpuGeometry.indices);
+    this.setAttributes(gpuGeometry.attributes, {ignoreUnknownAttributes: true});
+    this.setAttributes(attributes, {ignoreUnknownAttributes: this.props.ignoreUnknownAttributes});
+
+    this.setNeedsRedraw('geometry attributes');
+  }
+
+  /** Mark pipeline as needing update */
   _setPipelineNeedsUpdate(reason: string): void {
-    this._pipelineNeedsUpdate = this._pipelineNeedsUpdate || reason;
+    this._pipelineNeedsUpdate ||= reason;
+    this.setNeedsRedraw(reason);
   }
 
+  /** Update pipeline if needed */
   _updatePipeline(): RenderPipeline {
     if (this._pipelineNeedsUpdate) {
+      let prevShaderVs: Shader | null = null;
+      let prevShaderFs: Shader | null = null;
       if (this.pipeline) {
         log.log(
           1,
           `Model ${this.id}: Recreating pipeline because "${this._pipelineNeedsUpdate}".`
         )();
+        prevShaderVs = this.pipeline.vs;
+        prevShaderFs = this.pipeline.fs;
       }
-      
+
       this._pipelineNeedsUpdate = false;
 
-      const vs = this.device.createShader({
+      const vs = this.shaderFactory.createShader({
         id: `${this.id}-vertex`,
         stage: 'vertex',
-        source: this.vs
+        source: this.source || this.vs,
+        debug: this.props.debugShaders
       });
 
-      const fs = this.fs
-        ? this.device.createShader({
+      let fs: Shader | null = null;
+      if (this.source) {
+        fs = vs;
+      } else if (this.fs) {
+        fs = this.shaderFactory.createShader({
           id: `${this.id}-fragment`,
           stage: 'fragment',
-          source: this.fs
-        })
-        : null;
+          source: this.source || this.fs,
+          debug: this.props.debugShaders
+        });
+      }
 
-      this.pipeline = this.device.createRenderPipeline({
+      this.pipeline = this.pipelineFactory.createRenderPipeline({
         ...this.props,
         bufferLayout: this.bufferLayout,
         topology: this.topology,
@@ -594,6 +699,9 @@ export class Model {
         this.pipeline.shaderLayout,
         this.bufferLayout
       );
+
+      if (prevShaderVs) this.shaderFactory.release(prevShaderVs);
+      if (prevShaderFs) this.shaderFactory.release(prevShaderFs);
     }
     return this.pipeline;
   }
@@ -644,7 +752,7 @@ export class Model {
     const debugFramebuffers = log.get('framebuffer');
     this._drawCount++;
     // Update first 3 frames and then every 60 frames
-    if (!debugFramebuffers || ((this._drawCount++ > 3) && (this._drawCount % 60))) {
+    if (!debugFramebuffers || (this._drawCount++ > 3 && this._drawCount % 60)) {
       return;
     }
     // TODO - display framebuffer output in debug window
@@ -710,11 +818,12 @@ function mergeBufferLayouts(layouts1: BufferLayout[], layouts2: BufferLayout[]):
 /** Create a shadertools platform info from the Device */
 export function getPlatformInfo(device: Device): PlatformInfo {
   return {
-    type: device.info.type,
+    type: device.type,
     shaderLanguage: device.info.shadingLanguage,
     shaderLanguageVersion: device.info.shadingLanguageVersion as 100 | 300,
     gpu: device.info.gpu,
-    features: device.features
+    // HACK - we pretend that the DeviceFeatures is a Set, it has a similar API
+    features: device.features as unknown as Set<DeviceFeature>
   };
 }