three-stdlib 2.15.1 → 2.16.0

package/renderers/webgpu/WebGPURenderer.js

@@ -1,51 +1,25 @@
-import { GPUTextureFormat, GPUStoreOp, GPUIndexFormat } from './constants.js';
-import WebGPUObjects from './WebGPUObjects.js';
-import WebGPUAttributes from './WebGPUAttributes.js';
-import WebGPUGeometries from './WebGPUGeometries.js';
-import WebGPUInfo from './WebGPUInfo.js';
-import WebGPUProperties from './WebGPUProperties.js';
-import WebGPURenderPipelines from './WebGPURenderPipelines.js';
-import WebGPUComputePipelines from './WebGPUComputePipelines.js';
-import WebGPUBindings from './WebGPUBindings.js';
-import WebGPURenderLists from './WebGPURenderLists.js';
-import WebGPUTextures from './WebGPUTextures.js';
-import WebGPUBackground from './WebGPUBackground.js';
-import WebGPUNodes from './nodes/WebGPUNodes.js';
-import glslang from '@webgpu/glslang/dist/web-devel/glslang';
-import { Matrix4, Frustum, Vector3, Color } from 'three';
-import './WebGPUTextureUtils.js';
-import './nodes/WebGPUNodeBuilder.js';
-import './nodes/WebGPUNodeUniformsGroup.js';
-import './WebGPUUniformsGroup.js';
-import './WebGPUBinding.js';
-import './nodes/WebGPUNodeUniform.js';
-import './WebGPUUniform.js';
-import './WebGPUSampler.js';
-import './WebGPUSampledTexture.js';
-import '../nodes/core/NodeSlot.js';
-import '../nodes/core/NodeBuilder.js';
-import '../nodes/core/NodeUniform.js';
-import '../nodes/core/NodeAttribute.js';
-import '../nodes/core/NodeVary.js';
-import '../nodes/core/constants.js';
-import '../nodes/accessors/ModelViewProjectionNode.js';
-import '../nodes/core/Node.js';
-import '../nodes/accessors/CameraNode.js';
-import '@babel/runtime/helpers/esm/defineProperty';
-import '../nodes/inputs/Vector3Node.js';
-import '../nodes/core/InputNode.js';
-import '../nodes/inputs/Matrix4Node.js';
-import '../nodes/accessors/ModelNode.js';
-import '../nodes/inputs/Matrix3Node.js';
-import '../nodes/math/OperatorNode.js';
-import '../nodes/accessors/PositionNode.js';
-import '../nodes/core/AttributeNode.js';
-import './nodes/ShaderLib.js';
-import '../nodes/core/NodeFrame.js';
-
-console.info('THREE.WebGPURenderer: Modified Matrix4.makePerspective() and Matrix4.makeOrtographic() to work with WebGPU, see https://github.com/mrdoob/three.js/issues/20276.');
-
-Matrix4.prototype.makePerspective = function (left, right, top, bottom, near, far) {
+"use strict";
+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 glslang = require("@webgpu/glslang/dist/web-devel/glslang");
+const THREE = require("three");
+const _interopDefaultLegacy = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
+const glslang__default = /* @__PURE__ */ _interopDefaultLegacy(glslang);
+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);
@@ -71,12 +45,11 @@ Matrix4.prototype.makePerspective = function (left, right, top, bottom, near, fa
   te[15] = 0;
   return this;
 };
