@luma.gl/core 9.0.17 → 9.1.0-alpha.10

package/src/adapter/resources/render-pipeline.ts

@@ -3,7 +3,7 @@
 // Copyright (c) vis.gl contributors
 
 import type {Device} from '../device';
-import type {UniformValue} from '../types/types';
+import type {UniformValue} from '../types/uniforms';
 import type {PrimitiveTopology, RenderPipelineParameters} from '../types/parameters';
 import type {ShaderLayout, Binding} from '../types/shader-layout';
 import type {BufferLayout} from '../types/buffer-layout';
@@ -32,10 +32,7 @@ export type RenderPipelineProps = ResourceProps & {
 
   /** Describes the attributes and bindings exposed by the pipeline shader(s). */
   shaderLayout?: ShaderLayout | null;
-  /**
-   * Describes the buffers accepted by this pipeline and how they are mapped to shader attributes.
-   * A default mapping of one buffer per attribute is always created.
-   */
+  /** Describes the buffers accepted by this pipeline and how they are mapped to shader attributes. */
   bufferLayout?: BufferLayout[]; // Record<string, Omit<BufferLayout, 'name'>
 
   /** Determines how vertices are read from the 'vertex' attributes */
@@ -102,7 +99,7 @@ export abstract class RenderPipeline extends Resource<RenderPipelineProps> {
 
   constructor(device: Device, props: RenderPipelineProps) {
     super(device, props, RenderPipeline.defaultProps);
-    this.shaderLayout = this.props.shaderLayout;
+    this.shaderLayout = this.props.shaderLayout!;
     this.bufferLayout = this.props.bufferLayout || [];
   }
 

package/src/adapter/resources/resource.ts

@@ -3,7 +3,7 @@
 // Copyright (c) vis.gl contributors
 
 import type {Device} from '../device';
-import {uid} from '../../utils/utils';
+import {uid} from '../../utils/uid';
 
 export type ResourceProps = {
   /** Name of resource, mainly for debugging purposes. A unique name will be assigned if not provided */
@@ -22,7 +22,7 @@ export abstract class Resource<Props extends ResourceProps> {
   static defaultProps: Required<ResourceProps> = {
     id: 'undefined',
     handle: undefined,
-    userData: undefined
+    userData: undefined!
   };
 
   abstract get [Symbol.toStringTag](): string;
@@ -39,7 +39,7 @@ export abstract class Resource<Props extends ResourceProps> {
   /** For resources that allocate GPU memory */
   private allocatedBytes: number = 0;
   /** Attached resources will be destroyed when this resource is destroyed. Tracks auto-created "sub" resources. */
-  private _attachedResources = new Set<Resource<unknown>>();
+  private _attachedResources = new Set<Resource<ResourceProps>>();
 
   /**
    * Create a new Resource. Called from Subclass
@@ -91,21 +91,21 @@ export abstract class Resource<Props extends ResourceProps> {
    * Attaches a resource. Attached resources are auto destroyed when this resource is destroyed
    * Called automatically when sub resources are auto created but can be called by application
    */
-  attachResource(resource: Resource<unknown>): void {
+  attachResource(resource: Resource<ResourceProps>): void {
     this._attachedResources.add(resource);
   }
 
   /**
    * Detach an attached resource. The resource will no longer be auto-destroyed when this resource is destroyed.
    */
-  detachResource(resource: Resource<unknown>): void {
+  detachResource(resource: Resource<ResourceProps>): void {
     this._attachedResources.delete(resource);
   }
 
   /**
    * Destroys a resource (only if owned), and removes from the owned (auto-destroy) list for this resource.
    */
-  destroyAttachedResource(resource: Resource<unknown>): void {
+  destroyAttachedResource(resource: Resource<ResourceProps>): void {
     if (this._attachedResources.delete(resource)) {
       resource.destroy();
     }
@@ -117,7 +117,7 @@ export abstract class Resource<Props extends ResourceProps> {
       resource.destroy();
     }
     // don't remove while we are iterating
-    this._attachedResources = new Set<Resource<unknown>>();
+    this._attachedResources = new Set<Resource<ResourceProps>>();
   }
 
   // PROTECTED METHODS

package/src/adapter/resources/shader.ts

@@ -5,10 +5,9 @@
 import type {Device} from '../device';
 import {Resource, ResourceProps} from './resource';
 // import { log } from '../../utils/log';
-import {uid} from '../../utils/utils';
-import {CompilerMessage} from '../../lib/compiler-log/compiler-message';
-import {formatCompilerLog} from '../../lib/compiler-log/format-compiler-log';
-import {getShaderInfo} from '../../lib/compiler-log/get-shader-info';
+import {uid} from '../../utils/uid';
+import {CompilerMessage} from '../types/compiler-message';
+import {formatCompilerLog} from '../../adapter-utils/format-compiler-log';
 
 /**
  * Properties for a Shader
@@ -36,7 +35,7 @@ export abstract class Shader extends Resource<ShaderProps> {
   static override defaultProps: Required<ShaderProps> = {
     ...Resource.defaultProps,
     language: 'auto',
-    stage: undefined,
+    stage: undefined!,
     source: '',
     sourceMap: null,
     entryPoint: 'main',
@@ -101,14 +100,17 @@ export abstract class Shader extends Resource<ShaderProps> {
 
   // PRIVATE
 
-  /** In-browser UI logging of errors */
+  /**
+   * In-browser UI logging of errors
+   * TODO - this HTML formatting code should not be in Device, should be pluggable
+   */
   protected _displayShaderLog(messages: readonly CompilerMessage[]): void {
     // Return if under Node.js / incomplete `document` polyfills
     if (typeof document === 'undefined' || !document?.createElement) {
       return;
     }
 
-    const shaderName: string = getShaderInfo(this.source).name;
+    const shaderName: string = getShaderName(this.source);
     const shaderTitle: string = `${this.stage} ${shaderName}`;
     let htmlLog = formatCompilerLog(messages, this.source, {showSourceCode: 'all', html: true});
     // Show translated source if available
@@ -132,9 +134,7 @@ ${htmlLog}
     document.body.appendChild(button);
 
     const errors = document.getElementsByClassName('luma-compiler-log-error');
-    if (errors[0]?.scrollIntoView) {
-      errors[0].scrollIntoView();
-    }
+    errors[0]?.scrollIntoView();
 
     // TODO - add a small embedded copy button (instead of main button)
     button.onclick = () => {
@@ -151,5 +151,12 @@ ${htmlLog}
 
 /** Deduce an id, from shader source, or supplied id, or shader type */
 function getShaderIdFromProps(props: ShaderProps): string {
-  return getShaderInfo(props.source).name || props.id || uid(`unnamed ${props.stage}-shader`);
+  return getShaderName(props.source) || props.id || uid(`unnamed ${props.stage}-shader`);
+}
+
+/** Extracts GLSLIFY style naming of shaders: `#define SHADER_NAME ...` */
+function getShaderName(shader: string, defaultName: string = 'unnamed'): string {
+  const SHADER_NAME_REGEXP = /#define[\s*]SHADER_NAME[\s*]([A-Za-z0-9_-]+)[\s*]/;
+  const match = SHADER_NAME_REGEXP.exec(shader);
+  return match ? match[1] : defaultName;
 }

package/src/adapter/resources/texture-view.ts

@@ -4,7 +4,7 @@
 
 import type {Device} from '../device';
 import type {Texture} from './texture';
-import type {TextureFormat} from '../types/texture-formats';
+import type {TextureFormat} from '../../gpu-type-utils/texture-formats';
 import {Resource, ResourceProps} from './resource';
 
 /** Properties for initializing a texture view */
@@ -29,13 +29,13 @@ export type TextureViewProps = ResourceProps & {
 export abstract class TextureView extends Resource<TextureViewProps> {
   static override defaultProps: Required<TextureViewProps> = {
     ...Resource.defaultProps,
-    format: undefined,
-    dimension: undefined,
+    format: undefined!,
+    dimension: undefined!,
     aspect: 'all',
     baseMipLevel: 0,
-    mipLevelCount: undefined,
+    mipLevelCount: undefined!,
     baseArrayLayer: 0,
-    arrayLayerCount: undefined
+    arrayLayerCount: undefined!
   };
 
   abstract texture: Texture;

package/src/adapter/resources/texture.ts

@@ -4,73 +4,154 @@
 
 import type {Device} from '../device';
 import type {TypedArray} from '../../types';
-import type {TextureFormat} from '../types/texture-formats';
+import type {TextureFormat} from '../../gpu-type-utils/texture-formats';
+import type {TextureView, TextureViewProps} from './texture-view';
 import {Resource, ResourceProps} from './resource';
 import {Sampler, SamplerProps} from './sampler';
-import {TextureView, TextureViewProps} from './texture-view';
 
-// required GPUExtent3D size;
-// GPUIntegerCoordinate mipLevelCount = 1;
-// GPUSize32 sampleCount = 1;
-// GPUTextureDimension dimension = "2d";
-// required GPUTextureFormat format;
-// required GPUTextureUsageFlags usage;
-
-/** Data types that can be used to initialize textures */
-export type TextureData = TypedArray | ArrayBuffer | Buffer | ImageBitmap | HTMLImageElement;
-
-export type CubeTextureData = Record<string, TextureData> | Record<string, Promise<TextureData>>;
+/**
+ * These represent the main compressed texture formats
+ * Each format typically has a number of more specific subformats
+ */
+export type TextureCompressionFormat =
+  | 'dxt'
+  | 'dxt-srgb'
+  | 'etc1'
+  | 'etc2'
+  | 'pvrtc'
+  | 'atc'
+  | 'astc'
+  | 'rgtc';
 
-export type ExternalTextureData = HTMLVideoElement;
+/** Names of cube texture faces */
+export type TextureCubeFace = '+X' | '-X' | '+Y' | '-Y' | '+Z' | '-Z';
 
-/** Abstract Texture interface */
-export type TextureProps = ResourceProps & {
+/**
+ * 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;
-  dimension?: '1d' | '2d' | '2d-array' | 'cube' | 'cube-array' | '3d';
-  width?: number | undefined;
-  height?: number | undefined;
-  depth?: number;
-  usage?: number;
-
-  data?: TextureData | Promise<TextureData> | CubeTextureData | string | HTMLVideoElement | null;
-  mipmaps?: boolean;
-
-  mipLevels?: number;
-  samples?: number;
-  type?: number;
-  compressed?: boolean;
-
-  sampler?: Sampler | SamplerProps;
-  view?: TextureViewProps;
-};
-
-export type WebGPUTextureProps = ResourceProps & {
+  data: TypedArray;
   width: number;
   height: number;
-  depth?: number;
-  mipLevels?: number;
-  format?: string;
+
+  compressed?: boolean;
+  byteLength?: number;
+  hasAlpha?: boolean;
 };
 
 /**
- * @deprecated
- * @todo remove, are these even used anymore?
+ * Built-in data types that can be used to initialize textures
+ * @note ImageData can be used for 8 bit data via Uint8ClampedArray
  */
-export type DeprecatedWebGLTextureProps = {
-  /** @deprecated use props.sampler */
-  parameters?: Record<number, number>;
-  /** @deprecated use props.data */
-  pixels?: any;
-  /** @deprecated use props.format */
-  dataFormat?: number | null;
-  /** @deprecated rarely supported */
-  border?: number;
-  /** @deprecated WebGL only. */
-  pixelStore?: object;
-  /** @deprecated WebGL only. */
-  textureUnit?: number;
-  /** @deprecated WebGL only. Use dimension. */
-  target?: number;
+export type ExternalImage =
+  | ImageBitmap
+  | ImageData
+  | HTMLImageElement
+  | HTMLVideoElement
+  | VideoFrame
+  | HTMLCanvasElement
+  | OffscreenCanvas;
+
+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};
+
+/** Texture properties */
+export type TextureProps = ResourceProps &
+  TextureDataProps & {
+    format?: TextureFormat;
+    width?: number | undefined;
+    height?: number | undefined;
+    depth?: number;
+    usage?: number;
+
+    /** How many mip levels */
+    mipLevels?: number | 'pyramid';
+    /** Multi sampling */
+    samples?: number;
+
+    /** Specifying mipmaps will default mipLevels to 'pyramid' and attempt to generate mipmaps */
+    mipmaps?: boolean;
+
+    /** Sampler (or SamplerProps) for the default sampler for this texture. Used if no sampler provided. Note that other samplers can still be used. */
+    sampler?: Sampler | SamplerProps;
+    /** Props for the default TextureView for this texture. Note that other views can still be created and used. */
+    view?: TextureViewProps;
+
+    /** @deprecated - this is implicit from format */
+    compressed?: boolean;
+  };
+
+/** Options for Texture.copyExternalImage */
+export type CopyExternalImageOptions = {
+  /** Image */
+  image: ExternalImage;
+  /** Copy from image x offset (default 0) */
+  sourceX?: number;
+  /** Copy from image y offset (default 0) */
+  sourceY?: number;
+  /** Copy area width (default 1) */
+  width?: number;
+  /** Copy area height (default 1) */
+  height?: number;
+  /** Copy depth (default 1) */
+  depth?: number;
+  /** Which mip-level to copy into (default 0) */
+  mipLevel?: number;
+  /** Start copying into offset x (default 0) */
+  x?: number;
+  /** Start copying into offset y (default 0) */
+  y?: number;
+  /** Start copying from depth layer z (default 0) */
+  z?: number;
+  /** When copying into depth stencil textures (default 'all') */
+  aspect?: 'all' | 'stencil-only' | 'depth-only';
+  /** Specific color space of image data */
+  colorSpace?: 'srgb';
+  /** premultiplied  */
+  premultipliedAlpha?: boolean;
 };
 
 /**
@@ -78,7 +159,15 @@ export type DeprecatedWebGLTextureProps = {
  * Texture Object
  * https://gpuweb.github.io/gpuweb/#gputexture
  */
-export abstract class Texture<Props extends TextureProps = TextureProps> extends Resource<Props> {
+export abstract class Texture extends Resource<TextureProps> {
+  static COPY_SRC = 0x01;
+  static COPY_DST = 0x02;
+  static TEXTURE = 0x04;
+  static STORAGE = 0x08;
+  static RENDER_ATTACHMENT = 0x10;
+
+  static CubeFaces: TextureCubeFace[] = ['+X', '-X', '+Y', '-Y', '+Z', '-Z'];
+
   static override defaultProps: Required<TextureProps> = {
     ...Resource.defaultProps,
     data: null,
@@ -87,25 +176,15 @@ export abstract class Texture<Props extends TextureProps = TextureProps> extends
     width: undefined!,
     height: undefined!,
     depth: 1,
-    mipmaps: true,
-    // type: undefined,
+    mipmaps: false,
     compressed: false,
-    // mipLevels: 1,
     usage: 0,
-    // usage: GPUTextureUsage.COPY_DST
     mipLevels: undefined!,
     samples: undefined!,
-    type: undefined!,
     sampler: {},
     view: undefined!
   };
 
-  static COPY_SRC = 0x01;
-  static COPY_DST = 0x02;
-  static TEXTURE_BINDING = 0x04;
-  static STORAGE_BINDING = 0x08;
-  static RENDER_ATTACHMENT = 0x10;
-
   override get [Symbol.toStringTag](): string {
     return 'Texture';
   }
@@ -119,34 +198,164 @@ export abstract class Texture<Props extends TextureProps = TextureProps> extends
   /** height in pixels of this texture */
   height: number;
   /** depth of this texture */
-  readonly depth: number;
+  depth: number;
+  /** mip levels in this texture */
+  mipLevels: number;
 
   /** Default sampler for this texture */
   abstract sampler: Sampler;
-
   /** Default view for this texture */
   abstract view: TextureView;
 
   /** "Time" of last update. Monotonically increasing timestamp */
   updateTimestamp: number;
 
+  /** Check if data is an external image */
+  static isExternalImage(data: unknown): data is ExternalImage {
+    return (
+      (typeof ImageData !== 'undefined' && data instanceof ImageData) ||
+      (typeof ImageBitmap !== 'undefined' && data instanceof ImageBitmap) ||
+      (typeof HTMLImageElement !== 'undefined' && data instanceof HTMLImageElement) ||
+      (typeof HTMLVideoElement !== 'undefined' && data instanceof HTMLVideoElement) ||
+      (typeof VideoFrame !== 'undefined' && data instanceof VideoFrame) ||
+      (typeof HTMLCanvasElement !== 'undefined' && data instanceof HTMLCanvasElement) ||
+      (typeof OffscreenCanvas !== 'undefined' && data instanceof OffscreenCanvas)
+    );
+  }
+
+  /** Determine size (width and height) of provided image data */
+  static getExternalImageSize(data: ExternalImage): {width: number; height: number} {
+    if (
+      (typeof ImageData !== 'undefined' && data instanceof ImageData) ||
+      (typeof ImageBitmap !== 'undefined' && data instanceof ImageBitmap) ||
+      (typeof HTMLCanvasElement !== 'undefined' && data instanceof HTMLCanvasElement) ||
+      (typeof OffscreenCanvas !== 'undefined' && data instanceof OffscreenCanvas)
+    ) {
+      return {width: data.width, height: data.height};
+    }
+    if (typeof HTMLImageElement !== 'undefined' && data instanceof HTMLImageElement) {
+      return {width: data.naturalWidth, height: data.naturalHeight};
+    }
+    if (typeof HTMLVideoElement !== 'undefined' && data instanceof HTMLVideoElement) {
+      return {width: data.videoWidth, height: data.videoHeight};
+    }
+    if (typeof VideoFrame !== 'undefined' && data instanceof VideoFrame) {
+      // TODO: is this the right choice for width and height?
+      return {width: data.displayWidth, height: data.displayHeight};
+    }
+    throw new Error('Unknown image type');
+  }
+
+  /** Check if texture data is a typed array */
+  static 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 */
+  static 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 Texture.getTextureDataSize(data[0]);
+    }
+    if (Texture.isExternalImage(data)) {
+      return Texture.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');
+  }
+
+  /** Calculate the number of mip levels for a texture of width and height */
+  static getMipLevelCount(width: number, height: number): number {
+    return Math.floor(Math.log2(Math.max(width, height))) + 1;
+  }
+
+  /** Convert luma.gl cubemap face constants to depth index */
+  static 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);
+      }
+  }
+
   /** Do not use directly. Create with device.createTexture() */
-  constructor(
-    device: Device,
-    props: Props,
-    defaultProps = Texture.defaultProps as Required<Props>
-  ) {
-    super(device, props, defaultProps);
+  constructor(device: Device, props: TextureProps) {
+    super(device, props, Texture.defaultProps);
     this.dimension = this.props.dimension;
     this.format = this.props.format;
+
+    // Size
     this.width = this.props.width;
     this.height = this.props.height;
     this.depth = this.props.depth;
 
+    // Calculate size, if not provided
+    if (this.props.width === undefined || this.props.height === undefined) {
+      // @ts-ignore
+      const size = Texture.getTextureDataSize(this.props.data);
+      this.width = size?.width || 1;
+      this.height = size?.height || 1;
+    }
+
+    // mipLevels
+
+    // If mipmap generation is requested and mipLevels is not provided, initialize a full pyramid
+    if (this.props.mipmaps && this.props.mipLevels === undefined) {
+      this.props.mipLevels = 'pyramid';
+    }
+
+    // Auto-calculate the number of mip levels as a convenience
+    // TODO - Should we clamp to 1-getMipLevelCount?
+    this.mipLevels =
+      this.props.mipLevels === 'pyramid'
+        ? Texture.getMipLevelCount(this.width, this.height)
+        : this.props.mipLevels || 1;
+
     // TODO - perhaps this should be set on async write completion?
     this.updateTimestamp = device.incrementTimestamp();
   }
 
   /** Create a texture view for this texture */
-  abstract createView(props?: TextureViewProps): TextureView;
+  abstract createView(props: TextureViewProps): TextureView;
+
+  /** Set sampler props associated with this texture */
+  abstract setSampler(sampler?: Sampler | SamplerProps): void;
+
+  /** Copy external image data into the texture */
+  abstract copyExternalImage(options: CopyExternalImageOptions): {width: number; height: number};
+
+  /** Default options */
+  protected static defaultCopyExternalImageOptions: Required<CopyExternalImageOptions> = {
+    image: undefined!,
+    sourceX: 0,
+    sourceY: 0,
+    width: undefined!,
+    height: undefined!,
+    depth: 1,
+    mipLevel: 0,
+    x: 0,
+    y: 0,
+    z: 0,
+    aspect: 'all',
+    colorSpace: 'srgb',
+    premultipliedAlpha: false
+  };
 }

package/src/adapter/resources/transform-feedback.ts

@@ -35,7 +35,7 @@ export abstract class TransformFeedback extends Resource<TransformFeedbackProps>
     return 'TransformFeedback';
   }
 
-  constructor(device: Device, props?: TransformFeedbackProps) {
+  constructor(device: Device, props: TransformFeedbackProps) {
     super(device, props, TransformFeedback.defaultProps);
   }
 

package/src/adapter/resources/vertex-array.ts

@@ -6,7 +6,7 @@ import type {TypedArray} from '../../types';
 import {
   AttributeInfo,
   getAttributeInfosByLocation
-} from '../attribute-utils/get-attribute-from-layouts';
+} from '../../adapter-utils/get-attribute-from-layouts';
 import type {Device} from '../device';
 import type {Buffer} from './buffer';
 import type {RenderPass} from './render-pass';
@@ -49,9 +49,13 @@ export abstract class VertexArray extends Resource<VertexArrayProps> {
     super(device, props, VertexArray.defaultProps);
     this.maxVertexAttributes = device.limits.maxVertexAttributes;
     this.attributes = new Array(this.maxVertexAttributes).fill(null);
+    const {shaderLayout, bufferLayout} = props.renderPipeline || {};
+    if (!shaderLayout || !bufferLayout) {
+      throw new Error('VertexArray');
+    }
     this.attributeInfos = getAttributeInfosByLocation(
-      props.renderPipeline.shaderLayout,
-      props.renderPipeline.bufferLayout,
+      shaderLayout,
+      bufferLayout,
       this.maxVertexAttributes
     );
   }