@luma.gl/engine 9.1.9 → 9.2.0-alpha.2

package/src/async-texture/texture-setters.ts.disabled

@@ -0,0 +1,296 @@
+// luma.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import type {Texture, TypedArray, TextureFormat, ExternalImage} from '@luma.gl/core';
+import {isExternalImage, getExternalImageSize} from '@luma.gl/core';
+
+/** Names of cube texture faces */
+export type TextureCubeFace = '+X' | '-X' | '+Y' | '-Y' | '+Z' | '-Z';
+
+/**
+ * One mip level
+ * Basic data structure is similar to `ImageData`
+ * additional optional fields can describe compressed texture data.
+ */
+export type TextureLevelData = {
+  /** WebGPU style format string. Defaults to 'rgba8unorm' */
+  format?: TextureFormat;
+  data: TypedArray;
+  width: number;
+  height: number;
+
+  compressed?: boolean;
+  byteLength?: number;
+  hasAlpha?: boolean;
+};
+
+export type TextureLevelSource = TextureLevelData | ExternalImage;
+
+/** Texture data can be one or more mip levels */
+export type TextureData = TextureLevelData | ExternalImage | (TextureLevelData | ExternalImage)[];
+
+/** @todo - define what data type is supported for 1D textures */
+export type Texture1DData = TypedArray | TextureLevelData;
+
+/** Texture data can be one or more mip levels */
+export type Texture2DData =
+  | TypedArray
+  | TextureLevelData
+  | ExternalImage
+  | (TextureLevelData | ExternalImage)[];
+
+/** Array of textures */
+export type Texture3DData = TypedArray | TextureData[];
+
+/** 6 face textures */
+export type TextureCubeData = Record<TextureCubeFace, Texture2DData>;
+
+/** Array of textures */
+export type TextureArrayData = TextureData[];
+
+/** Array of 6 face textures */
+export type TextureCubeArrayData = Record<TextureCubeFace, TextureData>[];
+
+export type TextureDataProps =
+  | Texture1DProps
+  | Texture2DProps
+  | Texture3DProps
+  | TextureArrayProps
+  | TextureCubeProps
+  | TextureCubeArrayProps;
+
+export type Texture1DProps = {dimension: '1d'; data?: Texture1DData | null};
+export type Texture2DProps = {dimension?: '2d'; data?: Texture2DData | null};
+export type Texture3DProps = {dimension: '3d'; data?: Texture3DData | null};
+export type TextureArrayProps = {dimension: '2d-array'; data?: TextureArrayData | null};
+export type TextureCubeProps = {dimension: 'cube'; data?: TextureCubeData | null};
+export type TextureCubeArrayProps = {dimension: 'cube-array'; data: TextureCubeArrayData | null};
+
+export const CubeFaces: TextureCubeFace[] = ['+X', '-X', '+Y', '-Y', '+Z', '-Z'];
+
+/** Check if texture data is a typed array */
+export function isTextureLevelData(data: TextureData): data is TextureLevelData {
+  const typedArray = (data as TextureLevelData)?.data;
+  return ArrayBuffer.isView(typedArray);
+}
+
+/** Get the size of the texture described by the provided TextureData */
+export function getTextureDataSize(
+  data: TextureData | TextureCubeData | TextureArrayData | TextureCubeArrayData | TypedArray
+): {width: number; height: number} | null {
+  if (!data) {
+    return null;
+  }
+  if (ArrayBuffer.isView(data)) {
+    return null;
+  }
+  // Recurse into arrays (array of miplevels)
+  if (Array.isArray(data)) {
+    return getTextureDataSize(data[0]);
+  }
+  if (isExternalImage(data)) {
+    return getExternalImageSize(data);
+  }
+  if (data && typeof data === 'object' && data.constructor === Object) {
+    const textureDataArray = Object.values(data) as Texture2DData[];
+    const untypedData = textureDataArray[0] as any;
+    return {width: untypedData.width, height: untypedData.height};
+  }
+  throw new Error('texture size deduction failed');
+}
+
+/**
+ * Normalize TextureData to an array of TextureLevelData / ExternalImages
+ * @param data
+ * @param options
+ * @returns array of TextureLevelData / ExternalImages
+ */
+export function normalizeTextureData(
+  data: Texture2DData,
+  options: {width: number; height: number; depth: number}
+): (TextureLevelData | ExternalImage)[] {
+  let lodArray: (TextureLevelData | ExternalImage)[];
+  if (ArrayBuffer.isView(data)) {
+    lodArray = [
+      {
+        // ts-expect-error does data really need to be Uint8ClampedArray?
+        data,
+        width: options.width,
+        height: options.height
+        // depth: options.depth
+      }
+    ];
+  } else if (!Array.isArray(data)) {
+    lodArray = [data];
+  } else {
+    lodArray = data;
+  }
+  return lodArray;
+}
+
+/** Convert luma.gl cubemap face constants to depth index */
+export function getCubeFaceDepth(face: TextureCubeFace): number {
+  // prettier-ignore
+  switch (face) {
+        case '+X': return  0;
+        case '-X': return  1;
+        case '+Y': return  2;
+        case '-Y': return  3;
+        case '+Z': return  4;
+        case '-Z': return  5;
+        default: throw new Error(face);
+      }
+}
+
+// EXPERIMENTAL
+
+/** Set multiple mip levels */
+export function setTexture1DData(texture: Texture, data: Texture1DData): void {
+  throw new Error('setTexture1DData not supported in WebGL.');
+}
+
+/** Set multiple mip levels */
+export function setTexture2DData(texture: Texture, lodData: Texture2DData, depth = 0): void {
+  this.bind();
+
+  const lodArray = Texture.normalizeTextureData(lodData, this);
+
+  // If the user provides multiple LODs, then automatic mipmap
+  // generation generateMipmap() should be disabled to avoid overwriting them.
+  if (lodArray.length > 1 && this.props.mipmaps !== false) {
+    log.warn(`Texture ${this.id} mipmap and multiple LODs.`)();
+  }
+
+  for (let lodLevel = 0; lodLevel < lodArray.length; lodLevel++) {
+    const imageData = lodArray[lodLevel];
+    this._setMipLevel(depth, lodLevel, imageData);
+  }
+
+  this.unbind();
+}
+
+/**
+ * Sets 3D texture data: multiple depth slices, multiple mip levels
+ * @param data
+ */
+export function setTexture3DData(texture: Texture, data: Texture3DData): void {
+  if (this.props.dimension !== '3d') {
+    throw new Error(this.id);
+  }
+  if (ArrayBuffer.isView(data)) {
+    this.bind();
+    copyCPUDataToMipLevel(this.device.gl, data, this);
+    this.unbind();
+  }
+}
+
+/**
+ * Set Cube texture data, multiple faces, multiple mip levels
+ * @todo - could support TextureCubeArray with depth
+ * @param data
+ * @param index
+ */
+export function setTextureCubeData(texture: Texture, data: TextureCubeData): void {
+  if (this.props.dimension !== 'cube') {
+    throw new Error(this.id);
+  }
+  for (const face of Texture.CubeFaces) {
+    this.setTextureCubeFaceData(data[face], face);
+  }
+}
+
+/**
+ * Sets texture array data, multiple levels, multiple depth slices
+ * @param data
+ */
+export function setTextureArrayData(texture: Texture, data: TextureArrayData): void {
+  if (this.props.dimension !== '2d-array') {
+    throw new Error(this.id);
+  }
+  throw new Error('setTextureArrayData not implemented.');
+}
+
+/**
+ * Sets texture cube array, multiple faces, multiple levels, multiple mip levels
+ * @param data
+ */
+export function setTextureCubeArrayData(texture: Texture, data: TextureCubeArrayData): void {
+  throw new Error('setTextureCubeArrayData not supported in WebGL2.');
+}
+
+export function setTextureCubeFaceData(
+  texture: Texture,
+  lodData: Texture2DData,
+  face: TextureCubeFace,
+  depth: number = 0
+): void {
+  // assert(this.props.dimension === 'cube');
+
+  // If the user provides multiple LODs, then automatic mipmap
+  // generation generateMipmap() should be disabled to avoid overwriting them.
+  if (Array.isArray(lodData) && lodData.length > 1 && this.props.mipmaps !== false) {
+    log.warn(`${this.id} has mipmap and multiple LODs.`)();
+  }
+
+  const faceDepth = Texture.CubeFaces.indexOf(face);
+
+  this.setTexture2DData(lodData, faceDepth);
+}
+
+// TODO - Remove when texture refactor is complete
+
+/*
+setCubeMapData(options: {
+  width: number;
+  height: number;
+  data: Record<GL, Texture2DData> | Record<TextureCubeFace, Texture2DData>;
+  format?: any;
+  type?: any;
+  /** @deprecated Use .data *
+  pixels: any;
+}): void {
+  const {gl} = this;
+
+  const {width, height, pixels, data, format = GL.RGBA, type = GL.UNSIGNED_BYTE} = options;
+
+  // pixel data (imageDataMap) is an Object from Face to Image or Promise.
+  // For example:
+  // {
+  // GL.TEXTURE_CUBE_MAP_POSITIVE_X : Image-or-Promise,
+  // GL.TEXTURE_CUBE_MAP_NEGATIVE_X : Image-or-Promise,
+  // ... }
+  // To provide multiple level-of-details (LODs) this can be Face to Array
+  // of Image or Promise, like this
+  // {
+  // GL.TEXTURE_CUBE_MAP_POSITIVE_X : [Image-or-Promise-LOD-0, Image-or-Promise-LOD-1],
+  // GL.TEXTURE_CUBE_MAP_NEGATIVE_X : [Image-or-Promise-LOD-0, Image-or-Promise-LOD-1],
+  // ... }
+
+  const imageDataMap = this._getImageDataMap(pixels || data);
+
+  const resolvedFaces = WEBGLTexture.FACES.map(face => {
+    const facePixels = imageDataMap[face];
+    return Array.isArray(facePixels) ? facePixels : [facePixels];
+  });
+  this.bind();
+
+  WEBGLTexture.FACES.forEach((face, index) => {
+    if (resolvedFaces[index].length > 1 && this.props.mipmaps !== false) {
+      // If the user provides multiple LODs, then automatic mipmap
+      // generation generateMipmaps() should be disabled to avoid overwritting them.
+      log.warn(`${this.id} has mipmap and multiple LODs.`)();
+    }
+    resolvedFaces[index].forEach((image, lodLevel) => {
+      // TODO: adjust width & height for LOD!
+      if (width && height) {
+        gl.texImage2D(face, lodLevel, format, width, height, 0 /* border*, format, type, image);
+      } else {
+        gl.texImage2D(face, lodLevel, format, format, type, image);
+      }
+    });
+  });
+
+  this.unbind();
+}
+*/