-
-Matrix4.prototype.makeOrthographic = function (left, right, top, bottom, near, far) {
+THREE.Matrix4.prototype.makeOrthographic = function(left, right, top, bottom, near, far) {
   const te = this.elements;
-  const w = 1.0 / (right - left);
-  const h = 1.0 / (top - bottom);
-  const p = 1.0 / (far - near);
+  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;
@@ -98,23 +71,17 @@ Matrix4.prototype.makeOrthographic = function (left, right, top, bottom, near, f
   te[15] = 1;
   return this;
 };
-
-const _frustum = new Frustum();
-
-const _projScreenMatrix = new Matrix4();
-
-const _vector3 = new Vector3();
-
+const _frustum = new THREE.Frustum();
+const _projScreenMatrix = new THREE.Matrix4();
+const _vector3 = new THREE.Vector3();
 class WebGPURenderer {
   constructor(parameters = {}) {
-    // public
-    this.domElement = parameters.canvas !== undefined ? parameters.canvas : this._createCanvasElement();
+    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; // internals
-
+    this.sortObjects = true;
     this._parameters = Object.assign({}, parameters);
     this._pixelRatio = 1;
     this._width = this.domElement.width;
@@ -144,23 +111,19 @@ class WebGPURenderer {
     this._opaqueSort = null;
     this._transparentSort = null;
     this._clearAlpha = 1;
-    this._clearColor = new Color(0x000000);
+    this._clearColor = new THREE.Color(0);
     this._clearDepth = 1;
     this._clearStencil = 0;
-    this._renderTarget = null; // some parameters require default values other than "undefined"
-
+    this._renderTarget = null;
     this._parameters.antialias = parameters.antialias === true;
-
     if (this._parameters.antialias === true) {
-      this._parameters.sampleCount = parameters.sampleCount === undefined ? 4 : parameters.sampleCount;
+      this._parameters.sampleCount = parameters.sampleCount === void 0 ? 4 : parameters.sampleCount;
     } else {
       this._parameters.sampleCount = 1;
     }
-
-    this._parameters.extensions = parameters.extensions === undefined ? [] : parameters.extensions;
-    this._parameters.limits = parameters.limits === undefined ? {} : parameters.limits;
+    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 = {
@@ -172,12 +135,11 @@ class WebGPURenderer {
       limits: parameters.limits
     };
     const device = await adapter.requestDevice(deviceDescriptor);
-    const compiler = await glslang();
-    const context = parameters.context !== undefined ? parameters.context : this.domElement.getContext('gpupresent');
+    const compiler = await glslang__default.default();
+    const context = parameters.context !== void 0 ? parameters.context : this.domElement.getContext("gpupresent");
     const swapChain = context.configureSwapChain({
-      device: device,
-      format: GPUTextureFormat.BRGA8Unorm // this is the only valid swap chain format right now (r121)
-
+      device,
+      format: constants.GPUTextureFormat.BRGA8Unorm
     });
     this._adapter = adapter;
     this._device = device;
@@ -190,62 +152,64 @@ class WebGPURenderer {
     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._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._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._background = new WebGPUBackground(this);
     this._renderPassDescriptor = {
-      colorAttachments: [{
-        attachment: null
-      }],
+      colorAttachments: [
+        {
+          attachment: null
+        }
+      ],
       depthStencilAttachment: {
         attachment: null,
-        depthStoreOp: GPUStoreOp.Store,
-        stencilStoreOp: GPUStoreOp.Store
+        depthStoreOp: constants.GPUStoreOp.Store,
+        stencilStoreOp: constants.GPUStoreOp.Store
       }
     };
-
     this._setupColorBuffer();
-
     this._setupDepthBuffer();
   }
-
   render(scene, camera) {
-    // @TODO: move this to animation loop
-    this._nodes.updateFrame(); //
-
-
-    if (scene.autoUpdate === true) scene.updateMatrixWorld();
-    if (camera.parent === null) camera.updateMatrixWorld();
-    if (this._info.autoReset === true) this._info.reset();
-
+    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);
-    } // prepare render pass descriptor
-
-
+    }
     const colorAttachment = this._renderPassDescriptor.colorAttachments[0];
     const depthStencilAttachment = this._renderPassDescriptor.depthStencilAttachment;
     const renderTarget = this._renderTarget;
-
     if (renderTarget !== null) {
-      // @TODO: Support RenderTarget with antialiasing.
       const renderTargetProperties = this._properties.get(renderTarget);
-
       colorAttachment.attachment = renderTargetProperties.colorTextureGPU.createView();
       depthStencilAttachment.attachment = renderTargetProperties.depthTextureGPU.createView();
     } else {
@@ -254,103 +218,78 @@ class WebGPURenderer {
         colorAttachment.resolveTarget = this._swapChain.getCurrentTexture().createView();
       } else {
         colorAttachment.attachment = this._swapChain.getCurrentTexture().createView();
-        colorAttachment.resolveTarget = undefined;
+        colorAttachment.resolveTarget = void 0;
       }
-
       depthStencilAttachment.attachment = this._depthBuffer.createView();
-    } //
-
-
-    this._background.update(scene); // start render pass
-
-
+    }
+    this._background.update(scene);
     const device = this._device;
     const cmdEncoder = device.createCommandEncoder({});
-    const passEncoder = cmdEncoder.beginRenderPass(this._renderPassDescriptor); // global rasterization settings for all renderable objects
-
+    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);
-    } // process render lists
-
-
+    }
     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); // finish render pass
-
+    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.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;
@@ -359,20 +298,18 @@ class WebGPURenderer {
     target.height = scissor.height;
     return target;
   }
