allow further texture uniforms

CHANGES.md

@@ -1,5 +1,13 @@
 # Change Log
 
+## 1.130 - 2025-06-01
+
+### @cesium/engine
+
+#### Additions :tada:
+
+- Added the ability to pass `OffscreenCanvas` & `ImageBitmap` directly to `Material` uniforms. [#12558](https://github.com/CesiumGS/cesium/pull/12558)
+
 ## 1.129 - 2025-05-01
 
 ### @cesium/engine

packages/engine/Source/Renderer/Texture.js

@@ -18,7 +18,9 @@ import TextureMinificationFilter from "./TextureMinificationFilter.js";
  * @typedef {object} Texture.ConstructorOptions
  *
  * @property {Context} context
- * @property {object} [source] The source for texel values to be loaded into the texture.
+ * @property {object} [source] The source for texel values to be loaded into the texture. A {@link ImageData}, {@link HTMLImageElement}, {@link HTMLCanvasElement},
+ *                        {@link HTMLVideoElement}, {@link OffscreenCanvas}, or {@link ImageBitmap},
+ *                        or an object with width, height, and arrayBufferView properties.
  * @property {PixelFormat} [pixelFormat=PixelFormat.RGBA] The format of each pixel, i.e., the number of components it has and what they represent.
  * @property {PixelDatatype} [pixelDatatype=PixelDatatype.UNSIGNED_BYTE] The data type of each pixel.
  * @property {boolean} [flipY=true] If true, the source values will be read as if the y-axis is inverted (y=0 at the top).
@@ -483,7 +485,7 @@ function loadFramebufferSource(texture, source) {
  * Load texel data from an Image into a texture.
  *
  * @param {Texture} texture The texture to which texel values will be loaded.
- * @param {ImageData|HTMLImageElement|HTMLCanvasElement|HTMLVideoElement} source The source for texel values to be loaded into the texture.
+ * @param {ImageData|HTMLImageElement|HTMLCanvasElement|HTMLVideoElement|OffscreenCanvas|ImageBitmap} source The source for texel values to be loaded into the texture.
  *
  * @private
  */
@@ -830,7 +832,8 @@ function setupSampler(texture, sampler) {
  * Copy new image data into this texture, from a source {@link ImageData}, {@link HTMLImageElement}, {@link HTMLCanvasElement}, or {@link HTMLVideoElement}.
  * or an object with width, height, and arrayBufferView properties.
  * @param {object} options Object with the following properties:
- * @param {object} options.source The source {@link ImageData}, {@link HTMLImageElement}, {@link HTMLCanvasElement}, or {@link HTMLVideoElement},
+ * @param {object} options.source The source {@link ImageData}, {@link HTMLImageElement}, {@link HTMLCanvasElement}, {@link HTMLVideoElement},
+ *                        {@link OffscreenCanvas}, or {@link ImageBitmap},
  *                        or an object with width, height, and arrayBufferView properties.
  * @param {number} [options.xOffset=0] The offset in the x direction within the texture to copy into.
  * @param {number} [options.yOffset=0] The offset in the y direction within the texture to copy into.

packages/engine/Source/Scene/Material.js

@@ -914,7 +914,9 @@ function createTexture2DUpdateFunction(uniformId) {
           });
       } else if (
         uniformValue instanceof HTMLCanvasElement ||
-        uniformValue instanceof HTMLImageElement
+        uniformValue instanceof HTMLImageElement ||
+        uniformValue instanceof ImageBitmap ||
+        uniformValue instanceof OffscreenCanvas
       ) {
         material._loadedImages.push({
           id: uniformId,
@@ -1091,7 +1093,9 @@ function getUniformType(uniformValue) {
       type === "string" ||
       uniformValue instanceof Resource ||
       uniformValue instanceof HTMLCanvasElement ||
-      uniformValue instanceof HTMLImageElement
+      uniformValue instanceof HTMLImageElement ||
+      uniformValue instanceof ImageBitmap ||
+      uniformValue instanceof OffscreenCanvas
     ) {
       if (/^([rgba]){1,4}$/i.test(uniformValue)) {
         uniformType = "channels";

packages/engine/Specs/Scene/MaterialSpec.js

@@ -370,6 +370,44 @@ describe(
       renderMaterial(material);
     });
 
+    it("creates a material with an image offscreen canvas uniform", function () {
+      const canvas = new OffscreenCanvas(1, 1);
+      const context2D = canvas.getContext("2d");
+      context2D.fillStyle = "rgb(0,0,255)";
+      context2D.fillRect(0, 0, 1, 1);
+
+      const material = new Material({
+        strict: true,
+        fabric: {
+          type: "DiffuseMap",
+          uniforms: {
+            image: canvas,
+          },
+        },
+      });
+
+      renderMaterial(material);
+    });
+
+    it("creates a material with an image bitmap", function () {
+      const canvas = new OffscreenCanvas(1, 1);
+      const context2D = canvas.getContext("2d");
+      context2D.fillStyle = "rgb(0,0,255)";
+      context2D.fillRect(0, 0, 1, 1);
+
+      const material = new Material({
+        strict: true,
+        fabric: {
+          type: "DiffuseMap",
+          uniforms: {
+            image: canvas.transferToImageBitmap(),
+          },
+        },
+      });
+
+      renderMaterial(material);
+    });
+
     it("creates a material with an KTX2 compressed image uniform", function () {
       let compressedUrl;
       if (FeatureDetection.supportsBasis(scene)) {