three-stdlib 2.22.7 → 2.22.8

package/dist/renderers/webgpu/WebGPUTextures.js

@@ -0,0 +1,483 @@
+"use strict";
+const constants = require("./constants.js");
+const THREE = require("three");
+const WebGPUTextureUtils = require("./WebGPUTextureUtils.js");
+class WebGPUTextures {
+  constructor(device, properties, info, glslang) {
+    this.device = device;
+    this.properties = properties;
+    this.info = info;
+    this.glslang = glslang;
+    this.defaultTexture = null;
+    this.defaultCubeTexture = null;
+    this.defaultSampler = null;
+    this.samplerCache = /* @__PURE__ */ new Map();
+    this.utils = null;
+  }
+  getDefaultSampler() {
+    if (this.defaultSampler === null) {
+      this.defaultSampler = this.device.createSampler({});
+    }
+    return this.defaultSampler;
+  }
+  getDefaultTexture() {
+    if (this.defaultTexture === null) {
+      const texture = new THREE.Texture();
+      texture.minFilter = THREE.NearestFilter;
+      texture.magFilter = THREE.NearestFilter;
+      this.defaultTexture = this._createTexture(texture);
+    }
+    return this.defaultTexture;
+  }
+  getDefaultCubeTexture() {
+    if (this.defaultCubeTexture === null) {
+      const texture = new THREE.CubeTexture();
+      texture.minFilter = THREE.NearestFilter;
+      texture.magFilter = THREE.NearestFilter;
+      this.defaultCubeTexture = this._createTexture(texture);
+    }
+    return this.defaultCubeTexture;
+  }
+  getTextureGPU(texture) {
+    const textureProperties = this.properties.get(texture);
+    return textureProperties.textureGPU;
+  }
+  getSampler(texture) {
+    const textureProperties = this.properties.get(texture);
+    return textureProperties.samplerGPU;
+  }
+  updateTexture(texture) {
+    let forceUpdate = false;
+    const textureProperties = this.properties.get(texture);
+    if (texture.version > 0 && textureProperties.version !== texture.version) {
+      const image = texture.image;
+      if (image === void 0) {
+        console.warn("THREE.WebGPURenderer: Texture marked for update but image is undefined.");
+      } else if (image.complete === false) {
+        console.warn("THREE.WebGPURenderer: Texture marked for update but image is incomplete.");
+      } else {
+        if (textureProperties.initialized === void 0) {
+          textureProperties.initialized = true;
+          const disposeCallback = onTextureDispose.bind(this);
+          textureProperties.disposeCallback = disposeCallback;
+          texture.addEventListener("dispose", disposeCallback);
+          this.info.memory.textures++;
+        }
+        if (textureProperties.textureGPU !== void 0) {
+          textureProperties.textureGPU.destroy();
+        }
+        textureProperties.textureGPU = this._createTexture(texture);
+        textureProperties.version = texture.version;
+        forceUpdate = true;
+      }
+    }
+    if (textureProperties.initializedRTT === false) {
+      textureProperties.initializedRTT = true;
+      forceUpdate = true;
+    }
+    return forceUpdate;
+  }
+  updateSampler(texture) {
+    const array = [];
+    array.push(texture.wrapS);
+    array.push(texture.wrapT);
+    array.push(texture.wrapR);
+    array.push(texture.magFilter);
+    array.push(texture.minFilter);
+    array.push(texture.anisotropy);
+    const key = array.join();
+    let samplerGPU = this.samplerCache.get(key);
+    if (samplerGPU === void 0) {
+      samplerGPU = this.device.createSampler({
+        addressModeU: this._convertAddressMode(texture.wrapS),
+        addressModeV: this._convertAddressMode(texture.wrapT),
+        addressModeW: this._convertAddressMode(texture.wrapR),
+        magFilter: this._convertFilterMode(texture.magFilter),
+        minFilter: this._convertFilterMode(texture.minFilter),
+        mipmapFilter: this._convertFilterMode(texture.minFilter),
+        maxAnisotropy: texture.anisotropy
+      });
+      this.samplerCache.set(key, samplerGPU);
+    }
+    const textureProperties = this.properties.get(texture);
+    textureProperties.samplerGPU = samplerGPU;
+  }
+  initRenderTarget(renderTarget) {
+    const properties = this.properties;
+    const renderTargetProperties = properties.get(renderTarget);
+    if (renderTargetProperties.initialized === void 0) {
+      const device = this.device;
+      const width = renderTarget.width;
+      const height = renderTarget.height;
+      const colorTextureFormat = this._getFormat(renderTarget.texture);
+      const colorTextureGPU = device.createTexture({
+        size: {
+          width,
+          height,
+          depthOrArrayLayers: 1
+        },
+        format: colorTextureFormat,
+        usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.SAMPLED
+      });
+      this.info.memory.textures++;
+      renderTargetProperties.colorTextureGPU = colorTextureGPU;
+      renderTargetProperties.colorTextureFormat = colorTextureFormat;
+      const textureProperties = properties.get(renderTarget.texture);
+      textureProperties.textureGPU = colorTextureGPU;
+      textureProperties.initializedRTT = false;
+      if (renderTarget.depthBuffer === true) {
+        const depthTextureFormat = constants.GPUTextureFormat.Depth24PlusStencil8;
+        const depthTextureGPU = device.createTexture({
+          size: {
+            width,
+            height,
+            depthOrArrayLayers: 1
+          },
+          format: depthTextureFormat,
+          usage: GPUTextureUsage.RENDER_ATTACHMENT
+        });
+        this.info.memory.textures++;
+        renderTargetProperties.depthTextureGPU = depthTextureGPU;
+        renderTargetProperties.depthTextureFormat = depthTextureFormat;
+        if (renderTarget.depthTexture !== null) {
+          const depthTextureProperties = properties.get(renderTarget.depthTexture);
+          depthTextureProperties.textureGPU = depthTextureGPU;
+          depthTextureProperties.initializedRTT = false;
+        }
+      }
+      const disposeCallback = onRenderTargetDispose.bind(this);
+      renderTargetProperties.disposeCallback = disposeCallback;
+      renderTarget.addEventListener("dispose", disposeCallback);
+      renderTargetProperties.initialized = true;
+    }
+  }
+  dispose() {
+    this.samplerCache.clear();
+  }
+  _convertAddressMode(value) {
+    let addressMode = constants.GPUAddressMode.ClampToEdge;
+    if (value === THREE.RepeatWrapping) {
+      addressMode = constants.GPUAddressMode.Repeat;
+    } else if (value === THREE.MirroredRepeatWrapping) {
+      addressMode = constants.GPUAddressMode.MirrorRepeat;
+    }
+    return addressMode;
+  }
+  _convertFilterMode(value) {
+    let filterMode = constants.GPUFilterMode.Linear;
+    if (value === THREE.NearestFilter || value === THREE.NearestMipmapNearestFilter || value === THREE.NearestMipmapLinearFilter) {
+      filterMode = constants.GPUFilterMode.Nearest;
+    }
+    return filterMode;
+  }
+  _createTexture(texture) {
+    const device = this.device;
+    const image = texture.image;
+    const { width, height, depth } = this._getSize(texture);
+    const needsMipmaps = this._needsMipmaps(texture);
+    const dimension = this._getDimension(texture);
+    const mipLevelCount = this._getMipLevelCount(texture, width, height, needsMipmaps);
+    const format = this._getFormat(texture);
+    let usage = GPUTextureUsage.SAMPLED | GPUTextureUsage.COPY_DST;
+    if (needsMipmaps === true) {
+      usage |= GPUTextureUsage.RENDER_ATTACHMENT;
+    }
+    const textureGPUDescriptor = {
+      size: {
+        width,
+        height,
+        depthOrArrayLayers: depth
+      },
+      mipLevelCount,
+      sampleCount: 1,
+      dimension,
+      format,
+      usage
+    };
+    const textureGPU = device.createTexture(textureGPUDescriptor);
+    if (texture.isDataTexture || texture.isDataTexture2DArray || texture.isDataTexture3D) {
+      this._copyBufferToTexture(image, format, textureGPU);
+      if (needsMipmaps === true)
+        this._generateMipmaps(textureGPU, textureGPUDescriptor);
+    } else if (texture.isCompressedTexture) {
+      this._copyCompressedBufferToTexture(texture.mipmaps, format, textureGPU);
+    } else if (texture.isCubeTexture) {
+      this._copyCubeMapToTexture(image, texture, textureGPU);
+    } else {
+      if (image !== void 0) {
+        this._getImageBitmap(image, texture).then((imageBitmap) => {
+          this._copyImageBitmapToTexture(imageBitmap, textureGPU);
+          if (needsMipmaps === true)
+            this._generateMipmaps(textureGPU, textureGPUDescriptor);
+        });
+      }
+    }
+    return textureGPU;
+  }
+  _copyBufferToTexture(image, format, textureGPU) {
+    const data = image.data;
+    const bytesPerTexel = this._getBytesPerTexel(format);
+    const bytesPerRow = Math.ceil(image.width * bytesPerTexel / 256) * 256;
+    this.device.queue.writeTexture(
+      {
+        texture: textureGPU,
+        mipLevel: 0
+      },
+      data,
+      {
+        offset: 0,
+        bytesPerRow
+      },
+      {
+        width: image.width,
+        height: image.height,
+        depthOrArrayLayers: image.depth !== void 0 ? image.depth : 1
+      }
+    );
+  }
+  _copyCubeMapToTexture(images, texture, textureGPU) {
+    for (let i = 0; i < images.length; i++) {
+      const image = images[i];
+      this._getImageBitmap(image, texture).then((imageBitmap) => {
+        this._copyImageBitmapToTexture(imageBitmap, textureGPU, {
+          x: 0,
+          y: 0,
+          z: i
+        });
+      });
+    }
+  }
+  _copyImageBitmapToTexture(image, textureGPU, origin = { x: 0, y: 0, z: 0 }) {
+    this.device.queue.copyImageBitmapToTexture(
+      {
+        imageBitmap: image
+      },
+      {
+        texture: textureGPU,
+        mipLevel: 0,
+        origin
+      },
+      {
+        width: image.width,
+        height: image.height,
+        depthOrArrayLayers: 1
+      }
+    );
+  }
+  _copyCompressedBufferToTexture(mipmaps, format, textureGPU) {
+    const blockData = this._getBlockData(format);
+    for (let i = 0; i < mipmaps.length; i++) {
+      const mipmap = mipmaps[i];
+      const width = mipmap.width;
+      const height = mipmap.height;
+      const bytesPerRow = Math.ceil(width / blockData.width) * blockData.byteLength;
+      this.device.queue.writeTexture(
+        {
+          texture: textureGPU,
+          mipLevel: i
+        },
+        mipmap.data,
+        {
+          offset: 0,
+          bytesPerRow
+        },
+        {
+          width: Math.ceil(width / blockData.width) * blockData.width,
+          height: Math.ceil(height / blockData.width) * blockData.width,
+          depthOrArrayLayers: 1
+        }
+      );
+    }
+  }
+  _generateMipmaps(textureGPU, textureGPUDescriptor) {
+    if (this.utils === null) {
+      this.utils = new WebGPUTextureUtils(this.device, this.glslang);
+    }
+    this.utils.generateMipmaps(textureGPU, textureGPUDescriptor);
+  }
+  _getBlockData(format) {
+    if (format === constants.GPUTextureFormat.BC1RGBAUnorm || format === constants.GPUTextureFormat.BC1RGBAUnormSRGB) {
+      return { byteLength: 8, width: 4, height: 4 };
+    }
+    if (format === constants.GPUTextureFormat.BC2RGBAUnorm || format === constants.GPUTextureFormat.BC2RGBAUnormSRGB) {
+      return { byteLength: 16, width: 4, height: 4 };
+    }
+    if (format === constants.GPUTextureFormat.BC3RGBAUnorm || format === constants.GPUTextureFormat.BC3RGBAUnormSRGB) {
+      return { byteLength: 16, width: 4, height: 4 };
+    }
+    if (format === constants.GPUTextureFormat.BC4RUnorm || format === constants.GPUTextureFormat.BC4RSNorm) {
+      return { byteLength: 8, width: 4, height: 4 };
+    }
+    if (format === constants.GPUTextureFormat.BC5RGUnorm || format === constants.GPUTextureFormat.BC5RGSnorm) {
+      return { byteLength: 16, width: 4, height: 4 };
+    }
+    if (format === constants.GPUTextureFormat.BC6HRGBUFloat || format === constants.GPUTextureFormat.BC6HRGBFloat) {
+      return { byteLength: 16, width: 4, height: 4 };
+    }
+    if (format === constants.GPUTextureFormat.BC7RGBAUnorm || format === constants.GPUTextureFormat.BC7RGBAUnormSRGB) {
+      return { byteLength: 16, width: 4, height: 4 };
+    }
+  }
+  _getBytesPerTexel(format) {
+    if (format === constants.GPUTextureFormat.R8Unorm)
+      return 1;
+    if (format === constants.GPUTextureFormat.R16Float)
+      return 2;
+    if (format === constants.GPUTextureFormat.RG8Unorm)
+      return 2;
+    if (format === constants.GPUTextureFormat.RG16Float)
+      return 4;
+    if (format === constants.GPUTextureFormat.R32Float)
+      return 4;
+    if (format === constants.GPUTextureFormat.RGBA8Unorm || format === constants.GPUTextureFormat.RGBA8UnormSRGB)
+      return 4;
+    if (format === constants.GPUTextureFormat.RG32Float)
+      return 8;
+    if (format === constants.GPUTextureFormat.RGBA16Float)
+      return 8;
+    if (format === constants.GPUTextureFormat.RGBA32Float)
+      return 16;
+  }
+  _getDimension(texture) {
+    let dimension;
+    if (texture.isDataTexture3D) {
+      dimension = constants.GPUTextureDimension.ThreeD;
+    } else {
+      dimension = constants.GPUTextureDimension.TwoD;
+    }
+    return dimension;
+  }
+  _getFormat(texture) {
+    const format = texture.format;
+    const type = texture.type;
+    const isSRGB = "colorSpace" in texture ? texture.colorSpace === "srgb" : texture.encoding === 3001;
+    let formatGPU;
+    switch (format) {
+      case THREE.RGBA_S3TC_DXT1_Format:
+        formatGPU = isSRGB ? constants.GPUTextureFormat.BC1RGBAUnormSRGB : constants.GPUTextureFormat.BC1RGBAUnorm;
+        break;
+      case THREE.RGBA_S3TC_DXT3_Format:
+        formatGPU = isSRGB ? constants.GPUTextureFormat.BC2RGBAUnormSRGB : constants.GPUTextureFormat.BC2RGBAUnorm;
+        break;
+      case THREE.RGBA_S3TC_DXT5_Format:
+        formatGPU = isSRGB ? constants.GPUTextureFormat.BC3RGBAUnormSRGB : constants.GPUTextureFormat.BC3RGBAUnorm;
+        break;
+      case THREE.RGBAFormat:
+        switch (type) {
+          case THREE.UnsignedByteType:
+            formatGPU = isSRGB ? constants.GPUTextureFormat.RGBA8UnormSRGB : constants.GPUTextureFormat.RGBA8Unorm;
+            break;
+          case THREE.HalfFloatType:
+            formatGPU = constants.GPUTextureFormat.RGBA16Float;
+            break;
+          case THREE.FloatType:
+            formatGPU = constants.GPUTextureFormat.RGBA32Float;
+            break;
+          default:
+            console.error("WebGPURenderer: Unsupported texture type with RGBAFormat.", type);
+        }
+        break;
+      case THREE.RedFormat:
+        switch (type) {
+          case THREE.UnsignedByteType:
+            formatGPU = constants.GPUTextureFormat.R8Unorm;
+            break;
+          case THREE.HalfFloatType:
+            formatGPU = constants.GPUTextureFormat.R16Float;
+            break;
+          case THREE.FloatType:
+            formatGPU = constants.GPUTextureFormat.R32Float;
+            break;
+          default:
+            console.error("WebGPURenderer: Unsupported texture type with RedFormat.", type);
+        }
+        break;
+      case THREE.RGFormat:
+        switch (type) {
+          case THREE.UnsignedByteType:
+            formatGPU = constants.GPUTextureFormat.RG8Unorm;
+            break;
+          case THREE.HalfFloatType:
+            formatGPU = constants.GPUTextureFormat.RG16Float;
+            break;
+          case THREE.FloatType:
+            formatGPU = constants.GPUTextureFormat.RG32Float;
+            break;
+          default:
+            console.error("WebGPURenderer: Unsupported texture type with RGFormat.", type);
+        }
+        break;
+      default:
+        console.error("WebGPURenderer: Unsupported texture format.", format);
+    }
+    return formatGPU;
+  }
+  _getImageBitmap(image, texture) {
+    const width = image.width;
+    const height = image.height;
+    if (typeof HTMLImageElement !== "undefined" && image instanceof HTMLImageElement || typeof HTMLCanvasElement !== "undefined" && image instanceof HTMLCanvasElement) {
+      const options = {};
+      options.imageOrientation = texture.flipY === true ? "flipY" : "none";
+      options.premultiplyAlpha = texture.premultiplyAlpha === true ? "premultiply" : "default";
+      return createImageBitmap(image, 0, 0, width, height, options);
+    } else {
+      return Promise.resolve(image);
+    }
+  }
+  _getMipLevelCount(texture, width, height, needsMipmaps) {
+    let mipLevelCount;
+    if (texture.isCompressedTexture) {
+      mipLevelCount = texture.mipmaps.length;
+    } else if (needsMipmaps === true) {
+      mipLevelCount = Math.floor(Math.log2(Math.max(width, height))) + 1;
+    } else {
+      mipLevelCount = 1;
+    }
+    return mipLevelCount;
+  }
+  _getSize(texture) {
+    const image = texture.image;
+    let width, height, depth;
+    if (texture.isCubeTexture) {
+      width = image.length > 0 ? image[0].width : 1;
+      height = image.length > 0 ? image[0].height : 1;
+      depth = 6;
+    } else if (image !== void 0) {
+      width = image.width;
+      height = image.height;
+      depth = image.depth !== void 0 ? image.depth : 1;
+    } else {
+      width = height = depth = 1;
+    }
+    return { width, height, depth };
+  }
+  _needsMipmaps(texture) {
+    return texture.isCompressedTexture !== true && texture.generateMipmaps === true && texture.minFilter !== THREE.NearestFilter && texture.minFilter !== THREE.LinearFilter;
+  }
+}
+function onRenderTargetDispose(event) {
+  const renderTarget = event.target;
+  const properties = this.properties;
+  const renderTargetProperties = properties.get(renderTarget);
+  renderTarget.removeEventListener("dispose", renderTargetProperties.disposeCallback);
+  renderTargetProperties.colorTextureGPU.destroy();
+  properties.remove(renderTarget.texture);
+  this.info.memory.textures--;
+  if (renderTarget.depthBuffer === true) {
+    renderTargetProperties.depthTextureGPU.destroy();
+    this.info.memory.textures--;
+    if (renderTarget.depthTexture !== null) {
+      properties.remove(renderTarget.depthTexture);
+    }
+  }
+  properties.remove(renderTarget);
+}
+function onTextureDispose(event) {
+  const texture = event.target;
+  const textureProperties = this.properties.get(texture);
+  textureProperties.textureGPU.destroy();
+  texture.removeEventListener("dispose", textureProperties.disposeCallback);
+  this.properties.remove(texture);
+  this.info.memory.textures--;
+}
+module.exports = WebGPUTextures;