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

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

@@ -0,0 +1,179 @@
+// luma.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import type {NumberArray4} from '@math.gl/types';
+import type {ShaderModule} from '@luma.gl/shadertools';
+
+/** Default color for auto highlight, a cyan color */
+const DEFAULT_HIGHLIGHT_COLOR: NumberArray4 = [0, 1, 1, 1];
+
+export const INVALID_INDEX = -1;
+
+/**
+ * Props for the picking module, which depending on mode renders picking colors or highlighted item.
+ * When active, renders picking colors, assumed to be rendered to off-screen "picking" buffer.
+ * When inactive, renders normal colors, with the exception of selected object which is rendered with highlight
+ * can distinguish between 2^32 different objects in each of 2^32 different batches.
+ */
+export type PickingProps = {
+  /** Are we picking? I.e. rendering picking colors? */
+  isActive?: boolean;
+  /** Whether to use instance_index (built-in) or a custom application supplied index (usually from an attribute) */
+  indexMode?: 'instance' | 'custom';
+  /** Batch index (used when rendering multiple models to identify which model was picked), defaults to 0 */
+  batchIndex?: number;
+
+  /** Index of the highlighted batch, defaults to 0 */
+  highlightedBatchIndex?: number | null;
+  /** Set an index to highlight that item, or `null` to explicitly clear **/
+  highlightedObjectIndex?: number | null;
+  /** Color of visual highlight of "selected" item () */
+  highlightColor?: NumberArray4;
+};
+
+/**
+ * Uniforms for the picking module, which renders picking colors and highlighted item.
+ * When active, renders picking colors, assumed to be rendered to off-screen "picking" buffer.
+ * When inactive, renders normal colors, with the exception of selected object which is rendered with highlight
+ */
+export type PickingUniforms = {
+  /**
+   * When true, renders picking colors. Set when rendering to off-screen "picking" buffer.
+   * When false, renders normal colors, with the exception of selected object which is rendered with highlight
+   */
+  isActive: boolean;
+  /** Set to true when picking an attribute value instead of object index */
+  indexMode: 0 | 1;
+  /** Index of batch currently being rendered */
+  batchIndex: number;
+
+  /** Do we have a highlighted item? */
+  isHighlightActive: boolean;
+  /** Color of visual highlight of "selected" item. Note: RGBA components must in the range 0-1 */
+  highlightColor: NumberArray4;
+  /** Indicates which batch to visually highlight an item in (defaults to 0) */
+  highlightedBatchIndex: number;
+  /** Indicates which index in the batch to highlight an item in */
+  highlightedObjectIndex: number;
+};
+
+export type PickingBindings = {};
+
+// GLSL_UNIFORMS
+
+const uniformTypes: Required<ShaderModule<PickingProps, PickingUniforms>>['uniformTypes'] = {
+  isActive: 'i32',
+  indexMode: 'i32',
+  batchIndex: 'i32',
+
+  isHighlightActive: 'i32',
+  highlightedBatchIndex: 'i32',
+  highlightedObjectIndex: 'i32',
+  highlightColor: 'vec4<f32>'
+};
+
+export const GLSL_UNIFORMS = /* glsl */ `\
+precision highp float;
+precision highp int;
+
+uniform pickingUniforms {
+  int isActive;
+  int indexMode;
+  int batchIndex;
+
+  int isHighlightActive;
+  int highlightedBatchIndex;
+  int highlightedObjectIndex;
+  vec4 highlightColor;
+} picking;
+`;
+
+export const WGSL_UNIFORMS = /* wgsl */ `\
+struct pickingUniforms {
+  isActive: int32;
+  indexMode: int32;
+  batchIndex: int32;
+
+  isHighlightActive: int32;
+  highlightedBatchIndex: int32;
+  highlightedObjectIndex: int32;
+  highlightColor: vec4<f32>;
+} picking;
+`;
+
+function getUniforms(props: PickingProps = {}, prevUniforms?: PickingUniforms): PickingUniforms {
+  const uniforms = {...prevUniforms} as PickingUniforms;
+
+  // picking
+  if (props.isActive !== undefined) {
+    uniforms.isActive = Boolean(props.isActive);
+  }
+
+  switch (props.indexMode) {
+    case 'instance':
+      uniforms.indexMode = 0;
+      break;
+    case 'custom':
+      uniforms.indexMode = 1;
+      break;
+    case undefined:
+      // no change
+      break;
+  }
+
+  switch (props.highlightedObjectIndex) {
+    case undefined:
+      // Unless highlightedObjectColor explicitly null or set, do not update state
+      break;
+    case null:
+      // Clear highlight
+      uniforms.isHighlightActive = false;
+      uniforms.highlightedObjectIndex = INVALID_INDEX;
+      break;
+    default:
+      uniforms.isHighlightActive = true;
+      uniforms.highlightedObjectIndex = props.highlightedObjectIndex;
+  }
+
+  if (typeof props.highlightedBatchIndex === 'number') {
+    uniforms.highlightedBatchIndex = props.highlightedBatchIndex;
+  }
+
+  if (props.highlightColor) {
+    uniforms.highlightColor = props.highlightColor;
+  }
+
+  return uniforms;
+}
+
+/**
+ * Provides support for color-based picking and highlighting.
+ *
+ * In particular, supports picking a specific instance in an instanced
+ * draw call and highlighting an instance based on its picking color,
+ * and correspondingly, supports picking and highlighting groups of
+ * primitives with the same picking color in non-instanced draw-calls
+ *
+ * @note Color based picking has the significant advantage in that it can be added to any
+ * existing shader without requiring any additional picking logic.
+ */
+export const pickingUniforms = {
+  props: {} as PickingProps,
+  uniforms: {} as PickingUniforms,
+
+  name: 'picking',
+
+  uniformTypes,
+  defaultUniforms: {
+    isActive: false,
+    indexMode: 0,
+    batchIndex: 0,
+    isHighlightActive: true,
+    highlightedBatchIndex: INVALID_INDEX,
+    highlightedObjectIndex: INVALID_INDEX,
+    highlightColor: DEFAULT_HIGHLIGHT_COLOR
+  },
+
+  getUniforms
+} as const satisfies ShaderModule<PickingProps, PickingUniforms, PickingBindings>;

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