package/src/compute/computation.ts

@@ -10,7 +10,7 @@ import {
   ComputePass,
   UniformStore,
   log,
-  getTypedArrayFromDataType
+  getTypedArrayConstructor
 } from '@luma.gl/core';
 import type {ShaderModule, PlatformInfo} from '@luma.gl/shadertools';
 import {ShaderAssembler, getShaderLayoutFromWGSL} from '@luma.gl/shadertools';
@@ -30,7 +30,7 @@ export type ComputationProps = Omit<ComputePipelineProps, 'shader'> & {
   /** shadertool shader modules (added to shader code) */
   modules?: ShaderModule[];
   /** Shadertool module defines (configures shader code)*/
-  defines?: Record<string, string | number | boolean>;
+  defines?: Record<string, boolean>;
   // TODO - injections, hooks etc?
 
   /** Shader inputs, used to generated uniform buffers and bindings */
@@ -340,7 +340,7 @@ export class Computation {
 
   // TODO - fix typing of luma data types
   _getBufferOrConstantValues(attribute: Buffer | TypedArray, dataType: any): string {
-    const TypedArrayConstructor = getTypedArrayFromDataType(dataType);
+    const TypedArrayConstructor = getTypedArrayConstructor(dataType);
     const typedArray =
       attribute instanceof Buffer ? new TypedArrayConstructor(attribute.debugData) : attribute;
     return typedArray.toString();

package/src/compute/swap.ts

@@ -46,7 +46,9 @@ export class SwapFramebuffers extends Swap<Framebuffer> {
         ? colorAttachment
         : device.createTexture({
             format: colorAttachment,
-            usage: Texture.COPY_DST | Texture.RENDER_ATTACHMENT
+            usage: Texture.SAMPLE | Texture.RENDER | Texture.COPY_SRC | Texture.COPY_DST,
+            width: 1,
+            height: 1
           })
     );
 
@@ -57,7 +59,10 @@ export class SwapFramebuffers extends Swap<Framebuffer> {
         ? colorAttachment
         : device.createTexture({
             format: colorAttachment,
-            usage: Texture.COPY_DST | Texture.RENDER_ATTACHMENT
+            usage:
+              Texture.TEXTURE | Texture.COPY_SRC | Texture.COPY_DST | Texture.RENDER_ATTACHMENT,
+            width: 1,
+            height: 1
           })
     );
 

package/src/compute/texture-transform.ts

@@ -3,8 +3,9 @@
 // Copyright (c) vis.gl contributors
 
 import {Buffer, Device, Framebuffer, RenderPassProps, Sampler, Texture} from '@luma.gl/core';
-import {Model, ModelProps} from '../model/model';
 import {getPassthroughFS} from '@luma.gl/shadertools';
+import {Model, ModelProps} from '../model/model';
+import {uid} from '../utils/uid';
 
 /**
  * Properties for creating a {@link TextureTransform}
@@ -60,7 +61,7 @@ export class TextureTransform {
     });
 
     this.model = new Model(this.device, {
-      id: props.id || 'texture-transform-model',
+      id: props.id || uid('texture-transform-model'),
       fs:
         props.fs ||
         getPassthroughFS({
@@ -94,6 +95,7 @@ export class TextureTransform {
     const renderPass = this.device.beginRenderPass({framebuffer, ...options});
     this.model.draw(renderPass);
     renderPass.end();
+    this.device.submit();
   }
 
   getTargetTexture(): Texture {

package/src/debug/copy-texture-to-image.ts

@@ -2,8 +2,7 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import {Texture, Framebuffer} from '@luma.gl/core';
-import {flipRows, scalePixels} from './pixel-data-utils';
+import {Texture, Framebuffer, TypedArray} from '@luma.gl/core';
 
 /**
  * Options for copying texture pixels to image
@@ -71,3 +70,54 @@ export function copyTextureToDataUrl(
 
   return canvas.toDataURL('image/png');
 }
+
+// HELPERS
+
+/**
+ * Flip rows (can be used on arrays returned from `Framebuffer.readPixels`)
+ * https: *stackoverflow.com/questions/41969562/
+ * how-can-i-flip-the-result-of-webglrenderingcontext-readpixels
+ * @param param0
+ */
+export function flipRows(options: {
+  data: TypedArray;
+  width: number;
+  height: number;
+  bytesPerPixel?: number;
+  temp?: Uint8Array;
+}): void {
+  const {data, width, height, bytesPerPixel = 4, temp} = options;
+  const bytesPerRow = width * bytesPerPixel;
+
+  // make a temp buffer to hold one row
+  const tempBuffer = temp || new Uint8Array(bytesPerRow);
+  for (let y = 0; y < height / 2; ++y) {
+    const topOffset = y * bytesPerRow;
+    const bottomOffset = (height - y - 1) * bytesPerRow;
+    // make copy of a row on the top half
+    tempBuffer.set(data.subarray(topOffset, topOffset + bytesPerRow));
+    // copy a row from the bottom half to the top
+    data.copyWithin(topOffset, bottomOffset, bottomOffset + bytesPerRow);
+    // copy the copy of the top half row to the bottom half
+    data.set(tempBuffer, bottomOffset);
+  }
+}
+
+export function scalePixels(options: {data: TypedArray; width: number; height: number}): {
+  data: Uint8Array;
+  width: number;
+  height: number;
+} {
+  const {data, width, height} = options;
+  const newWidth = Math.round(width / 2);
+  const newHeight = Math.round(height / 2);
+  const newData = new Uint8Array(newWidth * newHeight * 4);
+  for (let y = 0; y < newHeight; y++) {
+    for (let x = 0; x < newWidth; x++) {
+      for (let c = 0; c < 4; c++) {
+        newData[(y * newWidth + x) * 4 + c] = data[(y * 2 * width + x * 2) * 4 + c];
+      }
+    }
+  }
+  return {data: newData, width: newWidth, height: newHeight};
+}

package/src/factories/pipeline-factory.ts

@@ -3,7 +3,8 @@
 // Copyright (c) vis.gl contributors
 
 import type {RenderPipelineProps, ComputePipelineProps} from '@luma.gl/core';
-import {Device, RenderPipeline, ComputePipeline} from '@luma.gl/core';
+import {Device, RenderPipeline, ComputePipeline, log} from '@luma.gl/core';
+import {uid} from '../utils/uid';
 
 export type PipelineFactoryProps = RenderPipelineProps;
 
@@ -18,78 +19,171 @@ export class PipelineFactory {
 
   /** Get the singleton default pipeline factory for the specified device */
   static getDefaultPipelineFactory(device: Device): PipelineFactory {
-    device._lumaData.defaultPipelineFactory =
-      device._lumaData.defaultPipelineFactory || new PipelineFactory(device);
-    return device._lumaData.defaultPipelineFactory as PipelineFactory;
+    device._lumaData['defaultPipelineFactory'] =
+      device._lumaData['defaultPipelineFactory'] || new PipelineFactory(device);
+    return device._lumaData['defaultPipelineFactory'] as PipelineFactory;
   }
 
   readonly device: Device;
+  readonly cachingEnabled: boolean;
   readonly destroyPolicy: 'unused' | 'never';
+  readonly debug: boolean;
 
   private _hashCounter: number = 0;
   private readonly _hashes: Record<string, number> = {};
   private readonly _renderPipelineCache: Record<string, RenderPipelineCacheItem> = {};
   private readonly _computePipelineCache: Record<string, ComputePipelineCacheItem> = {};
 
+  get [Symbol.toStringTag](): string {
+    return 'PipelineFactory';
+  }
+
+  toString(): string {
+    return `PipelineFactory(${this.device.id})`;
+  }
+
   constructor(device: Device) {
     this.device = device;
-    this.destroyPolicy = device.props._factoryDestroyPolicy;
+    this.cachingEnabled = device.props._cachePipelines;
+    this.destroyPolicy = device.props._cacheDestroyPolicy;
+    this.debug = device.props.debugFactories;
   }
 
-  /** Return a RenderPipeline matching props. Reuses a similar pipeline if already created. */
+  /** Return a RenderPipeline matching supplied props. Reuses an equivalent pipeline if already created. */
   createRenderPipeline(props: RenderPipelineProps): RenderPipeline {
+    if (!this.cachingEnabled) {
+      return this.device.createRenderPipeline(props);
+    }
+
     const allProps: Required<RenderPipelineProps> = {...RenderPipeline.defaultProps, ...props};
 
+    const cache = this._renderPipelineCache;
     const hash = this._hashRenderPipeline(allProps);
 
-    if (!this._renderPipelineCache[hash]) {
-      const pipeline = this.device.createRenderPipeline({
+    let pipeline: RenderPipeline = cache[hash]?.pipeline;
+    if (!pipeline) {
+      pipeline = this.device.createRenderPipeline({
         ...allProps,
-        id: allProps.id ? `${allProps.id}-cached` : undefined
+        id: allProps.id ? `${allProps.id}-cached` : uid('unnamed-cached')
       });
       pipeline.hash = hash;
-      this._renderPipelineCache[hash] = {pipeline, useCount: 0};
+      cache[hash] = {pipeline, useCount: 1};
+      if (this.debug) {
+        log.warn(`${this}: ${pipeline} created, count=${cache[hash].useCount}`)();
+      }
+    } else {
+      cache[hash].useCount++;
+      if (this.debug) {
+        log.warn(
+          `${this}: ${cache[hash].pipeline} reused, count=${cache[hash].useCount}, (id=${props.id})`
+        )();
+      }
     }
 
-    this._renderPipelineCache[hash].useCount++;
-    return this._renderPipelineCache[hash].pipeline;
+    return pipeline;
   }
 
+  /** Return a ComputePipeline matching supplied props. Reuses an equivalent pipeline if already created. */
   createComputePipeline(props: ComputePipelineProps): ComputePipeline {
+    if (!this.cachingEnabled) {
+      return this.device.createComputePipeline(props);
+    }
+
     const allProps: Required<ComputePipelineProps> = {...ComputePipeline.defaultProps, ...props};
 
+    const cache = this._computePipelineCache;
     const hash = this._hashComputePipeline(allProps);
 
-    if (!this._computePipelineCache[hash]) {
-      const pipeline = this.device.createComputePipeline({
+    let pipeline: ComputePipeline = cache[hash]?.pipeline;
+    if (!pipeline) {
+      pipeline = this.device.createComputePipeline({
         ...allProps,
         id: allProps.id ? `${allProps.id}-cached` : undefined
       });
       pipeline.hash = hash;
-      this._computePipelineCache[hash] = {pipeline, useCount: 0};
+      cache[hash] = {pipeline, useCount: 1};
+      if (this.debug) {
+        log.warn(`${this}: ${pipeline} created, count=${cache[hash].useCount}`)();
+      }
+    } else {
+      cache[hash].useCount++;
+      if (this.debug) {
+        log.warn(
+          `${this}: ${cache[hash].pipeline} reused, count=${cache[hash].useCount}, (id=${props.id})`
+        )();
+      }
     }
 
-    this._computePipelineCache[hash].useCount++;
-    return this._computePipelineCache[hash].pipeline;
+    return pipeline;
   }
 
   release(pipeline: RenderPipeline | ComputePipeline): void {
+    if (!this.cachingEnabled) {
+      pipeline.destroy();
+      return;
+    }
+
+    const cache = this._getCache(pipeline);
     const hash = pipeline.hash;
-    const cache =
-      pipeline instanceof ComputePipeline ? this._computePipelineCache : this._renderPipelineCache;
+
     cache[hash].useCount--;
     if (cache[hash].useCount === 0) {
-      if (this.destroyPolicy === 'unused') {
-        cache[hash].pipeline.destroy();
-        delete cache[hash];
+      this._destroyPipeline(pipeline);
+      if (this.debug) {
+        log.warn(`${this}: ${pipeline} released and destroyed`)();
       }
+    } else if (cache[hash].useCount < 0) {
+      log.error(`${this}: ${pipeline} released, useCount < 0, resetting`)();
+      cache[hash].useCount = 0;
+    } else if (this.debug) {
+      log.warn(`${this}: ${pipeline} released, count=${cache[hash].useCount}`)();
     }
   }
 
   // PRIVATE
+
+  /** Destroy a cached pipeline, removing it from the cache (depending on destroy policy) */
+  private _destroyPipeline(pipeline: RenderPipeline | ComputePipeline): boolean {
+    const cache = this._getCache(pipeline);
+
+    switch (this.destroyPolicy) {
+      case 'never':
+        return false;
+      case 'unused':
+        delete cache[pipeline.hash];
+        pipeline.destroy();
+        return true;
+    }
+  }
+
+  /** Get the appropriate cache for the type of pipeline */
+  private _getCache(
+    pipeline: RenderPipeline | ComputePipeline
+  ): Record<string, RenderPipelineCacheItem> | Record<string, ComputePipelineCacheItem> {
+    let cache:
+      | Record<string, RenderPipelineCacheItem>
+      | Record<string, ComputePipelineCacheItem>
+      | undefined;
+    if (pipeline instanceof ComputePipeline) {
+      cache = this._computePipelineCache;
+    }
+    if (pipeline instanceof RenderPipeline) {
+      cache = this._renderPipelineCache;
+    }
+    if (!cache) {
+      throw new Error(`${this}`);
+    }
+    if (!cache[pipeline.hash]) {
+      throw new Error(`${this}: ${pipeline} matched incorrect entry`);
+    }
+    return cache;
+  }
+
+  /** Calculate a hash based on all the inputs for a compute pipeline */
   private _hashComputePipeline(props: ComputePipelineProps): string {
+    const {type} = this.device;
     const shaderHash = this._getHash(props.shader.source);
-    return `${shaderHash}`;
+    return `${type}/C/${shaderHash}`;
   }
 
   /** Calculate a hash based on all the inputs for a render pipeline */
@@ -103,17 +197,19 @@ export class PipelineFactory {
     const varyingHash = '-'; // `${varyingHashes.join('/')}B${bufferMode}`
     const bufferLayoutHash = this._getHash(JSON.stringify(props.bufferLayout));
 
-    switch (this.device.type) {
+    const {type} = this.device;
+    switch (type) {
       case 'webgl':
         // WebGL is more dynamic
-        return `${vsHash}/${fsHash}V${varyingHash}BL${bufferLayoutHash}`;
+        return `${type}/R/${vsHash}/${fsHash}V${varyingHash}BL${bufferLayoutHash}`;
 
+      case 'webgpu':
       default:
         // On WebGPU we need to rebuild the pipeline if topology, parameters or bufferLayout change
         const parameterHash = this._getHash(JSON.stringify(props.parameters));
         // TODO - Can json.stringify() generate different strings for equivalent objects if order of params is different?
         // create a deepHash() to deduplicate?
-        return `${vsHash}/${fsHash}V${varyingHash}T${props.topology}P${parameterHash}BL${bufferLayoutHash}`;
+        return `${type}/R/${vsHash}/${fsHash}V${varyingHash}T${props.topology}P${parameterHash}BL${bufferLayoutHash}`;
     }
   }