-
   setScissor(x, y, width, height) {
     if (x === null) {
       this._scissor = null;
     } else {
       this._scissor = {
-        x: x,
-        y: y,
-        width: width,
-        height: height
+        x,
+        y,
+        width,
+        height
       };
     }
   }
-
   getViewport(target) {
     const viewport = this._viewport;
     target.x = viewport.x;
@@ -383,168 +320,131 @@ class WebGPURenderer {
     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: x,
-        y: y,
-        width: width,
-        height: height,
-        minDepth: minDepth,
-        maxDepth: maxDepth
+        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) {
-      // pipeline
       const pipeline = this._computePipelines.get(param);
-
-      passEncoder.setPipeline(pipeline); // bind group
-
+      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;
+    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);
+        if (object.autoUpdate === true)
+          object.update(camera);
       } else if (object.isLight) {
-        //currentRenderState.pushLight( object );
-        if (object.castShadow) ;
+        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.');
+        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) {
-          // update skeleton only once in a frame
           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);
               }
@@ -555,82 +455,55 @@ class WebGPURenderer {
         }
       }
     }
-
     const children = object.children;
-
     for (let i = 0, l = children.length; i < l; i++) {
       this._projectObject(children[i], camera, groupOrder);
     }
   }
-
   _renderObjects(renderList, camera, passEncoder) {
-    // process renderable objects
     for (let i = 0, il = renderList.length; i < il; i++) {
-      const renderItem = renderList[i]; // @TODO: Add support for multiple materials per object. This will require to extract
-      // the material from the renderItem object and pass it with its group data to _renderObject().
-
+      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 === undefined ? 0 : vp.minDepth;
-            const maxDepth = vp.maxDepth === undefined ? 1 : vp.maxDepth;
+            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; // pipeline
-
+    const info = this._info;
     const pipeline = this._renderPipelines.get(object);
-
-    passEncoder.setPipeline(pipeline); // bind group
-
+    passEncoder.setPipeline(pipeline);
     const bindGroup = this._bindings.get(object).group;
-
-    passEncoder.setBindGroup(0, bindGroup); // index
-
+    passEncoder.setBindGroup(0, bindGroup);
     const geometry = object.geometry;
     const index = geometry.index;
     const hasIndex = index !== null;
-
     if (hasIndex === true) {
       this._setupIndexBuffer(index, passEncoder);
-    } // vertex buffers
-
-
-    this._setupVertexBuffers(geometry.attributes, passEncoder, pipeline); // draw
-
-
+    }
+    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);
@@ -642,35 +515,28 @@ class WebGPURenderer {
       info.update(object, vertexCount, instanceCount);
     }
   }
-
   _setupIndexBuffer(index, encoder) {
     const buffer = this._attributes.get(index).buffer;
-
-    const indexFormat = index.array instanceof Uint16Array ? GPUIndexFormat.Uint16 : GPUIndexFormat.Uint32;
+    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 !== undefined) {
+      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();
+      if (this._colorBuffer)
+        this._colorBuffer.destroy();
       this._colorBuffer = this._device.createTexture({
         size: {
           width: this._width * this._pixelRatio,
@@ -678,17 +544,16 @@ class WebGPURenderer {
           depthOrArrayLayers: 1
         },
         sampleCount: this._parameters.sampleCount,
-        format: GPUTextureFormat.BRGA8Unorm,
+        format: constants.GPUTextureFormat.BRGA8Unorm,
         usage: GPUTextureUsage.RENDER_ATTACHMENT
       });
     }
   }
-
   _setupDepthBuffer() {
     const device = this._device;
-
     if (device) {
-      if (this._depthBuffer) this._depthBuffer.destroy();
+      if (this._depthBuffer)
+        this._depthBuffer.destroy();
       this._depthBuffer = this._device.createTexture({
         size: {
           width: this._width * this._pixelRatio,
@@ -696,18 +561,15 @@ class WebGPURenderer {
           depthOrArrayLayers: 1
         },
         sampleCount: this._parameters.sampleCount,
-        format: GPUTextureFormat.Depth24PlusStencil8,
+        format: constants.GPUTextureFormat.Depth24PlusStencil8,
         usage: GPUTextureUsage.RENDER_ATTACHMENT
       });
     }
   }
-
   _createCanvasElement() {
-    const canvas = document.createElementNS('http://www.w3.org/1999/xhtml', 'canvas');
-    canvas.style.display = 'block';
+    const canvas = document.createElementNS("http://www.w3.org/1999/xhtml", "canvas");
+    canvas.style.display = "block";
     return canvas;
   }
-
 }
-
-export default WebGPURenderer;
+module.exports = WebGPURenderer;