@luma.gl/engine 9.2.6 → 9.3.0-alpha.10

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

@@ -3,24 +3,35 @@
 // Copyright (c) vis.gl contributors
 
 import {Device, Texture} from '@luma.gl/core';
-import {AsyncTexture} from '../async-texture/async-texture';
-import {ClipSpace} from './clip-space';
+import type {ShaderModule} from '@luma.gl/shadertools';
+import {DynamicTexture} from '../dynamic-texture/dynamic-texture';
+import {ClipSpace, ClipSpaceProps} from './clip-space';
+
+const backgroundModule = {
+  name: 'background',
+  uniformTypes: {
+    scale: 'vec2<f32>'
+  }
+} as const satisfies ShaderModule<{}, {scale: [number, number]}>;
 
 const BACKGROUND_FS_WGSL = /* wgsl */ `\
 @group(0) @binding(0) var backgroundTexture: texture_2d<f32>;
 @group(0) @binding(1) var backgroundTextureSampler: sampler;
+struct backgroundUniforms {
+  scale: vec2<f32>,
+};
+@group(0) @binding(2) var<uniform> background: backgroundUniforms;
 
-fn billboardTexture_getTextureUV(coordinates: vec2<f32>) -> vec2<f32> {
-	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;
-} 
+fn billboardTexture_getTextureUV(uv: vec2<f32>) -> vec2<f32> {
+        let scale: vec2<f32> = background.scale;
+        var position: vec2<f32> = (uv - vec2<f32>(0.5, 0.5)) / scale + vec2<f32>(0.5, 0.5);
+        return position;
+}
 
 @fragment
 fn fragmentMain(inputs: FragmentInputs) -> @location(0) vec4<f32> {
-	let position: vec2<f32> = billboardTexture_getTextureUV(inputs.coordinate);
-	return textureSample(backgroundTexture, backgroundTextureSampler, position);
+        let position: vec2<f32> = billboardTexture_getTextureUV(inputs.uv);
+        return textureSample(backgroundTexture, backgroundTextureSampler, position);
 }
 `;
 
@@ -29,17 +40,21 @@ const BACKGROUND_FS = /* glsl */ `\
 precision highp float;
 
 uniform sampler2D backgroundTexture;
+
+layout(std140) uniform backgroundUniforms {
+  vec2 scale;
+} background;
+
+in vec2 coordinate;
 out vec4 fragColor;
 
-vec2 billboardTexture_getTextureUV() {
-  ivec2 iTexSize = textureSize(backgroundTexture, 0);
-  vec2 texSize = vec2(float(iTexSize.x), float(iTexSize.y));
-  vec2 position = gl_FragCoord.xy / texSize;
+vec2 billboardTexture_getTextureUV(vec2 coord) {
+  vec2 position = (coord - 0.5) / background.scale + 0.5;
   return position;
 }
 
 void main(void) {
-  vec2 position = billboardTexture_getTextureUV();
+  vec2 position = billboardTexture_getTextureUV(coordinate);
   fragColor = texture(backgroundTexture, position);
 }
 `;
