@luma.gl/engine 9.1.0-alpha.9 → 9.1.0-beta.3

package/src/model/model.ts

@@ -4,31 +4,51 @@
 
 // A lot of imports, but then Model is where it all comes together...
 import type {TypedArray} from '@math.gl/types';
-import type {RenderPipelineProps, RenderPipelineParameters} 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, DeviceFeature, Buffer, Texture, TextureView, Sampler} from '@luma.gl/core';
-import {RenderPipeline, RenderPass, UniformStore} from '@luma.gl/core';
-import {log} from '@luma.gl/core';
-import {getTypedArrayFromDataType, getAttributeInfosFromLayouts} from '@luma.gl/core';
+import type {
+  RenderPipelineProps,
+  RenderPipelineParameters,
+  BufferLayout,
+  Shader,
+  VertexArray,
+  TransformFeedback,
+  AttributeInfo,
+  Binding,
+  UniformValue,
+  PrimitiveTopology
+} from '@luma.gl/core';
+import {
+  Device,
+  DeviceFeature,
+  Buffer,
+  Texture,
+  TextureView,
+  Sampler,
+  RenderPipeline,
+  RenderPass,
+  UniformStore,
+  log,
+  getTypedArrayFromDataType,
+  getAttributeInfosFromLayouts,
+  _BufferLayoutHelper
+} from '@luma.gl/core';
 
 import type {ShaderModule, PlatformInfo} from '@luma.gl/shadertools';
 import {ShaderAssembler, getShaderLayoutFromWGSL} from '@luma.gl/shadertools';
 
 import type {Geometry} from '../geometry/geometry';
 import {GPUGeometry, makeGPUGeometry} from '../geometry/gpu-geometry';
-import {PipelineFactory} from '../lib/pipeline-factory';
-import {ShaderFactory} from '../lib/shader-factory';
+import {PipelineFactory} from '../factories/pipeline-factory';
+import {ShaderFactory} from '../factories/shader-factory';
 import {getDebugTableForShaderLayout} from '../debug/debug-shader-layout';
 import {debugFramebuffer} from '../debug/debug-framebuffer';
 import {deepEqual} from '../utils/deep-equal';
 import {uid} from '../utils/uid';
-import {splitUniformsAndBindings} from './split-uniforms-and-bindings';
-
 import {ShaderInputs} from '../shader-inputs';
 // import type {AsyncTextureProps} from '../async-texture/async-texture';
 import {AsyncTexture} from '../async-texture/async-texture';
 
+import {splitUniformsAndBindings} from './split-uniforms-and-bindings';
+
 const LOG_DRAW_PRIORITY = 2;
 const LOG_DRAW_TIMEOUT = 10000;
 
