three-stdlib 2.16.0 → 2.16.2

package/renderers/webgpu/WebGPURenderPipelines.js

@@ -1,6 +1,6 @@
-"use strict";
-const constants = require("./constants.js");
-const THREE = require("three");
+import { GPUInputStepMode, OneMinusBlendColorFactor, BlendColorFactor, GPUColorWriteFlags, GPUPrimitiveTopology, GPUStencilOperation, GPUVertexFormat, GPUIndexFormat, GPUBlendFactor, GPUBlendOperation, GPUTextureFormat, GPUCompareFunction, GPUFrontFace, GPUCullMode } from './constants.js';
+import { NoBlending, CustomBlending, MultiplyBlending, SubtractiveBlending, AdditiveBlending, NormalBlending, SrcAlphaSaturateFactor, OneMinusDstAlphaFactor, DstAlphaFactor, OneMinusDstColorFactor, DstColorFactor, OneMinusSrcAlphaFactor, SrcAlphaFactor, OneMinusSrcColorFactor, SrcColorFactor, OneFactor, ZeroFactor, MaxEquation, MinEquation, ReverseSubtractEquation, SubtractEquation, AddEquation, NotEqualDepth, GreaterDepth, GreaterEqualDepth, EqualDepth, LessEqualDepth, LessDepth, AlwaysDepth, NeverDepth, DoubleSide, BackSide, FrontSide, NotEqualStencilFunc, GreaterStencilFunc, GreaterEqualStencilFunc, EqualStencilFunc, LessEqualStencilFunc, LessStencilFunc, AlwaysStencilFunc, NeverStencilFunc, DecrementWrapStencilOp, IncrementWrapStencilOp, DecrementStencilOp, IncrementStencilOp, InvertStencilOp, ReplaceStencilOp, ZeroStencilOp, KeepStencilOp } from 'three';
+
 class WebGPURenderPipelines {
   constructor(renderer, properties, device, glslang, sampleCount, nodes) {
     this.renderer = renderer;
@@ -9,76 +9,115 @@ class WebGPURenderPipelines {
     this.glslang = glslang;
     this.sampleCount = sampleCount;
     this.nodes = nodes;
-    this.pipelines = /* @__PURE__ */ new WeakMap();
-    this.shaderAttributes = /* @__PURE__ */ new WeakMap();
+    this.pipelines = new WeakMap();
+    this.shaderAttributes = new WeakMap();
     this.shaderModules = {
-      vertex: /* @__PURE__ */ new Map(),
-      fragment: /* @__PURE__ */ new Map()
+      vertex: new Map(),
+      fragment: new Map()
     };
   }
+
   get(object) {
+    // @TODO: Avoid a 1:1 relationship between pipelines and objects. It's necessary
+    // to check various conditions in order to request an appropriate pipeline.
+    //
+    // - material's version and node configuration
+    // - environment map (material)
+    // - fog and environment (scene)
+    // - output encoding (renderer)
+    // - light state
+    // - clipping planes
+    //
+    // The renderer needs to manage multiple pipelines per object so
+    // GPUDevice.createRenderPipeline() is only called when no pipeline exists for the
+    // current configuration.
     let pipeline = this.pipelines.get(object);
-    if (pipeline === void 0) {
+
+    if (pipeline === undefined) {
       const device = this.device;
       const properties = this.properties;
-      const material = object.material;
-      const nodeBuilder = this.nodes.get(material);
+      const material = object.material; // get shader
+
+      const nodeBuilder = this.nodes.get(material); // shader modules
+
       const glslang = this.glslang;
       let moduleVertex = this.shaderModules.vertex.get(nodeBuilder.vertexShader);
-      if (moduleVertex === void 0) {
-        const byteCodeVertex = glslang.compileGLSL(nodeBuilder.vertexShader, "vertex");
+
+      if (moduleVertex === undefined) {
+        const byteCodeVertex = glslang.compileGLSL(nodeBuilder.vertexShader, 'vertex');
         moduleVertex = {
-          module: device.createShaderModule({ code: byteCodeVertex }),
-          entryPoint: "main"
+          module: device.createShaderModule({
+            code: byteCodeVertex
+          }),
+          entryPoint: 'main'
         };
         this.shaderModules.vertex.set(nodeBuilder.vertexShader, moduleVertex);
       }
+
       let moduleFragment = this.shaderModules.fragment.get(nodeBuilder.fragmentShader);
-      if (moduleFragment === void 0) {
-        const byteCodeFragment = glslang.compileGLSL(nodeBuilder.fragmentShader, "fragment");
+
+      if (moduleFragment === undefined) {
+        const byteCodeFragment = glslang.compileGLSL(nodeBuilder.fragmentShader, 'fragment');
         moduleFragment = {
-          module: device.createShaderModule({ code: byteCodeFragment }),
-          entryPoint: "main"
+          module: device.createShaderModule({
+            code: byteCodeFragment
+          }),
+          entryPoint: 'main'
         };
         this.shaderModules.fragment.set(nodeBuilder.fragmentShader, moduleFragment);
-      }
+      } // dispose material
+
+
       const materialProperties = properties.get(material);
-      if (materialProperties.disposeCallback === void 0) {
+
+      if (materialProperties.disposeCallback === undefined) {
         const disposeCallback = onMaterialDispose.bind(this);
         materialProperties.disposeCallback = disposeCallback;
-        material.addEventListener("dispose", disposeCallback);
-      }
-      const shaderAttributes = this._parseShaderAttributes(nodeBuilder.vertexShader);
+        material.addEventListener('dispose', disposeCallback);
+      } // determine shader attributes
+
+
+      const shaderAttributes = this._parseShaderAttributes(nodeBuilder.vertexShader); // vertex buffers
+
+
       const vertexBuffers = [];
       const geometry = object.geometry;
+
       for (let attribute of shaderAttributes) {
         const name = attribute.name;
         const geometryAttribute = geometry.getAttribute(name);
-        const stepMode = geometryAttribute !== void 0 && geometryAttribute.isInstancedBufferAttribute ? constants.GPUInputStepMode.Instance : constants.GPUInputStepMode.Vertex;
+        const stepMode = geometryAttribute !== undefined && geometryAttribute.isInstancedBufferAttribute ? GPUInputStepMode.Instance : GPUInputStepMode.Vertex;
         vertexBuffers.push({
           arrayStride: attribute.arrayStride,
-          attributes: [
-            {
-              shaderLocation: attribute.slot,
-              offset: 0,
-              format: attribute.format
-            }
-          ],
-          stepMode
+          attributes: [{
+            shaderLocation: attribute.slot,
+            offset: 0,
+            format: attribute.format
+          }],
+          stepMode: stepMode
         });
-      }
+      } //
+
+
       let indexFormat;
+
       if (object.isLine) {
         const count = geometry.index ? geometry.index.count : geometry.attributes.position.count;
-        indexFormat = count > 65535 ? constants.GPUIndexFormat.Uint32 : constants.GPUIndexFormat.Uint16;
-      }
+        indexFormat = count > 65535 ? GPUIndexFormat.Uint32 : GPUIndexFormat.Uint16; // define data type for primitive restart value
+      } //
+
+
       let alphaBlend = {};
       let colorBlend = {};
-      if (material.transparent === true && material.blending !== THREE.NoBlending) {
+
+      if (material.transparent === true && material.blending !== NoBlending) {
         alphaBlend = this._getAlphaBlend(material);
         colorBlend = this._getColorBlend(material);
-      }
+      } //
+
+
       let stencilFront = {};
+
       if (material.stencilWrite === true) {
         stencilFront = {
           compare: this._getStencilCompare(material),
@@ -86,122 +125,133 @@ class WebGPURenderPipelines {
           depthFailOp: this._getStencilOperation(material.stencilZFail),
           passOp: this._getStencilOperation(material.stencilZPass)
         };
-      }
+      } // pipeline
+
+
       const primitiveTopology = this._getPrimitiveTopology(object);
+
       const rasterizationState = this._getRasterizationStateDescriptor(material);
+
       const colorWriteMask = this._getColorWriteMask(material);
+
       const depthCompare = this._getDepthCompare(material);
+
       const colorFormat = this._getColorFormat(this.renderer);
+
       const depthStencilFormat = this._getDepthStencilFormat(this.renderer);
+
       pipeline = device.createRenderPipeline({
         vertexStage: moduleVertex,
         fragmentStage: moduleFragment,
-        primitiveTopology,
-        rasterizationState,
-        colorStates: [
-          {
-            format: colorFormat,
-            alphaBlend,
-            colorBlend,
-            writeMask: colorWriteMask
-          }
-        ],
+        primitiveTopology: primitiveTopology,
+        rasterizationState: rasterizationState,
+        colorStates: [{
+          format: colorFormat,
+          alphaBlend: alphaBlend,
+          colorBlend: colorBlend,
+          writeMask: colorWriteMask
+        }],
         depthStencilState: {
           format: depthStencilFormat,
           depthWriteEnabled: material.depthWrite,
-          depthCompare,
-          stencilFront,
+          depthCompare: depthCompare,
+          stencilFront: stencilFront,
           stencilBack: {},
+          // three.js does not provide an API to configure the back function (gl.stencilFuncSeparate() was never used)
           stencilReadMask: material.stencilFuncMask,
           stencilWriteMask: material.stencilWriteMask
         },
         vertexState: {
-          indexFormat,
-          vertexBuffers
+          indexFormat: indexFormat,
+          vertexBuffers: vertexBuffers
         },
         sampleCount: this.sampleCount
       });
       this.pipelines.set(object, pipeline);
       this.shaderAttributes.set(pipeline, shaderAttributes);
     }
+
     return pipeline;
   }
+
   getShaderAttributes(pipeline) {
     return this.shaderAttributes.get(pipeline);
   }
+
   dispose() {
-    this.pipelines = /* @__PURE__ */ new WeakMap();
-    this.shaderAttributes = /* @__PURE__ */ new WeakMap();
+    this.pipelines = new WeakMap();
+    this.shaderAttributes = new WeakMap();
     this.shaderModules = {
-      vertex: /* @__PURE__ */ new Map(),
-      fragment: /* @__PURE__ */ new Map()
+      vertex: new Map(),
+      fragment: new Map()
     };
   }
+
   _getArrayStride(type) {
-    if (type === "float")
-      return 4;
-    if (type === "vec2")
-      return 8;
-    if (type === "vec3")
-      return 12;
-    if (type === "vec4")
-      return 16;
-    if (type === "int")
-      return 4;
-    if (type === "ivec2")
-      return 8;
-    if (type === "ivec3")
-      return 12;
-    if (type === "ivec4")
-      return 16;
-    if (type === "uint")
-      return 4;
-    if (type === "uvec2")
-      return 8;
-    if (type === "uvec3")
-      return 12;
-    if (type === "uvec4")
-      return 16;
-    console.error("THREE.WebGPURenderer: Shader variable type not supported yet.", type);
+    // @TODO: This code is GLSL specific. We need to update when we switch to WGSL.
+    if (type === 'float') return 4;
+    if (type === 'vec2') return 8;
+    if (type === 'vec3') return 12;
+    if (type === 'vec4') return 16;
+    if (type === 'int') return 4;
+    if (type === 'ivec2') return 8;
+    if (type === 'ivec3') return 12;
+    if (type === 'ivec4') return 16;
+    if (type === 'uint') return 4;
+    if (type === 'uvec2') return 8;
+    if (type === 'uvec3') return 12;
+    if (type === 'uvec4') return 16;
+    console.error('THREE.WebGPURenderer: Shader variable type not supported yet.', type);
   }
+
   _getAlphaBlend(material) {
     const blending = material.blending;
     const premultipliedAlpha = material.premultipliedAlpha;
-    let alphaBlend = void 0;
+    let alphaBlend = undefined;
+
     switch (blending) {
-      case THREE.NormalBlending:
+      case NormalBlending:
         if (premultipliedAlpha === false) {
           alphaBlend = {
-            srcFactor: constants.GPUBlendFactor.One,
-            dstFactor: constants.GPUBlendFactor.OneMinusSrcAlpha,
-            operation: constants.GPUBlendOperation.Add
+            srcFactor: GPUBlendFactor.One,
+            dstFactor: GPUBlendFactor.OneMinusSrcAlpha,
+            operation: GPUBlendOperation.Add
           };
         }
+
         break;
-      case THREE.AdditiveBlending:
+
+      case AdditiveBlending:
+        // no alphaBlend settings
         break;
-      case THREE.SubtractiveBlending:
+
+      case SubtractiveBlending:
         if (premultipliedAlpha === true) {
           alphaBlend = {
-            srcFactor: constants.GPUBlendFactor.OneMinusSrcColor,
-            dstFactor: constants.GPUBlendFactor.OneMinusSrcAlpha,
-            operation: constants.GPUBlendOperation.Add
+            srcFactor: GPUBlendFactor.OneMinusSrcColor,
+            dstFactor: GPUBlendFactor.OneMinusSrcAlpha,
+            operation: GPUBlendOperation.Add
           };
         }
+
         break;
-      case THREE.MultiplyBlending:
+
+      case MultiplyBlending:
         if (premultipliedAlpha === true) {
           alphaBlend = {
-            srcFactor: constants.GPUBlendFactor.Zero,
-            dstFactor: constants.GPUBlendFactor.SrcAlpha,
-            operation: constants.GPUBlendOperation.Add
+            srcFactor: GPUBlendFactor.Zero,
+            dstFactor: GPUBlendFactor.SrcAlpha,
+            operation: GPUBlendOperation.Add
           };
         }
+
         break;
-      case THREE.CustomBlending:
+
+      case CustomBlending:
         const blendSrcAlpha = material.blendSrcAlpha;
         const blendDstAlpha = material.blendDstAlpha;
         const blendEquationAlpha = material.blendEquationAlpha;
+
         if (blendSrcAlpha !== null && blendDstAlpha !== null && blendEquationAlpha !== null) {
           alphaBlend = {
             srcFactor: this._getBlendFactor(blendSrcAlpha),
@@ -209,82 +259,110 @@ class WebGPURenderPipelines {
             operation: this._getBlendOperation(blendEquationAlpha)
           };
         }
+
         break;
+
       default:
-        console.error("THREE.WebGPURenderer: Blending not supported.", blending);
+        console.error('THREE.WebGPURenderer: Blending not supported.', blending);
     }
+
     return alphaBlend;
   }
+
   _getBlendFactor(blend) {
     let blendFactor;
+
     switch (blend) {
-      case THREE.ZeroFactor:
-        blendFactor = constants.GPUBlendFactor.Zero;
+      case ZeroFactor:
+        blendFactor = GPUBlendFactor.Zero;
         break;
-      case THREE.OneFactor:
-        blendFactor = constants.GPUBlendFactor.One;
+
+      case OneFactor:
+        blendFactor = GPUBlendFactor.One;
         break;
-      case THREE.SrcColorFactor:
-        blendFactor = constants.GPUBlendFactor.SrcColor;
+
+      case SrcColorFactor:
+        blendFactor = GPUBlendFactor.SrcColor;
         break;
-      case THREE.OneMinusSrcColorFactor:
-        blendFactor = constants.GPUBlendFactor.OneMinusSrcColor;
+
+      case OneMinusSrcColorFactor:
+        blendFactor = GPUBlendFactor.OneMinusSrcColor;
         break;
-      case THREE.SrcAlphaFactor:
-        blendFactor = constants.GPUBlendFactor.SrcAlpha;
+
+      case SrcAlphaFactor:
+        blendFactor = GPUBlendFactor.SrcAlpha;
         break;
-      case THREE.OneMinusSrcAlphaFactor:
-        blendFactor = constants.GPUBlendFactor.OneMinusSrcAlpha;
+
+      case OneMinusSrcAlphaFactor:
+        blendFactor = GPUBlendFactor.OneMinusSrcAlpha;
         break;
-      case THREE.DstColorFactor:
-        blendFactor = constants.GPUBlendFactor.DstColor;
+
+      case DstColorFactor:
+        blendFactor = GPUBlendFactor.DstColor;
         break;
-      case THREE.OneMinusDstColorFactor:
-        blendFactor = constants.GPUBlendFactor.OneMinusDstColor;
+
+      case OneMinusDstColorFactor:
+        blendFactor = GPUBlendFactor.OneMinusDstColor;
         break;
-      case THREE.DstAlphaFactor:
-        blendFactor = constants.GPUBlendFactor.DstAlpha;
+
+      case DstAlphaFactor:
+        blendFactor = GPUBlendFactor.DstAlpha;
         break;
-      case THREE.OneMinusDstAlphaFactor:
-        blendFactor = constants.GPUBlendFactor.OneMinusDstAlpha;
+
+      case OneMinusDstAlphaFactor:
+        blendFactor = GPUBlendFactor.OneMinusDstAlpha;
         break;
-      case THREE.SrcAlphaSaturateFactor:
-        blendFactor = constants.GPUBlendFactor.SrcAlphaSaturated;
+
+      case SrcAlphaSaturateFactor:
+        blendFactor = GPUBlendFactor.SrcAlphaSaturated;
         break;
-      case constants.BlendColorFactor:
-        blendFactor = constants.GPUBlendFactor.BlendColor;
+
+      case BlendColorFactor:
+        blendFactor = GPUBlendFactor.BlendColor;
         break;
-      case constants.OneMinusBlendColorFactor:
-        blendFactor = constants.GPUBlendFactor.OneMinusBlendColor;
+
+      case OneMinusBlendColorFactor:
+        blendFactor = GPUBlendFactor.OneMinusBlendColor;
         break;
+
       default:
-        console.error("THREE.WebGPURenderer: Blend factor not supported.", blend);
+        console.error('THREE.WebGPURenderer: Blend factor not supported.', blend);
     }
+
     return blendFactor;
   }
+
   _getBlendOperation(blendEquation) {
     let blendOperation;
+
     switch (blendEquation) {
-      case THREE.AddEquation:
-        blendOperation = constants.GPUBlendOperation.Add;
+      case AddEquation:
+        blendOperation = GPUBlendOperation.Add;
         break;
-      case THREE.SubtractEquation:
-        blendOperation = constants.GPUBlendOperation.Subtract;
+
+      case SubtractEquation:
+        blendOperation = GPUBlendOperation.Subtract;
         break;
-      case THREE.ReverseSubtractEquation:
-        blendOperation = constants.GPUBlendOperation.ReverseSubtract;
+
+      case ReverseSubtractEquation:
+        blendOperation = GPUBlendOperation.ReverseSubtract;
         break;
-      case THREE.MinEquation:
-        blendOperation = constants.GPUBlendOperation.Min;
+
+      case MinEquation:
+        blendOperation = GPUBlendOperation.Min;
         break;
-      case THREE.MaxEquation:
-        blendOperation = constants.GPUBlendOperation.Max;
+
+      case MaxEquation:
+        blendOperation = GPUBlendOperation.Max;
         break;
+
       default:
-        console.error("THREE.WebGPURenderer: Blend equation not supported.", blendEquation);
+        console.error('THREE.WebGPURenderer: Blend equation not supported.', blendEquation);
     }
+
     return blendOperation;
   }
+
   _getColorBlend(material) {
     const blending = material.blending;
     const premultipliedAlpha = material.premultipliedAlpha;
@@ -293,241 +371,289 @@ class WebGPURenderPipelines {
       dstFactor: null,
       operation: null
     };
+
     switch (blending) {
-      case THREE.NormalBlending:
-        colorBlend.srcFactor = premultipliedAlpha === true ? constants.GPUBlendFactor.One : constants.GPUBlendFactor.SrcAlpha;
-        colorBlend.dstFactor = constants.GPUBlendFactor.OneMinusSrcAlpha;
-        colorBlend.operation = constants.GPUBlendOperation.Add;
-        break;
-      case THREE.AdditiveBlending:
-        colorBlend.srcFactor = premultipliedAlpha === true ? constants.GPUBlendFactor.One : constants.GPUBlendFactor.SrcAlpha;
-        colorBlend.operation = constants.GPUBlendOperation.Add;
-        break;
-      case THREE.SubtractiveBlending:
-        colorBlend.srcFactor = constants.GPUBlendFactor.Zero;
-        colorBlend.dstFactor = premultipliedAlpha === true ? constants.GPUBlendFactor.Zero : constants.GPUBlendFactor.OneMinusSrcColor;
-        colorBlend.operation = constants.GPUBlendOperation.Add;
-        break;
-      case THREE.MultiplyBlending:
-        colorBlend.srcFactor = constants.GPUBlendFactor.Zero;
-        colorBlend.dstFactor = constants.GPUBlendFactor.SrcColor;
-        colorBlend.operation = constants.GPUBlendOperation.Add;
-        break;
-      case THREE.CustomBlending:
+      case NormalBlending:
+        colorBlend.srcFactor = premultipliedAlpha === true ? GPUBlendFactor.One : GPUBlendFactor.SrcAlpha;
+        colorBlend.dstFactor = GPUBlendFactor.OneMinusSrcAlpha;
+        colorBlend.operation = GPUBlendOperation.Add;
+        break;
+
+      case AdditiveBlending:
+        colorBlend.srcFactor = premultipliedAlpha === true ? GPUBlendFactor.One : GPUBlendFactor.SrcAlpha;
+        colorBlend.operation = GPUBlendOperation.Add;
+        break;
+
+      case SubtractiveBlending:
+        colorBlend.srcFactor = GPUBlendFactor.Zero;
+        colorBlend.dstFactor = premultipliedAlpha === true ? GPUBlendFactor.Zero : GPUBlendFactor.OneMinusSrcColor;
+        colorBlend.operation = GPUBlendOperation.Add;
+        break;
+
+      case MultiplyBlending:
+        colorBlend.srcFactor = GPUBlendFactor.Zero;
+        colorBlend.dstFactor = GPUBlendFactor.SrcColor;
+        colorBlend.operation = GPUBlendOperation.Add;
+        break;
+
+      case CustomBlending:
         colorBlend.srcFactor = this._getBlendFactor(material.blendSrc);
         colorBlend.dstFactor = this._getBlendFactor(material.blendDst);
         colorBlend.operation = this._getBlendOperation(material.blendEquation);
         break;
+
       default:
-        console.error("THREE.WebGPURenderer: Blending not supported.", blending);
+        console.error('THREE.WebGPURenderer: Blending not supported.', blending);
     }
+
     return colorBlend;
   }
+
   _getColorFormat(renderer) {
     let format;
     const renderTarget = renderer.getRenderTarget();
+
     if (renderTarget !== null) {
       const renderTargetProperties = this.properties.get(renderTarget);
       format = renderTargetProperties.colorTextureFormat;
     } else {
-      format = constants.GPUTextureFormat.BRGA8Unorm;
+      format = GPUTextureFormat.BRGA8Unorm; // default swap chain format
     }
+
     return format;
   }
+
   _getColorWriteMask(material) {
-    return material.colorWrite === true ? constants.GPUColorWriteFlags.All : constants.GPUColorWriteFlags.None;
+    return material.colorWrite === true ? GPUColorWriteFlags.All : GPUColorWriteFlags.None;
   }
+
   _getDepthCompare(material) {
     let depthCompare;
+
     if (material.depthTest === false) {
-      depthCompare = constants.GPUCompareFunction.Always;
+      depthCompare = GPUCompareFunction.Always;
     } else {
       const depthFunc = material.depthFunc;
+
       switch (depthFunc) {
-        case THREE.NeverDepth:
-          depthCompare = constants.GPUCompareFunction.Never;
+        case NeverDepth:
+          depthCompare = GPUCompareFunction.Never;
           break;
-        case THREE.AlwaysDepth:
-          depthCompare = constants.GPUCompareFunction.Always;
+
+        case AlwaysDepth:
+          depthCompare = GPUCompareFunction.Always;
           break;
-        case THREE.LessDepth:
-          depthCompare = constants.GPUCompareFunction.Less;
+
+        case LessDepth:
+          depthCompare = GPUCompareFunction.Less;
           break;
-        case THREE.LessEqualDepth:
-          depthCompare = constants.GPUCompareFunction.LessEqual;
+
+        case LessEqualDepth:
+          depthCompare = GPUCompareFunction.LessEqual;
           break;
-        case THREE.EqualDepth:
-          depthCompare = constants.GPUCompareFunction.Equal;
+
+        case EqualDepth:
+          depthCompare = GPUCompareFunction.Equal;
           break;
-        case THREE.GreaterEqualDepth:
-          depthCompare = constants.GPUCompareFunction.GreaterEqual;
+
+        case GreaterEqualDepth:
+          depthCompare = GPUCompareFunction.GreaterEqual;
           break;
-        case THREE.GreaterDepth:
-          depthCompare = constants.GPUCompareFunction.Greater;
+
+        case GreaterDepth:
+          depthCompare = GPUCompareFunction.Greater;
           break;
-        case THREE.NotEqualDepth:
-          depthCompare = constants.GPUCompareFunction.NotEqual;
+
+        case NotEqualDepth:
+          depthCompare = GPUCompareFunction.NotEqual;
           break;
+
         default:
-          console.error("THREE.WebGPURenderer: Invalid depth function.", depthFunc);
+          console.error('THREE.WebGPURenderer: Invalid depth function.', depthFunc);
       }
     }
+
     return depthCompare;
   }
+
   _getDepthStencilFormat(renderer) {
     let format;
     const renderTarget = renderer.getRenderTarget();
+
     if (renderTarget !== null) {
       const renderTargetProperties = this.properties.get(renderTarget);
       format = renderTargetProperties.depthTextureFormat;
     } else {
-      format = constants.GPUTextureFormat.Depth24PlusStencil8;
+      format = GPUTextureFormat.Depth24PlusStencil8;
     }
+
     return format;
   }
+
   _getPrimitiveTopology(object) {
-    if (object.isMesh)
-      return constants.GPUPrimitiveTopology.TriangleList;
-    else if (object.isPoints)
-      return constants.GPUPrimitiveTopology.PointList;
-    else if (object.isLine)
-      return constants.GPUPrimitiveTopology.LineStrip;
-    else if (object.isLineSegments)
-      return constants.GPUPrimitiveTopology.LineList;
+    if (object.isMesh) return GPUPrimitiveTopology.TriangleList;else if (object.isPoints) return GPUPrimitiveTopology.PointList;else if (object.isLine) return GPUPrimitiveTopology.LineStrip;else if (object.isLineSegments) return GPUPrimitiveTopology.LineList;
   }
+
   _getRasterizationStateDescriptor(material) {
     const descriptor = {};
+
     switch (material.side) {
-      case THREE.FrontSide:
-        descriptor.frontFace = constants.GPUFrontFace.CCW;
-        descriptor.cullMode = constants.GPUCullMode.Back;
+      case FrontSide:
+        descriptor.frontFace = GPUFrontFace.CCW;
+        descriptor.cullMode = GPUCullMode.Back;
         break;
-      case THREE.BackSide:
-        descriptor.frontFace = constants.GPUFrontFace.CW;
-        descriptor.cullMode = constants.GPUCullMode.Back;
+
+      case BackSide:
+        descriptor.frontFace = GPUFrontFace.CW;
+        descriptor.cullMode = GPUCullMode.Back;
         break;
-      case THREE.DoubleSide:
-        descriptor.frontFace = constants.GPUFrontFace.CCW;
-        descriptor.cullMode = constants.GPUCullMode.None;
+
+      case DoubleSide:
+        descriptor.frontFace = GPUFrontFace.CCW;
+        descriptor.cullMode = GPUCullMode.None;
         break;
+
       default:
-        console.error("THREE.WebGPURenderer: Unknown Material.side value.", material.side);
+        console.error('THREE.WebGPURenderer: Unknown Material.side value.', material.side);
         break;
     }
+
     return descriptor;
   }
+
   _getStencilCompare(material) {
     let stencilCompare;
     const stencilFunc = material.stencilFunc;
+
     switch (stencilFunc) {
-      case THREE.NeverStencilFunc:
-        stencilCompare = constants.GPUCompareFunction.Never;
+      case NeverStencilFunc:
+        stencilCompare = GPUCompareFunction.Never;
         break;
-      case THREE.AlwaysStencilFunc:
-        stencilCompare = constants.GPUCompareFunction.Always;
+
+      case AlwaysStencilFunc:
+        stencilCompare = GPUCompareFunction.Always;
         break;
-      case THREE.LessStencilFunc:
-        stencilCompare = constants.GPUCompareFunction.Less;
+
+      case LessStencilFunc:
+        stencilCompare = GPUCompareFunction.Less;
         break;
-      case THREE.LessEqualStencilFunc:
-        stencilCompare = constants.GPUCompareFunction.LessEqual;
+
+      case LessEqualStencilFunc:
+        stencilCompare = GPUCompareFunction.LessEqual;
         break;
-      case THREE.EqualStencilFunc:
-        stencilCompare = constants.GPUCompareFunction.Equal;
+
+      case EqualStencilFunc:
+        stencilCompare = GPUCompareFunction.Equal;
         break;
-      case THREE.GreaterEqualStencilFunc:
-        stencilCompare = constants.GPUCompareFunction.GreaterEqual;
+
+      case GreaterEqualStencilFunc:
+        stencilCompare = GPUCompareFunction.GreaterEqual;
         break;
-      case THREE.GreaterStencilFunc:
-        stencilCompare = constants.GPUCompareFunction.Greater;
+
+      case GreaterStencilFunc:
+        stencilCompare = GPUCompareFunction.Greater;
         break;
-      case THREE.NotEqualStencilFunc:
-        stencilCompare = constants.GPUCompareFunction.NotEqual;
+
+      case NotEqualStencilFunc:
+        stencilCompare = GPUCompareFunction.NotEqual;
         break;
+
       default:
-        console.error("THREE.WebGPURenderer: Invalid stencil function.", stencilFunc);
+        console.error('THREE.WebGPURenderer: Invalid stencil function.', stencilFunc);
     }
+
     return stencilCompare;
   }
+
   _getStencilOperation(op) {
     let stencilOperation;
+
     switch (op) {
-      case THREE.KeepStencilOp:
-        stencilOperation = constants.GPUStencilOperation.Keep;
+      case KeepStencilOp:
+        stencilOperation = GPUStencilOperation.Keep;
         break;
-      case THREE.ZeroStencilOp:
-        stencilOperation = constants.GPUStencilOperation.Zero;
+
+      case ZeroStencilOp:
+        stencilOperation = GPUStencilOperation.Zero;
         break;
-      case THREE.ReplaceStencilOp:
-        stencilOperation = constants.GPUStencilOperation.Replace;
+
+      case ReplaceStencilOp:
+        stencilOperation = GPUStencilOperation.Replace;
         break;
-      case THREE.InvertStencilOp:
-        stencilOperation = constants.GPUStencilOperation.Invert;
+
+      case InvertStencilOp:
+        stencilOperation = GPUStencilOperation.Invert;
         break;
-      case THREE.IncrementStencilOp:
-        stencilOperation = constants.GPUStencilOperation.IncrementClamp;
+
+      case IncrementStencilOp:
+        stencilOperation = GPUStencilOperation.IncrementClamp;
         break;
-      case THREE.DecrementStencilOp:
-        stencilOperation = constants.GPUStencilOperation.DecrementClamp;
+
+      case DecrementStencilOp:
+        stencilOperation = GPUStencilOperation.DecrementClamp;
         break;
-      case THREE.IncrementWrapStencilOp:
-        stencilOperation = constants.GPUStencilOperation.IncrementWrap;
+
+      case IncrementWrapStencilOp:
+        stencilOperation = GPUStencilOperation.IncrementWrap;
         break;
-      case THREE.DecrementWrapStencilOp:
-        stencilOperation = constants.GPUStencilOperation.DecrementWrap;
+
+      case DecrementWrapStencilOp:
+        stencilOperation = GPUStencilOperation.DecrementWrap;
         break;
+
       default:
-        console.error("THREE.WebGPURenderer: Invalid stencil operation.", stencilOperation);
+        console.error('THREE.WebGPURenderer: Invalid stencil operation.', stencilOperation);
     }
+
     return stencilOperation;
   }
+
   _getVertexFormat(type) {
-    if (type === "float")
-      return constants.GPUVertexFormat.Float;
-    if (type === "vec2")
-      return constants.GPUVertexFormat.Float2;
-    if (type === "vec3")
-      return constants.GPUVertexFormat.Float3;
-    if (type === "vec4")
-      return constants.GPUVertexFormat.Float4;
-    if (type === "int")
-      return constants.GPUVertexFormat.Int;
-    if (type === "ivec2")
-      return constants.GPUVertexFormat.Int2;
-    if (type === "ivec3")
-      return constants.GPUVertexFormat.Int3;
-    if (type === "ivec4")
-      return constants.GPUVertexFormat.Int4;
-    if (type === "uint")
-      return constants.GPUVertexFormat.UInt;
-    if (type === "uvec2")
-      return constants.GPUVertexFormat.UInt2;
-    if (type === "uvec3")
-      return constants.GPUVertexFormat.UInt3;
-    if (type === "uvec4")
-      return constants.GPUVertexFormat.UInt4;
-    console.error("THREE.WebGPURenderer: Shader variable type not supported yet.", type);
+    // @TODO: This code is GLSL specific. We need to update when we switch to WGSL.
+    if (type === 'float') return GPUVertexFormat.Float;
+    if (type === 'vec2') return GPUVertexFormat.Float2;
+    if (type === 'vec3') return GPUVertexFormat.Float3;
+    if (type === 'vec4') return GPUVertexFormat.Float4;
+    if (type === 'int') return GPUVertexFormat.Int;
+    if (type === 'ivec2') return GPUVertexFormat.Int2;
+    if (type === 'ivec3') return GPUVertexFormat.Int3;
+    if (type === 'ivec4') return GPUVertexFormat.Int4;
+    if (type === 'uint') return GPUVertexFormat.UInt;
+    if (type === 'uvec2') return GPUVertexFormat.UInt2;
+    if (type === 'uvec3') return GPUVertexFormat.UInt3;
+    if (type === 'uvec4') return GPUVertexFormat.UInt4;
+    console.error('THREE.WebGPURenderer: Shader variable type not supported yet.', type);
   }
+
   _parseShaderAttributes(shader) {
+    // find "layout (location = num) in type name" in vertex shader
     const regex = /\s*layout\s*\(\s*location\s*=\s*(?<location>[0-9]+)\s*\)\s*in\s+(?<type>\w+)\s+(?<name>\w+)\s*;/gim;
     let shaderAttribute = null;
     const attributes = [];
+
     while (shaderAttribute = regex.exec(shader)) {
       const shaderLocation = parseInt(shaderAttribute.groups.location);
+
       const arrayStride = this._getArrayStride(shaderAttribute.groups.type);
+
       const vertexFormat = this._getVertexFormat(shaderAttribute.groups.type);
+
       attributes.push({
         name: shaderAttribute.groups.name,
-        arrayStride,
+        arrayStride: arrayStride,
         slot: shaderLocation,
         format: vertexFormat
       });
-    }
-    return attributes.sort(function(a, b) {
+    } // the sort ensures to setup vertex buffers in the correct order
+
+
+    return attributes.sort(function (a, b) {
       return a.slot - b.slot;
     });
   }
+
 }
+
 function onMaterialDispose(event) {
   const properties = this.properties;
   const nodes = this.nodes;
@@ -535,10 +661,11 @@ function onMaterialDispose(event) {
   const material = event.target;
   const materialProperties = properties.get(material);
   const nodeBuilder = nodes.get(material);
-  material.removeEventListener("dispose", materialProperties.disposeCallback);
+  material.removeEventListener('dispose', materialProperties.disposeCallback);
   properties.remove(material);
   nodes.remove(material);
   shaderModules.vertex.delete(nodeBuilder.vertexShader);
-  shaderModules.fragment.delete(nodeBuilder.fragmentShader);
+  shaderModules.fragment.delete(nodeBuilder.fragmentShader); // @TODO: still needed remove bindings and pipeline
 }
-module.exports = WebGPURenderPipelines;
+
+export default WebGPURenderPipelines;