three-stdlib 2.22.7 → 2.22.9

package/dist/renderers/webgpu/WebGPURenderer.js

@@ -0,0 +1,596 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+const constants = require("./constants.js");
+const WebGPUObjects = require("./WebGPUObjects.js");
+const WebGPUAttributes = require("./WebGPUAttributes.js");
+const WebGPUGeometries = require("./WebGPUGeometries.js");
+const WebGPUInfo = require("./WebGPUInfo.js");
+const WebGPUProperties = require("./WebGPUProperties.js");
+const WebGPURenderPipelines = require("./WebGPURenderPipelines.js");
+const WebGPUComputePipelines = require("./WebGPUComputePipelines.js");
+const WebGPUBindings = require("./WebGPUBindings.js");
+const WebGPURenderLists = require("./WebGPURenderLists.js");
+const WebGPUTextures = require("./WebGPUTextures.js");
+const WebGPUBackground = require("./WebGPUBackground.js");
+const WebGPUNodes = require("./nodes/WebGPUNodes.js");
+const THREE = require("three");
+console.info(
+  "THREE.WebGPURenderer: Modified Matrix4.makePerspective() and Matrix4.makeOrtographic() to work with WebGPU, see https://github.com/mrdoob/three.js/issues/20276."
+);
+THREE.Matrix4.prototype.makePerspective = function(left, right, top, bottom, near, far) {
+  const te = this.elements;
+  const x = 2 * near / (right - left);
+  const y = 2 * near / (top - bottom);
+  const a = (right + left) / (right - left);
+  const b = (top + bottom) / (top - bottom);
+  const c = -far / (far - near);
+  const d = -far * near / (far - near);
+  te[0] = x;
+  te[4] = 0;
+  te[8] = a;
+  te[12] = 0;
+  te[1] = 0;
+  te[5] = y;
+  te[9] = b;
+  te[13] = 0;
+  te[2] = 0;
+  te[6] = 0;
+  te[10] = c;
+  te[14] = d;
+  te[3] = 0;
+  te[7] = 0;
+  te[11] = -1;
+  te[15] = 0;
+  return this;
+};
+THREE.Matrix4.prototype.makeOrthographic = function(left, right, top, bottom, near, far) {
+  const te = this.elements;
+  const w = 1 / (right - left);
+  const h = 1 / (top - bottom);
+  const p = 1 / (far - near);
+  const x = (right + left) * w;
+  const y = (top + bottom) * h;
+  const z = near * p;
+  te[0] = 2 * w;
+  te[4] = 0;
+  te[8] = 0;
+  te[12] = -x;
+  te[1] = 0;
+  te[5] = 2 * h;
+  te[9] = 0;
+  te[13] = -y;
+  te[2] = 0;
+  te[6] = 0;
+  te[10] = -1 * p;
+  te[14] = -z;
+  te[3] = 0;
+  te[7] = 0;
+  te[11] = 0;
+  te[15] = 1;
+  return this;
+};
+const _frustum = new THREE.Frustum();
+const _projScreenMatrix = new THREE.Matrix4();
+const _vector3 = new THREE.Vector3();
+class WebGPURenderer {
+  constructor(parameters = {}) {
+    this.domElement = parameters.canvas !== void 0 ? parameters.canvas : this._createCanvasElement();
+    this.autoClear = true;
+    this.autoClearColor = true;
+    this.autoClearDepth = true;
+    this.autoClearStencil = true;
+    this.sortObjects = true;
+    this._parameters = Object.assign({}, parameters);
+    this._pixelRatio = 1;
+    this._width = this.domElement.width;
+    this._height = this.domElement.height;
+    this._viewport = null;
+    this._scissor = null;
+    this._adapter = null;
+    this._device = null;
+    this._context = null;
+    this._swapChain = null;
+    this._colorBuffer = null;
+    this._depthBuffer = null;
+    this._info = null;
+    this._properties = null;
+    this._attributes = null;
+    this._geometries = null;
+    this._nodes = null;
+    this._bindings = null;
+    this._objects = null;
+    this._renderPipelines = null;
+    this._computePipelines = null;
+    this._renderLists = null;
+    this._textures = null;
+    this._background = null;
+    this._renderPassDescriptor = null;
+    this._currentRenderList = null;
+    this._opaqueSort = null;
+    this._transparentSort = null;
+    this._clearAlpha = 1;
+    this._clearColor = new THREE.Color(0);
+    this._clearDepth = 1;
+    this._clearStencil = 0;
+    this._renderTarget = null;
+    this._parameters.antialias = parameters.antialias === true;
+    if (this._parameters.antialias === true) {
+      this._parameters.sampleCount = parameters.sampleCount === void 0 ? 4 : parameters.sampleCount;
+    } else {
+      this._parameters.sampleCount = 1;
+    }
+    this._parameters.extensions = parameters.extensions === void 0 ? [] : parameters.extensions;
+    this._parameters.limits = parameters.limits === void 0 ? {} : parameters.limits;
+  }
+  async init() {
+    const parameters = this._parameters;
+    const adapterOptions = {
+      powerPreference: parameters.powerPreference
+    };
+    const adapter = await navigator.gpu.requestAdapter(adapterOptions);
+    const deviceDescriptor = {
+      extensions: parameters.extensions,
+      limits: parameters.limits
+    };
+    const device = await adapter.requestDevice(deviceDescriptor);
+    const glslang = await import("@webgpu/glslang/dist/web-devel/glslang.js");
+    const compiler = await glslang();
+    const context = parameters.context !== void 0 ? parameters.context : this.domElement.getContext("gpupresent");
+    const swapChain = context.configureSwapChain({
+      device,
+      format: constants.GPUTextureFormat.BRGA8Unorm
+      // this is the only valid swap chain format right now (r121)
+    });
+    this._adapter = adapter;
+    this._device = device;
+    this._context = context;
+    this._swapChain = swapChain;
+    this._info = new WebGPUInfo();
+    this._properties = new WebGPUProperties();
+    this._attributes = new WebGPUAttributes(device);
+    this._geometries = new WebGPUGeometries(this._attributes, this._info);
+    this._textures = new WebGPUTextures(device, this._properties, this._info, compiler);
+    this._objects = new WebGPUObjects(this._geometries, this._info);
+    this._nodes = new WebGPUNodes(this);
+    this._renderPipelines = new WebGPURenderPipelines(
+      this,
+      this._properties,
+      device,
+      compiler,
+      parameters.sampleCount,
+      this._nodes
+    );
+    this._computePipelines = new WebGPUComputePipelines(device, compiler);
+    this._bindings = new WebGPUBindings(
+      device,
+      this._info,
+      this._properties,
+      this._textures,
+      this._renderPipelines,
+      this._computePipelines,
+      this._attributes,
+      this._nodes
+    );
+    this._renderLists = new WebGPURenderLists();
+    this._background = new WebGPUBackground(this);
+    this._renderPassDescriptor = {
+      colorAttachments: [
+        {
+          attachment: null
+        }
+      ],
+      depthStencilAttachment: {
+        attachment: null,
+        depthStoreOp: constants.GPUStoreOp.Store,
+        stencilStoreOp: constants.GPUStoreOp.Store
+      }
+    };
+    this._setupColorBuffer();
+    this._setupDepthBuffer();
+  }
+  render(scene, camera) {
+    this._nodes.updateFrame();
+    if (scene.autoUpdate === true)
+      scene.updateMatrixWorld();
+    if (camera.parent === null)
+      camera.updateMatrixWorld();
+    if (this._info.autoReset === true)
+      this._info.reset();
+    _projScreenMatrix.multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse);
+    _frustum.setFromProjectionMatrix(_projScreenMatrix);
+    this._currentRenderList = this._renderLists.get(scene, camera);
+    this._currentRenderList.init();
+    this._projectObject(scene, camera, 0);
+    this._currentRenderList.finish();
+    if (this.sortObjects === true) {
+      this._currentRenderList.sort(this._opaqueSort, this._transparentSort);
+    }
+    const colorAttachment = this._renderPassDescriptor.colorAttachments[0];
+    const depthStencilAttachment = this._renderPassDescriptor.depthStencilAttachment;
+    const renderTarget = this._renderTarget;
+    if (renderTarget !== null) {
+      const renderTargetProperties = this._properties.get(renderTarget);
+      colorAttachment.attachment = renderTargetProperties.colorTextureGPU.createView();
+      depthStencilAttachment.attachment = renderTargetProperties.depthTextureGPU.createView();
+    } else {
+      if (this._parameters.antialias === true) {
+        colorAttachment.attachment = this._colorBuffer.createView();
+        colorAttachment.resolveTarget = this._swapChain.getCurrentTexture().createView();
+      } else {
+        colorAttachment.attachment = this._swapChain.getCurrentTexture().createView();
+        colorAttachment.resolveTarget = void 0;
+      }
+      depthStencilAttachment.attachment = this._depthBuffer.createView();
+    }
+    this._background.update(scene);
+    const device = this._device;
+    const cmdEncoder = device.createCommandEncoder({});
+    const passEncoder = cmdEncoder.beginRenderPass(this._renderPassDescriptor);
+    const vp = this._viewport;
+    if (vp !== null) {
+      const width = Math.floor(vp.width * this._pixelRatio);
+      const height = Math.floor(vp.height * this._pixelRatio);
+      passEncoder.setViewport(vp.x, vp.y, width, height, vp.minDepth, vp.maxDepth);
+    }
+    const sc = this._scissor;
+    if (sc !== null) {
+      const width = Math.floor(sc.width * this._pixelRatio);
+      const height = Math.floor(sc.height * this._pixelRatio);
+      passEncoder.setScissorRect(sc.x, sc.y, width, height);
+    }
+    const opaqueObjects = this._currentRenderList.opaque;
+    const transparentObjects = this._currentRenderList.transparent;
+    if (opaqueObjects.length > 0)
+      this._renderObjects(opaqueObjects, camera, passEncoder);
+    if (transparentObjects.length > 0)
+      this._renderObjects(transparentObjects, camera, passEncoder);
+    passEncoder.endPass();
+    device.queue.submit([cmdEncoder.finish()]);
+  }
+  getContext() {
+    return this._context;
+  }
+  getPixelRatio() {
+    return this._pixelRatio;
+  }
+  getDrawingBufferSize(target) {
+    return target.set(this._width * this._pixelRatio, this._height * this._pixelRatio).floor();
+  }
+  getSize(target) {
+    return target.set(this._width, this._height);
+  }
+  setPixelRatio(value = 1) {
+    this._pixelRatio = value;
+    this.setSize(this._width, this._height, false);
+  }
+  setDrawingBufferSize(width, height, pixelRatio) {
+    this._width = width;
+    this._height = height;
+    this._pixelRatio = pixelRatio;
+    this.domElement.width = Math.floor(width * pixelRatio);
+    this.domElement.height = Math.floor(height * pixelRatio);
+    this._setupColorBuffer();
+    this._setupDepthBuffer();
+  }
+  setSize(width, height, updateStyle = true) {
+    this._width = width;
+    this._height = height;
+    this.domElement.width = Math.floor(width * this._pixelRatio);
+    this.domElement.height = Math.floor(height * this._pixelRatio);
+    if (updateStyle === true) {
+      this.domElement.style.width = width + "px";
+      this.domElement.style.height = height + "px";
+    }
+    this._setupColorBuffer();
+    this._setupDepthBuffer();
+  }
+  setOpaqueSort(method) {
+    this._opaqueSort = method;
+  }
+  setTransparentSort(method) {
+    this._transparentSort = method;
+  }
+  getScissor(target) {
+    const scissor = this._scissor;
+    target.x = scissor.x;
+    target.y = scissor.y;
+    target.width = scissor.width;
+    target.height = scissor.height;
+    return target;
+  }
+  setScissor(x, y, width, height) {
+    if (x === null) {
+      this._scissor = null;
+    } else {
+      this._scissor = {
+        x,
+        y,
+        width,
+        height
+      };
+    }
+  }
+  getViewport(target) {
+    const viewport = this._viewport;
+    target.x = viewport.x;
+    target.y = viewport.y;
+    target.width = viewport.width;
+    target.height = viewport.height;
+    target.minDepth = viewport.minDepth;
+    target.maxDepth = viewport.maxDepth;
+    return target;
+  }
+  setViewport(x, y, width, height, minDepth = 0, maxDepth = 1) {
+    if (x === null) {
+      this._viewport = null;
+    } else {
+      this._viewport = {
+        x,
+        y,
+        width,
+        height,
+        minDepth,
+        maxDepth
+      };
+    }
+  }
+  getClearColor(target) {
+    return target.copy(this._clearColor);
+  }
+  setClearColor(color, alpha = 1) {
+    this._clearColor.set(color);
+    this._clearAlpha = alpha;
+  }
+  getClearAlpha() {
+    return this._clearAlpha;
+  }
+  setClearAlpha(alpha) {
+    this._clearAlpha = alpha;
+  }
+  getClearDepth() {
+    return this._clearDepth;
+  }
+  setClearDepth(depth) {
+    this._clearDepth = depth;
+  }
+  getClearStencil() {
+    return this._clearStencil;
+  }
+  setClearStencil(stencil) {
+    this._clearStencil = stencil;
+  }
+  clear() {
+    this._background.clear();
+  }
+  dispose() {
+    this._objects.dispose();
+    this._properties.dispose();
+    this._renderPipelines.dispose();
+    this._computePipelines.dispose();
+    this._nodes.dispose();
+    this._bindings.dispose();
+    this._info.dispose();
+    this._renderLists.dispose();
+    this._textures.dispose();
+  }
+  setRenderTarget(renderTarget) {
+    this._renderTarget = renderTarget;
+    if (renderTarget !== null) {
+      this._textures.initRenderTarget(renderTarget);
+    }
+  }
+  compute(computeParams) {
+    const device = this._device;
+    const cmdEncoder = device.createCommandEncoder({});
+    const passEncoder = cmdEncoder.beginComputePass();
+    for (let param of computeParams) {
+      const pipeline = this._computePipelines.get(param);
+      passEncoder.setPipeline(pipeline);
+      const bindGroup = this._bindings.getForCompute(param).group;
+      this._bindings.update(param);
+      passEncoder.setBindGroup(0, bindGroup);
+      passEncoder.dispatch(param.num);
+    }
+    passEncoder.endPass();
+    device.queue.submit([cmdEncoder.finish()]);
+  }
+  getRenderTarget() {
+    return this._renderTarget;
+  }
+  _projectObject(object, camera, groupOrder) {
+    const info = this._info;
+    const currentRenderList = this._currentRenderList;
+    if (object.visible === false)
+      return;
+    const visible = object.layers.test(camera.layers);
+    if (visible) {
+      if (object.isGroup) {
+        groupOrder = object.renderOrder;
+      } else if (object.isLOD) {
+        if (object.autoUpdate === true)
+          object.update(camera);
+      } else if (object.isLight) {
+        if (object.castShadow) {
+        }
+      } else if (object.isSprite) {
+        if (!object.frustumCulled || _frustum.intersectsSprite(object)) {
+          if (this.sortObjects === true) {
+            _vector3.setFromMatrixPosition(object.matrixWorld).applyMatrix4(_projScreenMatrix);
+          }
+          const geometry = object.geometry;
+          const material = object.material;
+          if (material.visible) {
+            currentRenderList.push(object, geometry, material, groupOrder, _vector3.z, null);
+          }
+        }
+      } else if (object.isLineLoop) {
+        console.error(
+          "THREE.WebGPURenderer: Objects of type THREE.LineLoop are not supported. Please use THREE.Line or THREE.LineSegments."
+        );
+      } else if (object.isMesh || object.isLine || object.isPoints) {
+        if (object.isSkinnedMesh) {
+          if (object.skeleton.frame !== info.render.frame) {
+            object.skeleton.update();
+            object.skeleton.frame = info.render.frame;
+          }
+        }
+        if (!object.frustumCulled || _frustum.intersectsObject(object)) {
+          if (this.sortObjects === true) {
+            _vector3.setFromMatrixPosition(object.matrixWorld).applyMatrix4(_projScreenMatrix);
+          }
+          const geometry = object.geometry;
+          const material = object.material;
+          if (Array.isArray(material)) {
+            const groups = geometry.groups;
+            for (let i = 0, l = groups.length; i < l; i++) {
+              const group = groups[i];
+              const groupMaterial = material[group.materialIndex];
+              if (groupMaterial && groupMaterial.visible) {
+                currentRenderList.push(object, geometry, groupMaterial, groupOrder, _vector3.z, group);
+              }
+            }
+          } else if (material.visible) {
+            currentRenderList.push(object, geometry, material, groupOrder, _vector3.z, null);
+          }
+        }
+      }
+    }
+    const children = object.children;
+    for (let i = 0, l = children.length; i < l; i++) {
+      this._projectObject(children[i], camera, groupOrder);
+    }
+  }
+  _renderObjects(renderList, camera, passEncoder) {
+    for (let i = 0, il = renderList.length; i < il; i++) {
+      const renderItem = renderList[i];
+      const object = renderItem.object;
+      object.modelViewMatrix.multiplyMatrices(camera.matrixWorldInverse, object.matrixWorld);
+      object.normalMatrix.getNormalMatrix(object.modelViewMatrix);
+      this._objects.update(object);
+      if (camera.isArrayCamera) {
+        const cameras = camera.cameras;
+        for (let j = 0, jl = cameras.length; j < jl; j++) {
+          const camera2 = cameras[j];
+          if (object.layers.test(camera2.layers)) {
+            const vp = camera2.viewport;
+            const minDepth = vp.minDepth === void 0 ? 0 : vp.minDepth;
+            const maxDepth = vp.maxDepth === void 0 ? 1 : vp.maxDepth;
+            passEncoder.setViewport(vp.x, vp.y, vp.width, vp.height, minDepth, maxDepth);
+            this._nodes.update(object, camera2);
+            this._bindings.update(object, camera2);
+            this._renderObject(object, passEncoder);
+          }
+        }
+      } else {
+        this._nodes.update(object, camera);
+        this._bindings.update(object, camera);
+        this._renderObject(object, passEncoder);
+      }
+    }
+  }
+  _renderObject(object, passEncoder) {
+    const info = this._info;
+    const pipeline = this._renderPipelines.get(object);
+    passEncoder.setPipeline(pipeline);
+    const bindGroup = this._bindings.get(object).group;
+    passEncoder.setBindGroup(0, bindGroup);
+    const geometry = object.geometry;
+    const index = geometry.index;
+    const hasIndex = index !== null;
+    if (hasIndex === true) {
+      this._setupIndexBuffer(index, passEncoder);
+    }
+    this._setupVertexBuffers(geometry.attributes, passEncoder, pipeline);
+    const drawRange = geometry.drawRange;
+    const firstVertex = drawRange.start;
+    const instanceCount = geometry.isInstancedBufferGeometry ? geometry.instanceCount : 1;
+    if (hasIndex === true) {
+      const indexCount = drawRange.count !== Infinity ? drawRange.count : index.count;
+      passEncoder.drawIndexed(indexCount, instanceCount, firstVertex, 0, 0);
+      info.update(object, indexCount, instanceCount);
+    } else {
+      const positionAttribute = geometry.attributes.position;
+      const vertexCount = drawRange.count !== Infinity ? drawRange.count : positionAttribute.count;
+      passEncoder.draw(vertexCount, instanceCount, firstVertex, 0);
+      info.update(object, vertexCount, instanceCount);
+    }
+  }
+  _setupIndexBuffer(index, encoder) {
+    const buffer = this._attributes.get(index).buffer;
+    const indexFormat = index.array instanceof Uint16Array ? constants.GPUIndexFormat.Uint16 : constants.GPUIndexFormat.Uint32;
+    encoder.setIndexBuffer(buffer, indexFormat);
+  }
+  _setupVertexBuffers(geometryAttributes, encoder, pipeline) {
+    const shaderAttributes = this._renderPipelines.getShaderAttributes(pipeline);
+    for (let shaderAttribute of shaderAttributes) {
+      const name = shaderAttribute.name;
+      const slot = shaderAttribute.slot;
+      const attribute = geometryAttributes[name];
+      if (attribute !== void 0) {
+        const buffer = this._attributes.get(attribute).buffer;
+        encoder.setVertexBuffer(slot, buffer);
+      }
+    }
+  }
+  _setupColorBuffer() {
+    const device = this._device;
+    if (device) {
+      if (this._colorBuffer)
+        this._colorBuffer.destroy();
+      this._colorBuffer = this._device.createTexture({
+        size: {
+          width: this._width * this._pixelRatio,
+          height: this._height * this._pixelRatio,
+          depthOrArrayLayers: 1
+        },
+        sampleCount: this._parameters.sampleCount,
+        format: constants.GPUTextureFormat.BRGA8Unorm,
+        usage: GPUTextureUsage.RENDER_ATTACHMENT
+      });
+    }
+  }
+  _setupDepthBuffer() {
+    const device = this._device;
+    if (device) {
+      if (this._depthBuffer)
+        this._depthBuffer.destroy();
+      this._depthBuffer = this._device.createTexture({
+        size: {
+          width: this._width * this._pixelRatio,
+          height: this._height * this._pixelRatio,
+          depthOrArrayLayers: 1
+        },
+        sampleCount: this._parameters.sampleCount,
+        format: constants.GPUTextureFormat.Depth24PlusStencil8,
+        usage: GPUTextureUsage.RENDER_ATTACHMENT
+      });
+    }
+  }
+  _createCanvasElement() {
+    const canvas = document.createElementNS("http://www.w3.org/1999/xhtml", "canvas");
+    canvas.style.display = "block";
+    return canvas;
+  }
+}
+module.exports = WebGPURenderer;