@@ -201,6 +221,14 @@ export class Model {
   /** "Time" of last draw. Monotonically increasing timestamp */
   _lastDrawTimestamp: number = -1;
 
+  get [Symbol.toStringTag](): string {
+    return 'Model';
+  }
+
+  toString(): string {
+    return `Model(${this.id})`;
+  }
+
   constructor(device: Device, props: ModelProps) {
     this.props = {...Model.defaultProps, ...props};
     props = this.props;
@@ -213,6 +241,7 @@ export class Model {
     const moduleMap = Object.fromEntries(
       this.props.modules?.map(module => [module.name, module]) || []
     );
+    // @ts-expect-error Fix typings
     this.setShaderInputs(props.shaderInputs || new ShaderInputs(moduleMap));
 
     // Setup shader assembler
@@ -274,7 +303,8 @@ export class Model {
     this.pipeline = this._updatePipeline();
 
     this.vertexArray = device.createVertexArray({
-      renderPipeline: this.pipeline
+      shaderLayout: this.pipeline.shaderLayout,
+      bufferLayout: this.pipeline.bufferLayout
     });
 
     // Now we can apply geometry attributes
@@ -306,11 +336,11 @@ export class Model {
       this.setBindings(props.bindings);
     }
     if (props.uniforms) {
-      this.setUniforms(props.uniforms);
+      this.setUniformsWebGL(props.uniforms);
     }
     if (props.moduleSettings) {
       // log.warn('Model.props.moduleSettings is deprecated. Use Model.shaderInputs.setProps()')();
-      this.updateModuleSettings(props.moduleSettings);
+      this.updateModuleSettingsWebGL(props.moduleSettings);
     }
     if (props.transformFeedback) {
       this.transformFeedback = props.transformFeedback;
@@ -321,16 +351,19 @@ export class Model {
   }
 
   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;
+    if (!this._destroyed) {
+      // Release pipeline before we destroy the shaders used by the pipeline
+      this.pipelineFactory.release(this.pipeline);
+      // Release the shaders
+      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
@@ -351,7 +384,7 @@ export class Model {
     this._needsRedraw ||= reason;
   }
 
-  predraw() {
+  predraw(): void {
     // Update uniform buffers if needed
     this.updateShaderInputs();
     // Check if the pipeline is invalidated
@@ -359,10 +392,22 @@ export class Model {
   }
 
   draw(renderPass: RenderPass): boolean {
-    this.predraw();
+    const loadingBinding = this._areBindingsLoading();
+    if (loadingBinding) {
+      log.info(LOG_DRAW_PRIORITY, `>>> DRAWING ABORTED ${this.id}: ${loadingBinding} not loaded`)();
+      return false;
+    }
+
+    try {
+      renderPass.pushDebugGroup(`${this}.predraw(${renderPass})`);
+      this.predraw();
+    } finally {
+      renderPass.popDebugGroup();
+    }
 
     let drawSuccess: boolean;
     try {
+      renderPass.pushDebugGroup(`${this}.draw(${renderPass})`);
       this._logDrawCallStart();
 
       // Update the pipeline if invalidated
@@ -373,6 +418,7 @@ export class Model {
       // 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
       // TODO this is a busy initialized check for all bindings every frame
+
       const syncBindings = this._getBindings();
       this.pipeline.setBindings(syncBindings, {
         disableWarnings: this.props.disableWarnings
@@ -401,6 +447,7 @@ export class Model {
         topology: this.topology
       });
     } finally {
+      renderPass.popDebugGroup();
       this._logDrawCallEnd();
     }
     this._logFramebuffer(renderPass);
@@ -427,7 +474,11 @@ export class Model {
     const gpuGeometry = geometry && makeGPUGeometry(this.device, geometry);
     if (gpuGeometry) {
       this.setTopology(gpuGeometry.topology || 'triangle-list');
-      this.bufferLayout = mergeBufferLayouts(gpuGeometry.bufferLayout, this.bufferLayout);
+      const bufferLayoutHelper = new _BufferLayoutHelper(this.bufferLayout);
+      this.bufferLayout = bufferLayoutHelper.mergeBufferLayouts(
+        gpuGeometry.bufferLayout,
+        this.bufferLayout
+      );
       if (this.vertexArray) {
         this._setGeometryAttributes(gpuGeometry);
       }
@@ -451,8 +502,9 @@ export class Model {
    * @note Triggers a pipeline rebuild / pipeline cache fetch
    */
   setBufferLayout(bufferLayout: BufferLayout[]): void {
+    const bufferLayoutHelper = new _BufferLayoutHelper(this.bufferLayout);
     this.bufferLayout = this._gpuGeometry
-      ? mergeBufferLayouts(bufferLayout, this._gpuGeometry.bufferLayout)
+      ? bufferLayoutHelper.mergeBufferLayouts(bufferLayout, this._gpuGeometry.bufferLayout)
       : bufferLayout;
     this._setPipelineNeedsUpdate('bufferLayout');
 
@@ -462,7 +514,8 @@ export class Model {
     // vertex array needs to be updated if we update buffer layout,
     // but not if we update parameters
     this.vertexArray = this.device.createVertexArray({
-      renderPipeline: this.pipeline
+      shaderLayout: this.pipeline.shaderLayout,
+      bufferLayout: this.pipeline.bufferLayout
     });
 
     // Reapply geometry attributes to the new vertex array
@@ -512,10 +565,12 @@ export class Model {
   setShaderInputs(shaderInputs: ShaderInputs): void {
     this.shaderInputs = shaderInputs;
     this._uniformStore = new UniformStore(this.shaderInputs.modules);
-    // Create uniform buffer bindings for all modules
-    for (const moduleName of Object.keys(this.shaderInputs.modules)) {
-      const uniformBuffer = this._uniformStore.getManagedUniformBuffer(this.device, moduleName);
-      this.bindings[`${moduleName}Uniforms`] = uniformBuffer;
+    // Create uniform buffer bindings for all modules that actually have uniforms
+    for (const [moduleName, module] of Object.entries(this.shaderInputs.modules)) {
+      if (shaderModuleHasUniforms(module)) {
+        const uniformBuffer = this._uniformStore.getManagedUniformBuffer(this.device, moduleName);
+        this.bindings[`${moduleName}Uniforms`] = uniformBuffer;
+      }
     }
     this.setNeedsRedraw('shaderInputs');
   }
@@ -523,7 +578,7 @@ export class Model {
   /** Update uniform buffers from the model's shader inputs */
   updateShaderInputs(): void {
     this._uniformStore.setUniforms(this.shaderInputs.getUniformValues());
-    this.setBindings(this.shaderInputs.getBindings());
+    this.setBindings(this.shaderInputs.getBindingValues());
     // TODO - this is already tracked through buffer/texture update times?
     this.setNeedsRedraw('shaderInputs');
   }
@@ -558,22 +613,27 @@ export class Model {
    * @note Overrides any attributes previously set with the same name
    */
   setAttributes(buffers: Record<string, Buffer>, options?: {disableWarnings?: boolean}): void {
+    const disableWarnings = options?.disableWarnings ?? this.props.disableWarnings;
     if (buffers.indices) {
       log.warn(
         `Model:${this.id} setAttributes() - indexBuffer should be set using setIndexBuffer()`
       )();
     }
+
+    const bufferLayoutHelper = new _BufferLayoutHelper(this.bufferLayout);
+
+    // Check if all buffers have a layout
     for (const [bufferName, buffer] of Object.entries(buffers)) {
-      const bufferLayout = this.bufferLayout.find(layout =>
-        getAttributeNames(layout).includes(bufferName)
-      );
+      const bufferLayout = bufferLayoutHelper.getBufferLayout(bufferName);
       if (!bufferLayout) {
-        log.warn(`Model(${this.id}): Missing layout for buffer "${bufferName}".`)();
+        if (!disableWarnings) {
+          log.warn(`Model(${this.id}): Missing layout for buffer "${bufferName}".`)();
+        }
         continue; // eslint-disable-line no-continue
       }
 
       // For an interleaved attribute we may need to set multiple attributes
-      const attributeNames = getAttributeNames(bufferLayout);
+      const attributeNames = bufferLayoutHelper.getAttributeNamesForBuffer(bufferLayout);
       let set = false;
       for (const attributeName of attributeNames) {
         const attributeInfo = this._attributeInfos[attributeName];
@@ -582,7 +642,7 @@ export class Model {
           set = true;
         }
       }
-      if (!set && !(options?.disableWarnings ?? this.props.disableWarnings)) {
+      if (!set && !disableWarnings) {
         log.warn(
           `Model(${this.id}): Ignoring buffer "${buffer.id}" for unknown attribute "${bufferName}"`
         )();
@@ -623,7 +683,7 @@ export class Model {
    * @deprecated WebGL only, use uniform buffers for portability
    * @param uniforms
    */
-  setUniforms(uniforms: Record<string, UniformValue>): void {
+  setUniformsWebGL(uniforms: Record<string, UniformValue>): void {
     if (!isObjectEmpty(uniforms)) {
       this.pipeline.setUniformsWebGL(uniforms);
       Object.assign(this.uniforms, uniforms);
@@ -634,7 +694,7 @@ export class Model {
   /**
    * @deprecated Updates shader module settings (which results in uniforms being set)
    */
-  updateModuleSettings(props: Record<string, any>): void {
+  updateModuleSettingsWebGL(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);
@@ -644,19 +704,32 @@ export class Model {
 
   // Internal methods
 
-  /** Get texture / texture view from any async textures */
+  /** Check that bindings are loaded. Returns id of first binding that is still loading. */
+  _areBindingsLoading(): string | false {
+    for (const binding of Object.values(this.bindings)) {
+      if (binding instanceof AsyncTexture && !binding.isReady) {
+        return binding.id;
+      }
+    }
+    return false;
+  }
+
+  /** Extracts texture view from loaded async textures. Returns null if any textures have not yet been loaded. */
   _getBindings(): Record<string, Binding> {
-    // Extract actual textures from async textures. If not loaded, null
-    return Object.entries(this.bindings).reduce<Record<string, Binding>>((acc, [name, binding]) => {
+    const validBindings: Record<string, Binding> = {};
+
+    for (const [name, binding] of Object.entries(this.bindings)) {
       if (binding instanceof AsyncTexture) {
+        // Check that async textures are loaded
         if (binding.isReady) {
-          acc[name] = binding.texture;
+          validBindings[name] = binding.texture;
         }
       } else {
-        acc[name] = binding;
+        validBindings[name] = binding;
       }
-      return acc;
-    }, {});
+    }
+
+    return validBindings;
   }
 
   /** Get the timestamp of the latest updated bound GPU memory resource (buffer/texture). */
@@ -731,7 +804,7 @@ export class Model {
         id: `${this.id}-vertex`,
         stage: 'vertex',
         source: this.source || this.vs,
-        debug: this.props.debugShaders
+        debugShaders: this.props.debugShaders
       });
 
       let fs: Shader | null = null;
@@ -742,7 +815,7 @@ export class Model {
           id: `${this.id}-fragment`,
           stage: 'fragment',
           source: this.source || this.fs,
-          debug: this.props.debugShaders
+          debugShaders: this.props.debugShaders
         });
       }
 
@@ -812,10 +885,11 @@ export class Model {
 
   protected _drawCount = 0;
   _logFramebuffer(renderPass: RenderPass): void {
-    const debugFramebuffers = log.get('framebuffer');
+    const debugFramebuffers = this.device.props.debugFramebuffers;
     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
@@ -862,22 +936,12 @@ export class Model {
   }
 }
 
-// HELPERS
-
-/** TODO - move to core, document add tests */
-function mergeBufferLayouts(layouts1: BufferLayout[], layouts2: BufferLayout[]): BufferLayout[] {
-  const layouts = [...layouts1];
-  for (const attribute of layouts2) {
-    const index = layouts.findIndex(attribute2 => attribute2.name === attribute.name);
-    if (index < 0) {
-      layouts.push(attribute);
-    } else {
-      layouts[index] = attribute;
-    }
-  }
-  return layouts;
+function shaderModuleHasUniforms(module: ShaderModule): boolean {
+  return Boolean(module.uniformTypes && !isObjectEmpty(module.uniformTypes));
 }
 
+// HELPERS
+
 /** Create a shadertools platform info from the Device */
 export function getPlatformInfo(device: Device): PlatformInfo {
   return {
@@ -890,21 +954,12 @@ export function getPlatformInfo(device: Device): PlatformInfo {
   };
 }
 
-/** Get attribute names from a BufferLayout */
-function getAttributeNames(bufferLayout: BufferLayout): string[] {
-  return bufferLayout.attributes
-    ? bufferLayout.attributes?.map(layout => layout.attribute)
-    : [bufferLayout.name];
-}
-
 /** Returns true if given object is empty, false otherwise. */
 function isObjectEmpty(obj: object): boolean {
-  let isEmpty = true;
   // @ts-ignore key is unused
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   for (const key in obj) {
-    isEmpty = false;
-    break;
+    return false;
   }
-  return isEmpty;
+  return true;
 }

package/src/model/split-uniforms-and-bindings.ts

@@ -5,8 +5,8 @@
 import type {UniformValue, Binding} from '@luma.gl/core';
 import {isNumericArray} from '@math.gl/types';
 
-export function isUniformValue(value: unknown): boolean {
-  return isNumericArray(value) !== null || typeof value === 'number' || typeof value === 'boolean';
+export function isUniformValue(value: unknown): value is UniformValue {
+  return isNumericArray(value) || typeof value === 'number' || typeof value === 'boolean';
 }
 
 type UniformsAndBindings = {
@@ -21,9 +21,9 @@ export function splitUniformsAndBindings(
   Object.keys(uniforms).forEach(name => {
     const uniform = uniforms[name];
     if (isUniformValue(uniform)) {
-      result.uniforms[name] = uniform as UniformValue;
+      result.uniforms[name] = uniform;
     } else {
-      result.bindings[name] = uniform as Binding;
+      result.bindings[name] = uniform;
     }
   });
 

package/src/models/billboard-texture-model.ts

@@ -0,0 +1,98 @@
+// luma.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {Device, Texture} from '@luma.gl/core';
+import {AsyncTexture} from '../async-texture/async-texture';
+import {ClipSpace} from './clip-space';
+
+const BACKGROUND_FS_WGSL = /* wgsl */ `\
+@group(0) @binding(0) var backgroundTexture: texture_2d<f32>;
+@group(0) @binding(1) var backgroundTextureSampler: sampler;
+
+fn billboardTexture_getTextureUV(coordinates: vec2<f32>) -> vec2<f32> {
+	let iTexSize: vec2<u32> = textureDimensions(backgroundTexture, 0) * 2;
+	let texSize: vec2<f32> = vec2<f32>(f32(iTexSize.x), f32(iTexSize.y));
+	var position: vec2<f32> = coordinates.xy / texSize;
+	return position;
+} 
+
+@fragment
+fn fragmentMain(inputs: FragmentInputs) -> @location(0) vec4<f32> {
+	let position: vec2<f32> = billboardTexture_getTextureUV(inputs.coordinate);
+	return textureSample(backgroundTexture, backgroundTextureSampler, position);
+}
+`;
+
+const BACKGROUND_FS = /* glsl */ `\
+#version 300 es
+precision highp float;
+
+uniform sampler2D backgroundTexture;
+out vec4 fragColor;
+
+vec2 billboardTexture_getTextureUV() {
+  ivec2 iTexSize = textureDimensions(backgroundTexture, 0) * 2;
+  vec2 texSize = vec2(float(iTexSize.x), float(iTexSize.y));
+  vec2 position = gl_FragCoord.xy / texSize;
+  return position;
+}
+
+void main(void) {
+  vec2 position = billboardTexture_getTextureUV();
+  fragColor = texture(backgroundTexture, position);
+}
+`;
+
+/**
+ * Props for a Model that renders a bitmap into the "background", i.e covering the screen
+ */
+export type BackgroundTextureModelProps = {
+  /** id of this model */
+  id?: string;
+  /** The texture to render */
+  backgroundTexture: Texture | AsyncTexture;
+  /** If true, the texture is rendered into transparent areas of the screen only, i.e blended in where background alpha is small */
+  blend?: boolean;
+};
+
+/**
+ * Model that renders a bitmap into the "background", i.e covering the screen
+ */
+export class BackgroundTextureModel extends ClipSpace {
+  constructor(device: Device, props: BackgroundTextureModelProps) {
+    super(device, {
+      id: props.id || 'background-texture-model',
+      source: BACKGROUND_FS_WGSL,
+      fs: BACKGROUND_FS,
+      parameters: {
+        depthWriteEnabled: false,
+        depthCompare: 'always',
+        ...(props.blend
+          ? {
+              blend: true,
+              blendColorOperation: 'add',
+              blendAlphaOperation: 'add',
+              blendColorSrcFactor: 'one',
+              blendColorDstFactor: 'one-minus-src-color',
+              blendAlphaSrcFactor: 'one',
+              blendAlphaDstFactor: 'one-minus-src-alpha'
+            }
+          : {})
+      }
+    });
+
+    this.setTexture(props.backgroundTexture);
+  }
+
+  setTexture(backgroundTexture: Texture | AsyncTexture): void {
+    this.setBindings({
+      backgroundTexture
+    });
+  }
+
+  override predraw(): void {
+    this.shaderInputs.setProps({});
+    super.predraw();
+  }
+}

package/src/models/billboard-texture-module.ts

@@ -0,0 +1,49 @@
+// luma.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {ShaderModule} from '@luma.gl/shadertools';
+
+const BACKGROUND_FS = /* glsl */ `\
+#version 300 es
+
+uniform billboardTextureUniforms {
+  vec2 topLeft;
+  vec2 bottomRight;
+} billboardTexture;
+
+precision highp float;
+uniform sampler2D backgroundTexture;
+out vec4 fragColor;
+
+vec2 billboardTexture_getTextureUV() {
+  ivec2 iTexSize = textureSize(backgroundTexture, 0) * 2;
+  vec2 texSize = vec2(float(iTexSize.x), float(iTexSize.y));
+  vec2 position = gl_FragCoord.xy / texSize;
+  return position;
+}
+
+void main(void) {
+  vec2 position = billboardTexture_getTextureUV();
+  fragColor = texture(backgroundTexture, position);
+}
+`;
+
+type BillboardTextureProps = {
+  aspect: number;
+};
+
+type BillboardTextureUniforms = {
+  topLeft: [number, number];
+  bottomRight: [number, number];
+};
+
+export const billboardTexture = {
+  name: 'billboardTexture',
+  fs: BACKGROUND_FS,
+  dependencies: [],
+  uniformTypes: {
+    topLeft: 'vec2<f32>',
+    bottomRight: 'vec2<f32>'
+  }
+} as const satisfies ShaderModule<BillboardTextureProps, BillboardTextureUniforms>;

package/src/models/clip-space.ts

@@ -0,0 +1,88 @@
+// luma.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+// ClipSpace
+import {Device} from '@luma.gl/core';
+import {Model, ModelProps} from '../model/model';
+import {Geometry} from '../geometry/geometry';
+import {uid} from '../utils/uid';
+
+const CLIPSPACE_VERTEX_SHADER_WGSL = /* wgsl */ `\
+struct VertexInputs {
+  @location(0) clipSpacePosition: vec2<f32>,
+  @location(1) texCoord: vec2<f32>,
+  @location(2) coordinate: vec2<f32>  
+}
+
+struct FragmentInputs {
+  @builtin(position) Position : vec4<f32>,
+  @location(0) position : vec2<f32>,
+  @location(1) coordinate : vec2<f32>,
+  @location(2) uv : vec2<f32>
+};
+
+@vertex
+fn vertexMain(inputs: VertexInputs) -> FragmentInputs {
+  var outputs: FragmentInputs;
+  outputs.Position = vec4(inputs.clipSpacePosition, 0., 1.);
+  outputs.position = inputs.clipSpacePosition;
+  outputs.coordinate = inputs.coordinate;
+  outputs.uv = inputs.texCoord;
+  return outputs;
+}
+`;
+
+const CLIPSPACE_VERTEX_SHADER = /* glsl */ `\
+#version 300 es
+in vec2 clipSpacePosition;
+in vec2 texCoord;
+in vec2 coordinate;
+
+out vec2 position;
+out vec2 coordinate;
+out vec2 uv;
+
+void main(void) {
+  gl_Position = vec4(clipSpacePosition, 0., 1.);
+  position = clipSpacePosition;
+  coordinate = coordinate;
+  uv = texCoord;
+}
+`;
+
+/* eslint-disable indent, no-multi-spaces */
+const POSITIONS = [-1, -1, 1, -1, -1, 1, 1, 1];
+
+/** Props for ClipSpace */
+export type ClipSpaceProps = Omit<ModelProps, 'vs' | 'vertexCount' | 'geometry'>;
+
+/**
+ * A flat geometry that covers the "visible area" that the GPU renders.
+ */
+export class ClipSpace extends Model {
+  constructor(device: Device, props: ClipSpaceProps) {
+    const TEX_COORDS = POSITIONS.map(coord => (coord === -1 ? 0 : coord));
+
+    // For WGSL we need to append the supplied fragment shader to the default vertex shader source
+    if (props.source) {
+      props = {...props, source: `${CLIPSPACE_VERTEX_SHADER_WGSL}\n${props.source}`};
+    }
+
+    super(device, {
+      id: props.id || uid('clip-space'),
+      ...props,
+      vs: CLIPSPACE_VERTEX_SHADER,
+      vertexCount: 4,
+      geometry: new Geometry({
+        topology: 'triangle-strip',
+        vertexCount: 4,
+        attributes: {
+          clipSpacePosition: {size: 2, value: new Float32Array(POSITIONS)},
+          texCoord: {size: 2, value: new Float32Array(TEX_COORDS)},
+          coordinate: {size: 2, value: new Float32Array(TEX_COORDS)}
+        }
+      })
+    });
+  }
+}