@@ -47,11 +62,11 @@ void main(void) {
 /**
  * Props for a Model that renders a bitmap into the "background", i.e covering the screen
  */
-export type BackgroundTextureModelProps = {
+export type BackgroundTextureModelProps = ClipSpaceProps & {
   /** id of this model */
   id?: string;
   /** The texture to render */
-  backgroundTexture: Texture | AsyncTexture;
+  backgroundTexture: Texture | DynamicTexture;
   /** If true, the texture is rendered into transparent areas of the screen only, i.e blended in where background alpha is small */
   blend?: boolean;
 };
@@ -60,22 +75,27 @@ export type BackgroundTextureModelProps = {
  * Model that renders a bitmap into the "background", i.e covering the screen
  */
 export class BackgroundTextureModel extends ClipSpace {
+  backgroundTexture: Texture = null!;
+
   constructor(device: Device, props: BackgroundTextureModelProps) {
     super(device, {
+      ...props,
       id: props.id || 'background-texture-model',
       source: BACKGROUND_FS_WGSL,
       fs: BACKGROUND_FS,
+      modules: [...(props.modules || []), backgroundModule],
       parameters: {
         depthWriteEnabled: false,
+        ...(props.parameters || {}),
         ...(props.blend
           ? {
               blend: true,
               blendColorOperation: 'add',
               blendAlphaOperation: 'add',
-              blendColorSrcFactor: 'one',
-              blendColorDstFactor: 'one-minus-src',
-              blendAlphaSrcFactor: 'one',
-              blendAlphaDstFactor: 'one-minus-src-alpha'
+              blendColorSrcFactor: 'one-minus-dst-alpha',
+              blendColorDstFactor: 'one',
+              blendAlphaSrcFactor: 'one-minus-dst-alpha',
+              blendAlphaDstFactor: 'one'
             }
           : {})
       }
@@ -84,17 +104,58 @@ export class BackgroundTextureModel extends ClipSpace {
     if (!props.backgroundTexture) {
       throw new Error('BackgroundTextureModel requires a backgroundTexture prop');
     }
-    this.setTexture(props.backgroundTexture);
+    this.setProps(props);
   }
 
-  setTexture(backgroundTexture: Texture | AsyncTexture): void {
-    this.setBindings({
-      backgroundTexture
-    });
+  /** Update the background texture */
+  setProps(props: Partial<BackgroundTextureModelProps>): void {
+    const {backgroundTexture} = props;
+    if (backgroundTexture) {
+      this.setBindings({backgroundTexture});
+
+      if (backgroundTexture.isReady) {
+        const texture =
+          backgroundTexture instanceof DynamicTexture
+            ? backgroundTexture.texture
+            : backgroundTexture;
+        this.backgroundTexture = texture;
+        this.updateScale(texture);
+      } else {
+        backgroundTexture.ready.then(texture => {
+          this.backgroundTexture = texture;
+          this.updateScale(texture);
+        });
+      }
+    }
   }
 
   override predraw(): void {
-    this.shaderInputs.setProps({});
+    // this.updateScale(this.backgroundTexture);
     super.predraw();
   }
+
+  updateScale(texture: Texture): void {
+    if (!texture) {
+      // Initial scale to avoid rendering issues before texture is loaded
+      this.shaderInputs.setProps({background: {scale: [1, 1]}});
+      return;
+    }
+    const [screenWidth, screenHeight] = this.device.getCanvasContext().getDrawingBufferSize();
+
+    const textureWidth = texture.width;
+    const textureHeight = texture.height;
+
+    const screenAspect = screenWidth / screenHeight;
+    const textureAspect = textureWidth / textureHeight;
+
+    let scaleX = 1;
+    let scaleY = 1;
+    if (screenAspect > textureAspect) {
+      scaleY = screenAspect / textureAspect;
+    } else {
+      scaleX = textureAspect / screenAspect;
+    }
+
+    this.shaderInputs.setProps({background: {scale: [scaleX, scaleY]}});
+  }
 }

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

@@ -7,7 +7,7 @@ import {ShaderModule} from '@luma.gl/shadertools';
 const BACKGROUND_FS = /* glsl */ `\
 #version 300 es
 
-uniform billboardTextureUniforms {
+layout(std140) uniform billboardTextureUniforms {
   vec2 topLeft;
   vec2 bottomRight;
 } billboardTexture;

package/src/models/clip-space.ts

@@ -10,9 +10,9 @@ 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>  
+  @location(0) clipSpacePositions: vec2<f32>,
+  @location(1) texCoords: vec2<f32>,
+  @location(2) coordinates: vec2<f32>
 }
 
 struct FragmentInputs {
@@ -25,10 +25,10 @@ struct FragmentInputs {
 @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;
+  outputs.Position = vec4(inputs.clipSpacePositions, 0., 1.);
+  outputs.position = inputs.clipSpacePositions;
+  outputs.coordinate = inputs.coordinates;
+  outputs.uv = inputs.texCoords;
   return outputs;
 }
 `;

package/src/models/directional-light-model.ts

@@ -0,0 +1,32 @@
+// luma.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {Device} from '@luma.gl/core';
+import {ConeGeometry} from '../geometries/cone-geometry';
+import {
+  BaseLightModel,
+  buildDirectionalLightInstanceData,
+  type DirectionalLightModelProps
+} from './light-model-utils';
+
+const DIRECTIONAL_LIGHT_GEOMETRY = new ConeGeometry({
+  cap: true,
+  nradial: 12,
+  nvertical: 1,
+  radius: 1
+});
+
+export type {DirectionalLightModelProps} from './light-model-utils';
+
+export class DirectionalLightModel extends BaseLightModel<DirectionalLightModelProps> {
+  constructor(device: Device, props: DirectionalLightModelProps) {
+    super(device, props, {
+      anchorMode: 'apex',
+      buildInstanceData: buildDirectionalLightInstanceData,
+      geometry: DIRECTIONAL_LIGHT_GEOMETRY,
+      idPrefix: 'directional-light-model',
+      sizePropNames: ['directionalLightLength']
+    });
+  }
+}