@@ -0,0 +1,129 @@
+// luma.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {ShaderPass} from '@luma.gl/shadertools';
+
+/**
+ * Gets fragment shader source for a shader pass sub pass
+ * @param options
+ * @returns
+ */
+export function getFragmentShaderForRenderPass(options: {
+  shaderPass: ShaderPass;
+  action: 'filter' | 'sample';
+  shadingLanguage: 'wgsl' | 'glsl';
+}): string {
+  const {shaderPass, action, shadingLanguage} = options;
+  switch (action) {
+    case 'filter':
+      const filterFunc = `${shaderPass.name}_filterColor_ext`;
+      return shadingLanguage === 'wgsl'
+        ? getFilterShaderWGSL(filterFunc)
+        : getFilterShaderGLSL(filterFunc);
+
+    case 'sample':
+      const samplerFunc = `${shaderPass.name}_sampleColor`;
+      return shadingLanguage === 'wgsl'
+        ? getSamplerShaderWGSL(samplerFunc)
+        : getSamplerShaderGLSL(samplerFunc);
+
+    default:
+      throw new Error(`${shaderPass.name} no fragment shader generated for shader pass`);
+  }
+}
+
+/** Get a filtering WGSL fragment shader */
+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(1) var texture: texture_2d<f32>;
+@group(0) @binding(2) var sampler: sampler;
+
+struct FragmentInputs = {
+  @location(0) fragUV: vec2f,
+  @location(1) fragPosition: vec4f,
+  @location(2) fragCoordinate: vec4f
+};
+
+@fragment
+fn fragmentMain(inputs: FragmentInputs) -> @location(0) vec4f {
+  let texSize = textureDimensions(texture, 0);
+  var fragColor = textureSample(texture, sampler, fragUV);
+  fragColor = ${func}(gl_FragColor, texSize, texCoord);
+  return fragColor;
+}
+`;
+}
+
+/** Get a sampling WGSL fragment shader */
+function getSamplerShaderWGSL(func: string) {
+  return /* wgsl */ `\
+// Binding 0:1 is reserved for shader passes
+@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 = {
+  @location(0) fragUV: vec2f,
+  @location(1) fragPosition: vec4f,
+  @location(2) fragCoordinate: vec4f
+};
+
+@fragment
+fn fragmentMain(inputs: FragmentInputs) -> @location(0) vec4f {
+  let texSize = textureDimensions(texture, 0);
+  var fragColor = textureSample(texture, sampler, fragUV);
+  fragColor = ${func}(gl_FragColor, texSize, texCoord);
+  return fragColor;
+}
+`;
+}
+
+/** Get a filtering GLSL fragment shader */
+function getFilterShaderGLSL(func: string) {
+  return /* glsl */ `\
+#version 300 es
+
+uniform sampler2D sourceTexture;
+
+in vec2 position;
+in vec2 coordinate;
+in vec2 uv;
+
+out vec4 fragColor;
+
+void main() {
+  vec2 texCoord = coordinate;
+  ivec2 iTexSize = textureSize(sourceTexture, 0);
+  vec2 texSize = vec2(float(iTexSize.x), float(iTexSize.y));
+
+  fragColor = texture(sourceTexture, texCoord);
+  fragColor = ${func}(fragColor, texSize, texCoord);
+}
+`;
+}
+
+/** Get a sampling GLSL fragment shader */
+function getSamplerShaderGLSL(func: string) {
+  return /* glsl */ `\
+#version 300 es
+
+uniform sampler2D sourceTexture;
+
+in vec2 position;
+in vec2 coordinate;
+in vec2 uv;
+
+out vec4 fragColor;
+
+void main() {
+  vec2 texCoord = coordinate;
+  ivec2 iTexSize = textureSize(sourceTexture, 0);
+  vec2 texSize = vec2(float(iTexSize.x), float(iTexSize.y));
+
+  fragColor = ${func}(sourceTexture, texSize, texCoord);
+}
+`;
+}

package/src/passes/shader-pass-renderer.ts

@@ -0,0 +1,252 @@
+// luma.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {Device, RenderPass, Texture} from '@luma.gl/core';
+import type {ShaderPass} from '@luma.gl/shadertools';
+import {initializeShaderModule} from '@luma.gl/shadertools';
+import {ShaderInputs} from '../shader-inputs';
+import {AsyncTexture} from '../async-texture/async-texture';
+import {ClipSpace} from '../models/clip-space';
+import {SwapFramebuffers} from '../compute/swap';
+import {BackgroundTextureModel} from '../models/billboard-texture-model';
+
+import {getFragmentShaderForRenderPass} from './get-fragment-shader';
+
+type ShaderSubPass = NonNullable<ShaderPass['passes']>[0];
+
+/** Props for ShaderPassRenderer */
+export type ShaderPassRendererProps = {
+  /** List of ShaderPasses to apply to the sourceTexture */
+  shaderPasses: ShaderPass[];
+  /** Optional typed ShaderInputs object for setting uniforms */
+  shaderInputs: ShaderInputs;
+};
+
+/** A pass that renders a given texture into screen space */
+export class ShaderPassRenderer {
+  device: Device;
+  shaderInputs: ShaderInputs;
+  passRenderers: PassRenderer[];
+  swapFramebuffers: SwapFramebuffers;
+  /** For rendering to the screen */
+  clipSpace: ClipSpace;
+  textureModel: BackgroundTextureModel;
+
+  constructor(device: Device, props: ShaderPassRendererProps) {
+    this.device = device;
+
+    props.shaderPasses.map(shaderPass => initializeShaderModule(shaderPass));
+
+    const modules = props.shaderPasses.reduce(
+      (object, shaderPass) => ({...object, [shaderPass.name]: shaderPass}),
+      {}
+    );
+    this.shaderInputs = props.shaderInputs || new ShaderInputs(modules);
+
+    const size = device.getCanvasContext().getPixelSize();
+    this.swapFramebuffers = new SwapFramebuffers(device, {
+      colorAttachments: ['rgba8unorm'],
+      width: size[0],
+      height: size[1]
+    });
+
+    this.textureModel = new BackgroundTextureModel(device, {
+      backgroundTexture: this.swapFramebuffers.current.colorAttachments[0].texture
+    });
+
+    this.clipSpace = new ClipSpace(device, {
+      source: /* wgsl */ `\
+  @group(0) @binding(0) var sourceTexture: texture_2d<f32>;
+  @group(0) @binding(1) var sourceTextureSampler: sampler;
+
+@fragment
+fn fragmentMain(inputs: FragmentInputs) -> @location(0) vec4<f32> {
+	let texCoord: vec2<f32> = inputs.coordinate;
+	return textureSample(sourceTexture, sourceTextureSampler, texCoord);
+}
+`,
+
+      fs: /* glsl */ `\
+#version 300 es
+
+uniform sampler2D sourceTexture;
+in vec2 uv;
+in vec2 coordinate;
+out vec4 fragColor;
+
+void main() {
+  vec2 texCoord = coordinate;
+  fragColor = texture(sourceTexture, coordinate);
+}
+`
+    });
+
+    this.passRenderers = props.shaderPasses.map(shaderPass => new PassRenderer(device, shaderPass));
+  }
+
+  /** Destroys resources created by this ShaderPassRenderer */
+  destroy() {
+    for (const subPassRenderer of this.passRenderers) {
+      subPassRenderer.destroy();
+    }
+    this.swapFramebuffers.destroy();
+    this.clipSpace.destroy();
+  }
+
+  resize(width: number, height: number): void {
+    this.swapFramebuffers.resize({width, height});
+    // this.props.passes.forEach(pass => pass.resize(width, height));
+  }
+
+  renderToScreen(options: {sourceTexture: AsyncTexture; uniforms: any; bindings: any}): boolean {
+    // Run the shader passes and generate an output texture
+    const outputTexture = this.renderToTexture(options);
+    if (!outputTexture) {
+      // source texture not yet loaded
+      return false;
+    }
+
+    const renderPass = this.device.beginRenderPass({clearColor: [0, 0, 0, 1], clearDepth: 1});
+    this.clipSpace.setBindings({sourceTexture: outputTexture});
+    this.clipSpace.draw(renderPass);
+    renderPass.end();
+    return true;
+  }
+
+  /** Runs the shaderPasses in sequence on the sourceTexture and returns a texture with the results.
+   * @returns null if the the sourceTexture has not yet been loaded
+   */
+  renderToTexture(options: {
+    sourceTexture: AsyncTexture;
+    uniforms: any;
+    bindings: any;
+  }): Texture | null {
+    const {sourceTexture} = options;
+    if (!sourceTexture.isReady) {
+      return null;
+    }
+
+    this.textureModel.destroy();
+    this.textureModel = new BackgroundTextureModel(this.device, {
+      backgroundTexture: sourceTexture
+    });
+
+    // Clear the current texture before we begin
+    const clearTexturePass = this.device.beginRenderPass({
+      framebuffer: this.swapFramebuffers.current,
+      clearColor: [0, 0, 0, 1]
+    });
+    this.textureModel.draw(clearTexturePass);
+    clearTexturePass.end();
+
+    // const commandEncoder = this.device.createCommandEncoder();
+    // commandEncoder.copyTextureToTexture({
+    //   sourceTexture: sourceTexture.texture,
+    //   destinationTexture: this.swapFramebuffers.current.colorAttachments[0].texture
+    // });
+    // commandEncoder.finish();
+
+    let first = true;
+    for (const passRenderer of this.passRenderers) {
+      for (const subPassRenderer of passRenderer.subPassRenderers) {
+        if (!first) {
+          this.swapFramebuffers.swap();
+        }
+        first = false;
+
+        const swapBufferTexture = this.swapFramebuffers.current.colorAttachments[0].texture;
+
+        const bindings = {
+          sourceTexture: swapBufferTexture
+          // texSize: [sourceTextures.width, sourceTextures.height]
+        };
+
+        const renderPass = this.device.beginRenderPass({
+          framebuffer: this.swapFramebuffers.next,
+          clearColor: [0, 0, 0, 1],
+          clearDepth: 1
+        });
+        subPassRenderer.render({renderPass, bindings});
+        renderPass.end();
+      }
+    }
+
+    this.swapFramebuffers.swap();
+    const outputTexture = this.swapFramebuffers.current.colorAttachments[0].texture;
+    return outputTexture;
+  }
+}
+
+/** renders one ShaderPass */
+class PassRenderer {
+  shaderPass: ShaderPass;
+  subPassRenderers: SubPassRenderer[];
+
+  constructor(device: Device, shaderPass: ShaderPass, props = {}) {
+    this.shaderPass = shaderPass;
+    // const id = `${shaderPass.name}-pass`;
+
+    const subPasses = shaderPass.passes || [];
+    // normalizePasses(gl, module, id, props);
+
+    this.subPassRenderers = subPasses.map(subPass => {
+      // const idn = `${id}-${subPasses.length + 1}`;
+      return new SubPassRenderer(device, shaderPass, subPass);
+    });
+  }
+
+  destroy() {
+    for (const subPassRenderer of this.subPassRenderers) {
+      subPassRenderer.destroy();
+    }
+  }
+}
+
+/** Renders one subpass of a ShaderPass */
+class SubPassRenderer {
+  model: ClipSpace;
+  shaderPass: ShaderPass;
+  subPass: ShaderSubPass;
+
+  constructor(device: Device, shaderPass: ShaderPass, subPass: ShaderSubPass) {
+    this.shaderPass = shaderPass;
+    this.subPass = subPass;
+    const action =
+      subPass.action || (subPass.filter && 'filter') || (subPass.sampler && 'sample') || 'filter';
+    const fs = getFragmentShaderForRenderPass({
+      shaderPass,
+      action,
+      shadingLanguage: device.info.shadingLanguage
+    });
+
+    this.model = new ClipSpace(device, {
+      id: `${shaderPass.name}-subpass`,
+      source: fs,
+      fs,
+      modules: [shaderPass],
+      parameters: {
+        depthWriteEnabled: false,
+        depthCompare: 'always'
+      }
+    });
+  }
+
+  destroy() {
+    this.model.destroy();
+  }
+
+  render(options: {renderPass: RenderPass; bindings: any}): void {
+    const {renderPass, bindings} = options;
+
+    this.model.shaderInputs.setProps({
+      [this.shaderPass.name]: this.shaderPass.uniforms || {}
+    });
+    this.model.shaderInputs.setProps({
+      [this.shaderPass.name]: this.subPass.uniforms || {}
+    });
+    // this.model.setBindings(this.subPass.bindings || {});
+    this.model.setBindings(bindings || {});
+    this.model.draw(renderPass);
+  }
+}