@luma.gl/engine 9.1.0-beta.8 → 9.2.0-alpha.1

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

@@ -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 */

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

@@ -95,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/index.ts

@@ -80,6 +80,18 @@ export {SwapFramebuffers} from './compute/swap';
 export type {ComputationProps} from './compute/computation';
 export {Computation} from './compute/computation';
 
+export type {
+  TextureCubeFace,
+  TextureImageData,
+  TextureData,
+  Texture1DData,
+  Texture2DData,
+  Texture3DData,
+  TextureCubeData,
+  TextureArrayData,
+  TextureCubeArrayData
+} from './async-texture/async-texture';
+
 export type {AsyncTextureProps} from './async-texture/async-texture';
 export {AsyncTexture} from './async-texture/async-texture';
 

package/src/model/model.ts

@@ -13,7 +13,6 @@ import type {
   TransformFeedback,
   AttributeInfo,
   Binding,
-  UniformValue,
   PrimitiveTopology
 } from '@luma.gl/core';
 import {
@@ -44,23 +43,20 @@ import {debugFramebuffer} from '../debug/debug-framebuffer';
 import {deepEqual} from '../utils/deep-equal';
 import {uid} from '../utils/uid';
 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;
 
 export type ModelProps = Omit<RenderPipelineProps, 'vs' | 'fs' | 'bindings'> & {
   source?: string;
-  vs: string | null;
-  fs: string | null;
+  vs?: string | null;
+  fs?: string | null;
 
   /** 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 */
@@ -94,9 +90,6 @@ export type ModelProps = Omit<RenderPipelineProps, 'vs' | 'fs' | 'bindings'> & {
 
   transformFeedback?: TransformFeedback;
 
-  /** Mapped uniforms for shadertool modules */
-  moduleSettings?: Record<string, Record<string, any>>;
-
   /** Show shader source in browser? */
   debugShaders?: 'never' | 'errors' | 'warnings' | 'always';
 
@@ -127,7 +120,6 @@ export class Model {
     userData: {},
     defines: {},
     modules: [],
-    moduleSettings: undefined!,
     geometry: null,
     indexBuffer: null,
     attributes: {},
@@ -187,8 +179,6 @@ export class Model {
   constantAttributes: Record<string, TypedArray> = {};
   /** Bindings (textures, samplers, uniform buffers) */
   bindings: Record<string, Binding | AsyncTexture> = {};
-  /** Sets uniforms @deprecated Use uniform buffers and setBindings() for portability*/
-  uniforms: Record<string, UniformValue> = {};
 
   /**
    * VertexArray
@@ -211,7 +201,6 @@ export class Model {
 
   _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';
@@ -335,13 +324,6 @@ export class Model {
     if (props.bindings) {
       this.setBindings(props.bindings);
     }
-    if (props.uniforms) {
-      this.setUniformsWebGL(props.uniforms);
-    }
-    if (props.moduleSettings) {
-      // log.warn('Model.props.moduleSettings is deprecated. Use Model.shaderInputs.setProps()')();
-      this.updateModuleSettingsWebGL(props.moduleSettings);
-    }
     if (props.transformFeedback) {
       this.transformFeedback = props.transformFeedback;
     }
@@ -423,9 +405,6 @@ export class Model {
       this.pipeline.setBindings(syncBindings, {
         disableWarnings: this.props.disableWarnings
       });
-      if (!isObjectEmpty(this.uniforms)) {
-        this.pipeline.setUniformsWebGL(this.uniforms);
-      }
 
       const {indexBuffer} = this.vertexArray;
       const indexCount = indexBuffer
@@ -676,33 +655,7 @@ export class Model {
     this.setNeedsRedraw('constants');
   }
 
-  // DEPRECATED METHODS
-
-  /**
-   * Sets individual uniforms
-   * @deprecated WebGL only, use uniform buffers for portability
-   * @param uniforms
-   */
-  setUniformsWebGL(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)
-   */
-  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);
-    Object.assign(this.uniforms, uniforms);
-    this.setNeedsRedraw('moduleSettings');
-  }
-
-  // Internal methods
+  // INTERNAL METHODS
 
   /** Check that bindings are loaded. Returns id of first binding that is still loading. */
   _areBindingsLoading(): string | false {
@@ -868,10 +821,6 @@ export class Model {
       log.table(LOG_DRAW_PRIORITY, shaderLayoutTable)();
 
       const uniformTable = this.shaderInputs.getDebugTable();
-      // Add any global uniforms
-      for (const [name, value] of Object.entries(this.uniforms)) {
-        uniformTable[name] = {value};
-      }
       log.table(LOG_DRAW_PRIORITY, uniformTable)();
 
       const attributeTable = this._getAttributeDebugTable();

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

@@ -11,7 +11,7 @@ const BACKGROUND_FS_WGSL = /* wgsl */ `\
 @group(0) @binding(1) var backgroundTextureSampler: sampler;
 
 fn billboardTexture_getTextureUV(coordinates: vec2<f32>) -> vec2<f32> {
-	let iTexSize: vec2<u32> = textureDimensions(backgroundTexture, 0) * 2;
+	let iTexSize: vec2<u32> = textureDimensions(backgroundTexture, 0);
 	let texSize: vec2<f32> = vec2<f32>(f32(iTexSize.x), f32(iTexSize.y));
 	var position: vec2<f32> = coordinates.xy / texSize;
 	return position;
@@ -32,7 +32,7 @@ uniform sampler2D backgroundTexture;
 out vec4 fragColor;
 
 vec2 billboardTexture_getTextureUV() {
-  ivec2 iTexSize = textureDimensions(backgroundTexture, 0) * 2;
+  ivec2 iTexSize = textureSize(backgroundTexture, 0);
   vec2 texSize = vec2(float(iTexSize.x), float(iTexSize.y));
   vec2 position = gl_FragCoord.xy / texSize;
   return position;
@@ -67,14 +67,13 @@ export class BackgroundTextureModel extends ClipSpace {
       fs: BACKGROUND_FS,
       parameters: {
         depthWriteEnabled: false,
-        depthCompare: 'always',
         ...(props.blend
           ? {
               blend: true,
               blendColorOperation: 'add',
               blendAlphaOperation: 'add',
               blendColorSrcFactor: 'one',
-              blendColorDstFactor: 'one-minus-src-color',
+              blendColorDstFactor: 'one-minus-src',
               blendAlphaSrcFactor: 'one',
               blendAlphaDstFactor: 'one-minus-src-alpha'
             }
@@ -82,6 +81,9 @@ export class BackgroundTextureModel extends ClipSpace {
       }
     });
 
+    if (!props.backgroundTexture) {
+      throw new Error('BackgroundTextureModel requires a backgroundTexture prop');
+    }
     this.setTexture(props.backgroundTexture);
   }
 

package/src/modules/picking/legacy-picking-manager.ts

@@ -42,7 +42,7 @@ export class LegacyPickingManager {
   /** Prepare for rendering picking colors */
   beginRenderPass() {
     const framebuffer = this.getFramebuffer();
-    framebuffer.resize(this.device.getCanvasContext().getPixelSize());
+    framebuffer.resize(this.device.getCanvasContext().getDevicePixelSize());
 
     this.shaderInputs.setProps({picking: {isActive: true}});
 
@@ -90,7 +90,7 @@ export class LegacyPickingManager {
    * Get pick position in device pixel range
    * use the center pixel location in device pixel range
    */
-  getPickPosition(mousePosition: number[]): [number, number] {
+  getPickPosition(mousePosition: [number, number]): [number, number] {
     const devicePixels = this.device.getCanvasContext().cssToDevicePixels(mousePosition);
     const pickX = devicePixels.x + Math.floor(devicePixels.width / 2);
     const pickY = devicePixels.y + Math.floor(devicePixels.height / 2);

package/src/modules/picking/picking-manager.ts

@@ -67,7 +67,7 @@ export class PickingManager {
   /** Prepare for rendering picking colors */
   beginRenderPass() {
     const framebuffer = this.getFramebuffer();
-    framebuffer.resize(this.device.getDefaultCanvasContext().getPixelSize());
+    framebuffer.resize(this.device.getDefaultCanvasContext().getDevicePixelSize());
 
     this.props.shaderInputs?.setProps({picking: {isActive: true}});
 
@@ -128,7 +128,7 @@ export class PickingManager {
    * Get pick position in device pixel range
    * use the center pixel location in device pixel range
    */
-  getPickPosition(mousePosition: number[]): [number, number] {
+  getPickPosition(mousePosition: [number, number]): [number, number] {
     const devicePixels = this.device.getDefaultCanvasContext().cssToDevicePixels(mousePosition);
     const pickX = devicePixels.x + Math.floor(devicePixels.width / 2);
     const pickY = devicePixels.y + Math.floor(devicePixels.height / 2);

package/src/passes/get-fragment-shader.ts

@@ -37,11 +37,11 @@ export function getFragmentShaderForRenderPass(options: {
 function getFilterShaderWGSL(func: string) {
   return /* wgsl */ `\
 // Binding 0:1 is reserved for shader passes
-@group(0) @binding(0) var<uniform> brightnessContrast : brightnessContrastUniforms;
+// @group(0) @binding(0) var<uniform> brightnessContrast : brightnessContrastUniforms;
 @group(0) @binding(1) var texture: texture_2d<f32>;
 @group(0) @binding(2) var sampler: sampler;
 
-struct FragmentInputs = {
+struct FragmentInputs {
   @location(0) fragUV: vec2f,
   @location(1) fragPosition: vec4f,
   @location(2) fragCoordinate: vec4f