@zephyr3d/device 0.1.0 → 0.1.2

package/README.md

@@ -0,0 +1,46 @@
+# @zephyr3d
+
+Zephyr3d is a set of API for 3D rendering within the browser. 
+
+Zephyr3d is released as ES6 modules and requires npm for installation. It is designed to be used in conjunction with front-end build tools such as Webpack or Vite for development.
+
+## Installation
+
+- @zephyr3d/base
+
+  The basic module includes a math library and content commonly used in other modules.
+
+  ```npm install --save @zephyr3d/base```
+
+- @zephyr3d/device
+
+  Includes the basic definitions and abstract interfaces of the rendering API.
+
+  ```npm install --save @zephyr3d/device```
+
+- @zephyr3d/backend-webgl
+
+  WebGL backend, WebGL/WebGL2 rendering.
+
+  ```npm install --save @zephyr3d/backend-webgl```
+
+- @zephyr3d/backend-webgpu
+
+  WebGPU backend.
+
+  ```npm install --save @zephyr3d/backend-webgpu```
+
+- @zephyr3d/scene
+
+  The SceneAPI module, built on top of the DeviceAPI module, facilitates rapid development of rendering projects.
+  
+  ```npm install --save @zephyr3d/scene```
+
+- @zephyr3d/imgui
+
+  To render a GUI, you can install the ImGui binding module.
+
+  ```npm install --save @zephyr3d/imgui```
+
+
+

package/dist/base_types.js

@@ -21,28 +21,28 @@ const COMPRESSED_FORMAT_SHIFT = 24;
 const COMPRESSION_FORMAT_BC1 = 1 << COMPRESSED_FORMAT_SHIFT;
 const COMPRESSION_FORMAT_BC2 = 2 << COMPRESSED_FORMAT_SHIFT;
 const COMPRESSION_FORMAT_BC3 = 3 << COMPRESSED_FORMAT_SHIFT;
-/*
-const COMPRESSION_FORMAT_BC4 = 4 << COMPRESSED_FORMAT_SHIFT;
-const COMPRESSION_FORMAT_BC5 = 5 << COMPRESSED_FORMAT_SHIFT;
-const COMPRESSION_FORMAT_BC6 = 6 << COMPRESSED_FORMAT_SHIFT;
-const COMPRESSION_FORMAT_BC7 = 7 << COMPRESSED_FORMAT_SHIFT;
-const COMPRESSION_FORMAT_ETC2_RGB8 = 8 << COMPRESSED_FORMAT_SHIFT;
-const COMPRESSION_FORMAT_ETC2_RGB8_A1 = 9 << COMPRESSED_FORMAT_SHIFT;
-const COMPRESSION_FORMAT_ETC2_RGBA8 = 10 << COMPRESSED_FORMAT_SHIFT;
-const COMPRESSION_FORMAT_ASTC_4x4 = 11 << COMPRESSED_FORMAT_SHIFT;
-const COMPRESSION_FORMAT_ASTC_5x4 = 12 << COMPRESSED_FORMAT_SHIFT;
-const COMPRESSION_FORMAT_ASTC_5x5 = 13 << COMPRESSED_FORMAT_SHIFT;
-const COMPRESSION_FORMAT_ASTC_6x5 = 14 << COMPRESSED_FORMAT_SHIFT;
-const COMPRESSION_FORMAT_ASTC_6x6 = 15 << COMPRESSED_FORMAT_SHIFT;
-const COMPRESSION_FORMAT_ASTC_8x5 = 16 << COMPRESSED_FORMAT_SHIFT;
-const COMPRESSION_FORMAT_ASTC_8x6 = 17 << COMPRESSED_FORMAT_SHIFT;
-const COMPRESSION_FORMAT_ASTC_8x8 = 18 << COMPRESSED_FORMAT_SHIFT;
-const COMPRESSION_FORMAT_ASTC_10x5 = 19 << COMPRESSED_FORMAT_SHIFT;
-const COMPRESSION_FORMAT_ASTC_10x6 = 20 << COMPRESSED_FORMAT_SHIFT;
-const COMPRESSION_FORMAT_ASTC_10x8 = 21 << COMPRESSED_FORMAT_SHIFT;
-const COMPRESSION_FORMAT_ASTC_10x10 = 22 << COMPRESSED_FORMAT_SHIFT;
-const COMPRESSION_FORMAT_ASTC_12x10 = 23 << COMPRESSED_FORMAT_SHIFT;
-const COMPRESSION_FORMAT_ASTC_12x12 = 24 << COMPRESSED_FORMAT_SHIFT;
+/*
+const COMPRESSION_FORMAT_BC4 = 4 << COMPRESSED_FORMAT_SHIFT;
+const COMPRESSION_FORMAT_BC5 = 5 << COMPRESSED_FORMAT_SHIFT;
+const COMPRESSION_FORMAT_BC6 = 6 << COMPRESSED_FORMAT_SHIFT;
+const COMPRESSION_FORMAT_BC7 = 7 << COMPRESSED_FORMAT_SHIFT;
+const COMPRESSION_FORMAT_ETC2_RGB8 = 8 << COMPRESSED_FORMAT_SHIFT;
+const COMPRESSION_FORMAT_ETC2_RGB8_A1 = 9 << COMPRESSED_FORMAT_SHIFT;
+const COMPRESSION_FORMAT_ETC2_RGBA8 = 10 << COMPRESSED_FORMAT_SHIFT;
+const COMPRESSION_FORMAT_ASTC_4x4 = 11 << COMPRESSED_FORMAT_SHIFT;
+const COMPRESSION_FORMAT_ASTC_5x4 = 12 << COMPRESSED_FORMAT_SHIFT;
+const COMPRESSION_FORMAT_ASTC_5x5 = 13 << COMPRESSED_FORMAT_SHIFT;
+const COMPRESSION_FORMAT_ASTC_6x5 = 14 << COMPRESSED_FORMAT_SHIFT;
+const COMPRESSION_FORMAT_ASTC_6x6 = 15 << COMPRESSED_FORMAT_SHIFT;
+const COMPRESSION_FORMAT_ASTC_8x5 = 16 << COMPRESSED_FORMAT_SHIFT;
+const COMPRESSION_FORMAT_ASTC_8x6 = 17 << COMPRESSED_FORMAT_SHIFT;
+const COMPRESSION_FORMAT_ASTC_8x8 = 18 << COMPRESSED_FORMAT_SHIFT;
+const COMPRESSION_FORMAT_ASTC_10x5 = 19 << COMPRESSED_FORMAT_SHIFT;
+const COMPRESSION_FORMAT_ASTC_10x6 = 20 << COMPRESSED_FORMAT_SHIFT;
+const COMPRESSION_FORMAT_ASTC_10x8 = 21 << COMPRESSED_FORMAT_SHIFT;
+const COMPRESSION_FORMAT_ASTC_10x10 = 22 << COMPRESSED_FORMAT_SHIFT;
+const COMPRESSION_FORMAT_ASTC_12x10 = 23 << COMPRESSED_FORMAT_SHIFT;
+const COMPRESSION_FORMAT_ASTC_12x12 = 24 << COMPRESSED_FORMAT_SHIFT;
 */ const COMPRESSION_FORMAT_BITMASK = 0x1f << COMPRESSED_FORMAT_SHIFT;
 const RED_BITMASK = 1 << RED_SHIFT;
 const GREEN_BITMASK = 1 << GREEN_SHIFT;
@@ -116,11 +116,11 @@ const textureFormatMap = {
     'dxt5': makeTextureFormat(COMPRESSION_FORMAT_BC3, true, true, true, true, false, false, false, false, false, false, false, 4, 4, 16),
     'dxt5-srgb': makeTextureFormat(COMPRESSION_FORMAT_BC3, true, true, true, true, false, false, false, false, false, true, false, 4, 4, 16)
 };
-/**
- * Converts a non-sRGB texture format to the corresponding sRGB texture format
- * @param format - The texture format to be converted
- * @returns The sRGB texture format
- * @public
+/**
+ * Converts a non-sRGB texture format to the corresponding sRGB texture format
+ * @param format - The texture format to be converted
+ * @returns The sRGB texture format
+ * @public
  */ function linearTextureFormatToSRGB(format) {
     switch(format){
         case 'rgba8unorm':
@@ -137,115 +137,115 @@ const textureFormatMap = {
             return format;
     }
 }
-/**
- * Check if a given texture format contains an alpha channel.
- * @param format - The texture format to be checked.
- * @returns true if the texture format contains an alpha channel, otherwise false
- * @public
+/**
+ * Check if a given texture format contains an alpha channel.
+ * @param format - The texture format to be checked.
+ * @returns true if the texture format contains an alpha channel, otherwise false
+ * @public
  */ function hasAlphaChannel(format) {
     return !!(textureFormatMap[format] & ALPHA_BITMASK);
 }
-/**
- * Check if a given texture format contains a red channel.
- * @param format - The texture format to be checked.
- * @returns true if the texture format contains a red channel, otherwise false
- * @public
+/**
+ * Check if a given texture format contains a red channel.
+ * @param format - The texture format to be checked.
+ * @returns true if the texture format contains a red channel, otherwise false
+ * @public
  */ function hasRedChannel(format) {
     return !!(textureFormatMap[format] & RED_BITMASK);
 }
-/**
- * Check if a given texture format contains a green channel.
- * @param format - The texture format to be checked.
- * @returns true if the texture format contains a green channel, otherwise false
- * @public
+/**
+ * Check if a given texture format contains a green channel.
+ * @param format - The texture format to be checked.
+ * @returns true if the texture format contains a green channel, otherwise false
+ * @public
  */ function hasGreenChannel(format) {
     return !!(textureFormatMap[format] & GREEN_BITMASK);
 }
-/**
- * Check if a given texture format contains a blue channel.
- * @param format - The texture format to be checked.
- * @returns true if the texture format contains a blue channel, otherwise false
- * @public
+/**
+ * Check if a given texture format contains a blue channel.
+ * @param format - The texture format to be checked.
+ * @returns true if the texture format contains a blue channel, otherwise false
+ * @public
  */ function hasBlueChannel(format) {
     return !!(textureFormatMap[format] & BLUE_BITMASK);
 }
-/**
- * Check if a given texture format contains a depth channel.
- * @param format - The texture format to be checked.
- * @returns true if the texture format contains a depth channel, otherwise false
- * @public
+/**
+ * Check if a given texture format contains a depth channel.
+ * @param format - The texture format to be checked.
+ * @returns true if the texture format contains a depth channel, otherwise false
+ * @public
  */ function hasDepthChannel(format) {
     return !!(textureFormatMap[format] & DEPTH_BITMASK);
 }
-/**
- * Check if a given texture format contains a stencil channel.
- * @param format - The texture format to be checked.
- * @returns true if the texture format contains a stencil channel, otherwise false
- * @public
+/**
+ * Check if a given texture format contains a stencil channel.
+ * @param format - The texture format to be checked.
+ * @returns true if the texture format contains a stencil channel, otherwise false
+ * @public
  */ function hasStencilChannel(format) {
     return !!(textureFormatMap[format] & STENCIL_BITMASK);
 }
-/**
- * Check whether a given texture format is floating-point.
- * @param format - The texture format to be checked.
- * @returns true if the texture format is floating-point, otherwise false
- * @public
+/**
+ * Check whether a given texture format is floating-point.
+ * @param format - The texture format to be checked.
+ * @returns true if the texture format is floating-point, otherwise false
+ * @public
  */ function isFloatTextureFormat(format) {
     return !!(textureFormatMap[format] & FLOAT_BITMASK);
 }
-/**
- * Check whether a given texture format is integer.
- * @param format - The texture format to be checked.
- * @returns true if the texture format is integer, otherwise false
- * @public
+/**
+ * Check whether a given texture format is integer.
+ * @param format - The texture format to be checked.
+ * @returns true if the texture format is integer, otherwise false
+ * @public
  */ function isIntegerTextureFormat(format) {
     return !!(textureFormatMap[format] & INTEGER_BITMASK);
 }
-/**
- * Check whether a given texture format is signed.
- * @param format - The texture format to be checked.
- * @returns true if the texture format is signed, otherwise false
- * @public
+/**
+ * Check whether a given texture format is signed.
+ * @param format - The texture format to be checked.
+ * @returns true if the texture format is signed, otherwise false
+ * @public
  */ function isSignedTextureFormat(format) {
     return !!(textureFormatMap[format] & SIGNED_BITMASK);
 }
-/**
- * Check whether a given texture format is a compressed format.
- * @param format - The texture format to be checked.
- * @returns true if the texture format is a compressed format, otherwise false
- * @public
+/**
+ * Check whether a given texture format is a compressed format.
+ * @param format - The texture format to be checked.
+ * @returns true if the texture format is a compressed format, otherwise false
+ * @public
  */ function isCompressedTextureFormat(format) {
     return !!(textureFormatMap[format] & COMPRESSION_FORMAT_BITMASK);
 }
-/**
- * Check whether a given texture format is sRGB format.
- * @param format - The texture format to be checked.
- * @returns true if the texture format is sRGB format, otherwise false
- * @public
+/**
+ * Check whether a given texture format is sRGB format.
+ * @param format - The texture format to be checked.
+ * @returns true if the texture format is sRGB format, otherwise false
+ * @public
  */ function isSRGBTextureFormat(format) {
     return !!(textureFormatMap[format] & SRGB_BITMASK);
 }
-/**
- * Get block size of given texture format
- * @param format - The texture format
- * @returns The block size
- * @public
+/**
+ * Get block size of given texture format
+ * @param format - The texture format
+ * @returns The block size
+ * @public
  */ function getTextureFormatBlockSize(format) {
     return (textureFormatMap[format] & BLOCK_SIZE_MASK) >> BLOCK_SIZE_SHIFT;
 }
-/**
- * Get block width of given texture format
- * @param format - The texture format
- * @returns The block width
- * @public
+/**
+ * Get block width of given texture format
+ * @param format - The texture format
+ * @returns The block width
+ * @public
  */ function getTextureFormatBlockWidth(format) {
     return (textureFormatMap[format] & BLOCK_WIDTH_MASK) >> BLOCK_WIDTH_SHIFT;
 }
-/**
- * Get block height of given texture format
- * @param format - The texture format
- * @returns The block height
- * @public
+/**
+ * Get block height of given texture format
+ * @param format - The texture format
+ * @returns The block height
+ * @public
  */ function getTextureFormatBlockHeight(format) {
     return (textureFormatMap[format] & BLOCK_HEIGHT_MASK) >> BLOCK_HEIGHT_SHIFT;
 }
@@ -535,23 +535,23 @@ var ShaderType;
     ShaderType[ShaderType["Fragment"] = 2] = "Fragment";
     ShaderType[ShaderType["Compute"] = 4] = "Compute";
 })(ShaderType || (ShaderType = {}));
-/**
- * Event that will be fired when device is lost
- * @public
+/**
+ * Event that will be fired when device is lost
+ * @public
  */ class DeviceLostEvent {
     /** The event name */ static NAME = 'devicelost';
     type = DeviceLostEvent.NAME;
 }
-/**
- * Event that will be fired when device has just been restored
- * @public
+/**
+ * Event that will be fired when device has just been restored
+ * @public
  */ class DeviceRestoreEvent {
     /** The event name */ static NAME = 'devicerestored';
     type = DeviceRestoreEvent.NAME;
 }
-/**
- * Event that will be fired when size of back buffer has changed
- * @public
+/**
+ * Event that will be fired when size of back buffer has changed
+ * @public
  */ class DeviceResizeEvent {
     /** The event name */ static NAME = 'resize';
     width;
@@ -562,9 +562,9 @@ var ShaderType;
         this.height = height;
     }
 }
-/**
- * Event that will be fired when any gpu object is created
- * @public
+/**
+ * Event that will be fired when any gpu object is created
+ * @public
  */ class DeviceGPUObjectAddedEvent {
     /** the event name */ static NAME = 'gpuobject_added';
     object;
@@ -573,9 +573,9 @@ var ShaderType;
         this.object = obj;
     }
 }
-/**
- * Event that will be fired when any gpu object is disposed
- * @public
+/**
+ * Event that will be fired when any gpu object is disposed
+ * @public
  */ class DeviceGPUObjectRemovedEvent {
     /** The event name */ static NAME = 'gpuobject_removed';
     object;
@@ -584,9 +584,9 @@ var ShaderType;
         this.object = obj;
     }
 }
-/**
- * Event that will be fired when any gpu object name is changed
- * @public
+/**
+ * Event that will be fired when any gpu object name is changed
+ * @public
  */ class DeviceGPUObjectRenameEvent {
     /** The event name */ static NAME = 'gpuobject_rename';
     object;

package/dist/builder/ast.js

@@ -812,12 +812,12 @@ function unbracket(e) {
         throw new Error(`no matching overload function found for type ${this.type.toTypeName('webgl2')}`);
     }
     toWGSL(indent, ctx) {
-        /*
-    console.assert(
-      this.type.isConstructible(),
-      `type '${this.type.toTypeName('webgpu')}' is not constructible`,
-      true
-    );
+        /*
+    console.assert(
+      this.type.isConstructible(),
+      `type '${this.type.toTypeName('webgpu')}' is not constructible`,
+      true
+    );
     */ const overloads = this.type.getConstructorOverloads('webgpu');
         for (const overload of overloads){
             const convertedArgs = convertArgs(this.args, overload);
@@ -1719,10 +1719,10 @@ function unbracket(e) {
                 break;
             case DeclareType.DECLARE_TYPE_UNIFORM:
                 if (valueType.isStructType()) {
-                    /*
-          if (valueType.layout !== 'std140') {
-            throw new errors.PBASTError(this, 'uniform buffer layout must be std140');
-          }
+                    /*
+          if (valueType.layout !== 'std140') {
+            throw new errors.PBASTError(this, 'uniform buffer layout must be std140');
+          }
           */ return `${indent}layout(std140) uniform ${this.blockName} { ${valueType.structName} ${this.value.name}; };\n`;
                 } else {
                     valueType = ctx.typeReplacement?.get(this.value.value) || valueType;
@@ -2031,13 +2031,13 @@ function unbracket(e) {
         str += super.toWGSL(indent + '  ', ctx);
         str += `${indent}}\n`;
         return str;
-    /*
-    let str = `${indent}loop {\n`;
-    const newIndent = indent + '  ';
-    str += `${newIndent}if (!(${unbracket(this.condition.toWGSL(indent, ctx))})) { break; }\n`;
-    str += super.toWGSL(newIndent, ctx);
-    str += `${indent}}\n`;
-    return str;
+    /*
+    let str = `${indent}loop {\n`;
+    const newIndent = indent + '  ';
+    str += `${newIndent}if (!(${unbracket(this.condition.toWGSL(indent, ctx))})) { break; }\n`;
+    str += super.toWGSL(newIndent, ctx);
+    str += `${indent}}\n`;
+    return str;
     */ }
 }
 /** @internal */ class ASTStructDefine extends ShaderAST {

package/dist/builder/base.js

@@ -59,9 +59,9 @@ const constructorCache = new Map();
     });
     return wrappedTypeFunc;
 }
-/**
- * Base class for proxiable object
- * @public
+/**
+ * Base class for proxiable object
+ * @public
  */ class Proxiable {
     /** @internal */ proxy;
     constructor(){
@@ -80,9 +80,9 @@ const constructorCache = new Map();
     }
 }
 let uidExp = 0;
-/**
- * Base class for a expression in the shader
- * @public
+/**
+ * Base class for a expression in the shader
+ * @public
  */ class PBShaderExp extends Proxiable {
     /** @internal */ $uid;
     /** @internal */ $str;
@@ -143,20 +143,20 @@ let uidExp = 0;
             debugger;
         }
     }
-    /**
-   * Point out that the variable should be in uniform address space
-   * @param group - The bind group index
-   * @returns self
+    /**
+   * Point out that the variable should be in uniform address space
+   * @param group - The bind group index
+   * @returns self
    */ uniform(group) {
         this.$declareType = DeclareType.DECLARE_TYPE_UNIFORM;
         this.$group = group;
         this.$isBuffer = false;
         return this;
     }
-    /**
-   * Point out that the variable should be an uniform buffer
-   * @param group - The bind group index
-   * @returns self
+    /**
+   * Point out that the variable should be an uniform buffer
+   * @param group - The bind group index
+   * @returns self
    */ uniformBuffer(group) {
         if (!this.$typeinfo.isPrimitiveType() && !this.$typeinfo.isArrayType() && !this.$typeinfo.isStructType()) {
             throw new PBASTError(this.$ast, 'only primitive type, array type or structure type can be set as uniform buffer');
@@ -166,21 +166,21 @@ let uidExp = 0;
         this.$isBuffer = true;
         return this;
     }
-    /**
-   * Point out that the variable should be in workgroup address space
-   *
-   * @remarks
-   * WebGPU device only
-   *
-   * @returns self
+    /**
+   * Point out that the variable should be in workgroup address space
+   *
+   * @remarks
+   * WebGPU device only
+   *
+   * @returns self
    */ workgroup() {
         this.$declareType = DeclareType.DECLARE_TYPE_WORKGROUP;
         return this;
     }
-    /**
-   * Point out that the variable should be in storage address space
-   * @param group - The bind group index
-   * @returns self
+    /**
+   * Point out that the variable should be in storage address space
+   * @param group - The bind group index
+   * @returns self
    */ storage(group) {
         if (!this.$typeinfo.isHostSharable()) {
             throw new PBASTError(this.$ast, 'type cannot be declared in storage address space');
@@ -190,10 +190,10 @@ let uidExp = 0;
         this.$isBuffer = false;
         return this;
     }
-    /**
-   * Point out that the variable should be a storage buffer
-   * @param group - The bind group index
-   * @returns self
+    /**
+   * Point out that the variable should be a storage buffer
+   * @param group - The bind group index
+   * @returns self
    */ storageBuffer(group) {
         if (!this.$typeinfo.isPrimitiveType() && !this.$typeinfo.isArrayType() && !this.$typeinfo.isStructType()) {
             throw new PBASTError(this.$ast, 'only primitive type, array type or structure type can be set as storage buffer');
@@ -211,19 +211,19 @@ let uidExp = 0;
         this.$inout = 'out';
         return this;
     }
-    /**
-   * Point out that the variable is a input vertex attribute
-   * @param attr - The vertex semantic
-   * @returns self
+    /**
+   * Point out that the variable is a input vertex attribute
+   * @param attr - The vertex semantic
+   * @returns self
    */ attrib(attr) {
         this.$declareType = DeclareType.DECLARE_TYPE_IN;
         this.$attrib = attr;
         return this;
     }
-    /**
-   * Create tags for the variable
-   * @param args - tags
-   * @returns self
+    /**
+   * Create tags for the variable
+   * @param args - tags
+   * @returns self
    */ tag(...args) {
         args.forEach((val)=>{
             if (this.$tags.indexOf(val) < 0) {
@@ -232,20 +232,20 @@ let uidExp = 0;
         });
         return this;
     }
-    /**
-   * Set sample type for the variable if the variable is of type texture
-   * @param type - sample type
-   * @returns self
+    /**
+   * Set sample type for the variable if the variable is of type texture
+   * @param type - sample type
+   * @returns self
    */ sampleType(type) {
         if (type) {
             this.$sampleType = type;
         }
         return this;
     }
-    /**
-   * Get element in the array by index
-   * @param index - index of the element
-   * @returns the element variable
+    /**
+   * Get element in the array by index
+   * @param index - index of the element
+   * @returns the element variable
    */ at(index) {
         const varType = this.$ast.getType();
         if (!varType.isArrayType() && (!varType.isPrimitiveType() || !varType.isVectorType() && !varType.isMatrixType())) {
@@ -285,10 +285,10 @@ let uidExp = 0;
         }
         return result;
     }
-    /**
-   * Set element in the array by index
-   * @param index - index of the element
-   * @param val - value to set
+    /**
+   * Set element in the array by index
+   * @param index - index of the element
+   * @param val - value to set
    */ setAt(index, val) {
         const varType = this.$ast.getType();
         if (!varType.isArrayType()) {
@@ -304,44 +304,44 @@ let uidExp = 0;
         }
         currentProgramBuilder.getCurrentScope().$ast.statements.push(new ASTAssignment(new ASTLValueArray(new ASTLValueScalar(this.$ast), typeof index === 'number' ? new ASTScalar(index, typeI32) : index.$ast, varType.elementType), val instanceof PBShaderExp ? val.$ast : val));
     }
-    /**
-   * Point out that the variable should be in high precision
-   * @returns self
+    /**
+   * Point out that the variable should be in high precision
+   * @returns self
    */ highp() {
         this.$precision = ShaderPrecisionType.HIGH;
         return this;
     }
-    /**
-   * Points out that the variable should be in medium precision
-   * @returns self
+    /**
+   * Points out that the variable should be in medium precision
+   * @returns self
    */ mediump() {
         this.$precision = ShaderPrecisionType.MEDIUM;
         return this;
     }
-    /**
-   * Points out that the variable should be in low precision
-   * @returns self
+    /**
+   * Points out that the variable should be in low precision
+   * @returns self
    */ lowp() {
         this.$precision = ShaderPrecisionType.LOW;
         return this;
     }
-    /**
-   * Determine if this variable is of vector type
-   * @returns true if the variable is of vector type, otherwise false
+    /**
+   * Determine if this variable is of vector type
+   * @returns true if the variable is of vector type, otherwise false
    */ isVector() {
         const varType = this.$ast.getType();
         return varType.isPrimitiveType() && varType.isVectorType();
     }
-    /**
-   * Get vector component count of the variable if this variable is of vector type
-   * @returns the vector component count
+    /**
+   * Get vector component count of the variable if this variable is of vector type
+   * @returns the vector component count
    */ numComponents() {
         const varType = this.$ast.getType();
         return varType.isPrimitiveType() ? varType.cols : 0;
     }
-    /**
-   * Get type name of this variable
-   * @returns The type name of this variable
+    /**
+   * Get type name of this variable
+   * @returns The type name of this variable
    */ getTypeName() {
         return this.$ast.getType().toTypeName(currentProgramBuilder.getDevice().type);
     }

package/dist/device.js

@@ -7,9 +7,9 @@ import { DeviceGPUObjectAddedEvent, DeviceGPUObjectRemovedEvent, DeviceResizeEve
 import '@zephyr3d/base';
 import { DrawText } from './helpers/drawtext.js';
 
-/**
- * Base class for rendering device
- * @public
+/**
+ * Base class for rendering device
+ * @public
  */ class BaseDevice {
     _canvas;
     _canvasClientWidth;

package/dist/gpuobject.js

@@ -1844,31 +1844,31 @@ var GPUResourceUsageFlags;
     GPUResourceUsageFlags[GPUResourceUsageFlags["DYNAMIC"] = 2048] = "DYNAMIC";
     GPUResourceUsageFlags[GPUResourceUsageFlags["MANAGED"] = 4096] = "MANAGED";
 })(GPUResourceUsageFlags || (GPUResourceUsageFlags = {}));
-/**
- * Get vertex attribute index by semantic
- * @internal
+/**
+ * Get vertex attribute index by semantic
+ * @internal
  */ function getVertexAttribByName(name) {
     return vertexAttribNameMap[name];
 }
-/**
- * Get vertex semantic by attribute index
- * @internal
+/**
+ * Get vertex semantic by attribute index
+ * @internal
  */ function getVertexAttribName(attrib) {
     return vertexAttribNameRevMap[attrib];
 }
-/**
- * Get byte size of specified vertex format
- * @internal
+/**
+ * Get byte size of specified vertex format
+ * @internal
  */ function getVertexFormatSize(fmt) {
     return vertexAttribFormatMap[fmt][2];
 }
-/**
- * Get vertex format by semantic and component type and component count
- * @param semantic - The vertex semantic
- * @param type - Data type of vertex component
- * @param count - The count of vertex components
- * @returns Vertex format
- * @public
+/**
+ * Get vertex format by semantic and component type and component count
+ * @param semantic - The vertex semantic
+ * @param type - Data type of vertex component
+ * @param count - The count of vertex components
+ * @returns Vertex format
+ * @public
  */ function getVertexAttribFormat(semantic, type, count) {
     const loc = getVertexAttribByName(semantic);
     for(const k in vertexAttribFormatMap){
@@ -1879,19 +1879,19 @@ var GPUResourceUsageFlags;
     }
     return null;
 }
-/**
- * Get the length of a vertex buffer by specified structure type of the vertex buffer
- * @param vertexBufferType - The structure type of the vertex buffer
- * @returns The length of the vertex buffer
- * @public
+/**
+ * Get the length of a vertex buffer by specified structure type of the vertex buffer
+ * @param vertexBufferType - The structure type of the vertex buffer
+ * @returns The length of the vertex buffer
+ * @public
  */ function getVertexBufferLength(vertexBufferType) {
     return vertexBufferType.structMembers[0].type.dimension;
 }
-/**
- * Get byte stride of a vertex buffer by specified structure type of the vertex buffer
- * @param vertexBufferType - The structure type of the vertex buffer
- * @returns The byte stride of the vertex buffer
- * @public
+/**
+ * Get byte stride of a vertex buffer by specified structure type of the vertex buffer
+ * @param vertexBufferType - The structure type of the vertex buffer
+ * @returns The byte stride of the vertex buffer
+ * @public
  */ function getVertexBufferStride(vertexBufferType) {
     const vertexType = vertexBufferType.structMembers[0].type.elementType;
     if (vertexType.isStructType()) {
@@ -1904,12 +1904,12 @@ var GPUResourceUsageFlags;
         return vertexType.getSize();
     }
 }
-/**
- * Get primitive type of a vertex attribute by specified vertex semantic
- * @param vertexBufferType - The structure type of the vertex buffer
- * @param semantic - The vertex semantic
- * @returns - The primitive type of the vertex attribute
- * @public
+/**
+ * Get primitive type of a vertex attribute by specified vertex semantic
+ * @param vertexBufferType - The structure type of the vertex buffer
+ * @param semantic - The vertex semantic
+ * @returns - The primitive type of the vertex attribute
+ * @public
  */ function getVertexBufferAttribTypeBySemantic(vertexBufferType, semantic) {
     const k = vertexBufferType.structMembers[0];
     const vertexType = k.type.elementType;
@@ -1924,12 +1924,12 @@ var GPUResourceUsageFlags;
         return k.name === semantic ? vertexType : null;
     }
 }
-/**
- * Get primitive type of a vertex attribute by specified vertex attribute index
- * @param vertexBufferType - The structure type of the vertex buffer
- * @param semantic - The vertex attribute index
- * @returns - The primitive type of the vertex attribute
- * @public
+/**
+ * Get primitive type of a vertex attribute by specified vertex attribute index
+ * @param vertexBufferType - The structure type of the vertex buffer
+ * @param semantic - The vertex attribute index
+ * @returns - The primitive type of the vertex attribute
+ * @public
  */ function getVertexBufferAttribType(vertexBufferType, attrib) {
     const attribName = getVertexAttribName(attrib);
     if (!attribName) {
@@ -1937,12 +1937,12 @@ var GPUResourceUsageFlags;
     }
     return getVertexBufferAttribTypeBySemantic(vertexBufferType, attribName);
 }
-/**
- * Get the structure type of a vertex buffer by specified vertex attribute formats and the length of the vertex buffer
- * @param length - The length of the vertex buffer
- * @param attributes - The vertex attributes
- * @returns The structure type of the vertex buffer
- * @public
+/**
+ * Get the structure type of a vertex buffer by specified vertex attribute formats and the length of the vertex buffer
+ * @param length - The length of the vertex buffer
+ * @param attributes - The vertex attributes
+ * @returns The structure type of the vertex buffer
+ * @public
  */ function makeVertexBufferType(length, ...attributes) {
     if (attributes.length === 0) {
         return null;
@@ -1968,9 +1968,9 @@ var GPUResourceUsageFlags;
         ]);
     }
 }
-/**
- * Vertex semantic list
- * @public
+/**
+ * Vertex semantic list
+ * @public
  */ const semanticList = function() {
     const list = [];
     for(let i = 0; i < MAX_VERTEX_ATTRIBUTES; i++){
@@ -2012,11 +2012,11 @@ var GPUResourceUsageFlags;
             return null;
     }
 }
-/**
- * Creates the default name for the type of given gpu object
- * @param obj - The gpu object
- * @returns The default name
- * @public
+/**
+ * Creates the default name for the type of given gpu object
+ * @param obj - The gpu object
+ * @returns The default name
+ * @public
  */ function genDefaultName(obj) {
     if (obj.isTexture2D()) {
         return 'texture_2d';

package/dist/helpers/font.js

@@ -35,9 +35,9 @@
         }
     }
 }
-/**
-   * The font class
-   * @public
+/**
+   * The font class
+   * @public
    */ class Font {
     /** @internal */ static fontCache = {};
     /** @internal */ _name;
@@ -50,10 +50,10 @@
     /** @internal */ _topScaled;
     /** @internal */ _bottomScaled;
     /** @internal */ _div;
-    /**
-     * Creates a instance of font class from font name and the scale value
-     * @param name - The font name
-     * @param scale - The scale value
+    /**
+     * Creates a instance of font class from font name and the scale value
+     * @param name - The font name
+     * @param scale - The scale value
      */ constructor(name, scale){
         this._top = 0;
         this._bottom = 0;
@@ -69,11 +69,11 @@
             this._normalizeFont();
         }
     }
-    /**
-     * Fetch a font from cache
-     * @param name - The font name
-     * @param scale - The scale value
-     * @returns The font object
+    /**
+     * Fetch a font from cache
+     * @param name - The font name
+     * @param scale - The scale value
+     * @returns The font object
      */ static fetchFont(name, scale) {
         let fontlist = this.fontCache[name];
         if (!fontlist) {

package/dist/helpers/textureatlas.js

@@ -1,8 +1,8 @@
 import { RectsPacker } from '@zephyr3d/base';
 
-/**
- * Texture atlas manager
- * @public
+/**
+ * Texture atlas manager
+ * @public
  */ class TextureAtlasManager {
     /** @internal */ static ATLAS_WIDTH = 1024;
     /** @internal */ static ATLAS_HEIGHT = 1024;
@@ -15,13 +15,13 @@ import { RectsPacker } from '@zephyr3d/base';
     /** @internal */ _atlasList;
     /** @internal */ _atlasInfoMap;
     /** @internal */ _atlasRestoreHandler;
-    /**
-   * Creates a new texture atlas manager instance
-   * @param device - The render device
-   * @param binWidth - Width of an atlas bin
-   * @param binHeight - Height of an atlas bin
-   * @param rectBorderWidth - Border width of an atlas
-   * @param linearSpace - true if the texture space is linear
+    /**
+   * Creates a new texture atlas manager instance
+   * @param device - The render device
+   * @param binWidth - Width of an atlas bin
+   * @param binHeight - Height of an atlas bin
+   * @param rectBorderWidth - Border width of an atlas
+   * @param linearSpace - true if the texture space is linear
    */ constructor(device, binWidth, binHeight, rectBorderWidth, linearSpace){
         this._device = device;
         this._binWidth = binWidth;
@@ -33,37 +33,37 @@ import { RectsPacker } from '@zephyr3d/base';
         this._atlasInfoMap = {};
         this._atlasRestoreHandler = null;
     }
-    /**
-   * The texture restore handler callback function
-   * This callback function will be called whenever the device has been restored
+    /**
+   * The texture restore handler callback function
+   * This callback function will be called whenever the device has been restored
    */ get atlasTextureRestoreHandler() {
         return this._atlasRestoreHandler;
     }
     set atlasTextureRestoreHandler(f) {
         this._atlasRestoreHandler = f;
     }
-    /**
-   * Gets the atlas texture of a given index
-   * @param index - Index of the atlas bin
-   * @returns Atlas texture for given index
+    /**
+   * Gets the atlas texture of a given index
+   * @param index - Index of the atlas bin
+   * @returns Atlas texture for given index
    */ getAtlasTexture(index) {
         return this._atlasList[index];
     }
-    /**
-   * Gets the information about specified atlas
-   * @param key - Key of the atlas
-   * @returns Information of the atlas
+    /**
+   * Gets the information about specified atlas
+   * @param key - Key of the atlas
+   * @returns Information of the atlas
    */ getAtlasInfo(key) {
         return this._atlasInfoMap[key] || null;
     }
-    /**
-   * Check if no atlas has been created
-   * @returns true if no atlas has been created
+    /**
+   * Check if no atlas has been created
+   * @returns true if no atlas has been created
    */ isEmpty() {
         return this._atlasList.length === 0;
     }
-    /**
-   * Removes all created atlases
+    /**
+   * Removes all created atlases
    */ clear() {
         this._packer.clear();
         for (const tex of this._atlasList){
@@ -72,15 +72,15 @@ import { RectsPacker } from '@zephyr3d/base';
         this._atlasList = [];
         this._atlasInfoMap = {};
     }
-    /**
-   * Inserts a rectangle of a canvas to the atlas texture
-   * @param key - Key of the atlas
-   * @param ctx - The canvas context
-   * @param x - x offset of the rectangle
-   * @param y - y offset of the rectangle
-   * @param w - width of the rectangle
-   * @param h - height of the rectangle
-   * @returns The atals info or null if insert failed
+    /**
+   * Inserts a rectangle of a canvas to the atlas texture
+   * @param key - Key of the atlas
+   * @param ctx - The canvas context
+   * @param x - x offset of the rectangle
+   * @param y - y offset of the rectangle
+   * @param w - width of the rectangle
+   * @param h - height of the rectangle
+   * @returns The atals info or null if insert failed
    */ pushCanvas(key, ctx, x, y, w, h) {
         const rc = this._packer.insert(w + 2 * this._rectBorderWidth, h + 2 * this._rectBorderWidth);
         if (rc) {
@@ -101,11 +101,11 @@ import { RectsPacker } from '@zephyr3d/base';
         }
         return null;
     }
-    /**
-   * Inserts a bitmap to the atlas texture
-   * @param key - Key of the atlas
-   * @param bitmap - The bitmap object
-   * @returns The atals info or null if insert failed
+    /**
+   * Inserts a bitmap to the atlas texture
+   * @param key - Key of the atlas
+   * @param bitmap - The bitmap object
+   * @returns The atals info or null if insert failed
    */ pushBitmap(key, bitmap) {
         const rc = this._packer.insert(bitmap.width + 2 * this._rectBorderWidth, bitmap.height + 2 * this._rectBorderWidth);
         if (rc) {

package/package.json

@@ -1,69 +1,69 @@
-{
-  "name": "@zephyr3d/device",
-  "version": "0.1.0",
-  "description": "base system for zephyr3d library",
-  "homepage": "https://github.com/gavinyork/zephyr3d#readme",
-  "type": "module",
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "files": [
-    "**/*.js",
-    "**/*.d.ts",
-    "**/*.js.map"
-  ],
-  "sideEffects": false,
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/gavinyork/zephyr3d.git"
-  },
-  "scripts": {
-    "clean": "shx rm -rf ./dist .tsbuildinfo",
-    "tsc": "tsc -p . --noEmit",
-    "build": "cross-env NODE_OPTIONS=--max_old_space_size=8192 rollup -c --silent"
-  },
-  "keywords": [
-    "javascript",
-    "3d",
-    "rendering",
-    "engine",
-    "webgl",
-    "webgpu",
-    "canvas",
-    "zephyr3d",
-    "device"
-  ],
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/gavinyork/zephyr3d/issues"
-  },
-  "engines": {
-    "node": ">=16.18.0"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.20.12",
-    "@babel/preset-env": "^7.20.2",
-    "@rollup/plugin-babel": "^6.0.3",
-    "@rollup/plugin-node-resolve": "^15.0.1",
-    "@rollup/plugin-strip": "^3.0.2",
-    "@rollup/plugin-terser": "^0.4.0",
-    "@rollup/pluginutils": "^5.0.2",
-    "rollup": "^3.15.0",
-    "rollup-plugin-dts": "^5.2.0",
-    "rollup-plugin-copy": "^3.4.0",
-    "rollup-plugin-typescript2": "^0.34.1",
-    "@swc/core": "^1.3.62",
-    "rollup-plugin-swc3": "^0.8.2",
-    "shx": "^0.3.4",
-    "cross-env": "^7.0.3",
-    "typescript": "^5.1.3",
-    "@zephyr3d/base": "workspace:^0.1.0"
-  },
-  "peerDependencies": {
-    "@zephyr3d/base": "workspace:^0.1.0"
-  },
-  "dependencies": {
-    "@webgpu/types": "^0.1.31",
-    "@types/node": "^18.13.0"
-  }
-}
+{
+	"name": "@zephyr3d/device",
+	"version": "0.1.2",
+	"description": "base system for zephyr3d library",
+	"homepage": "https://github.com/gavinyork/zephyr3d#readme",
+	"type": "module",
+	"main": "./dist/index.js",
+	"module": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"files": [
+		"**/*.js",
+		"**/*.d.ts",
+		"**/*.js.map"
+	],
+	"sideEffects": false,
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/gavinyork/zephyr3d.git"
+	},
+	"keywords": [
+		"javascript",
+		"3d",
+		"rendering",
+		"engine",
+		"webgl",
+		"webgpu",
+		"canvas",
+		"zephyr3d",
+		"device"
+	],
+	"license": "MIT",
+	"bugs": {
+		"url": "https://github.com/gavinyork/zephyr3d/issues"
+	},
+	"engines": {
+		"node": ">=16.18.0"
+	},
+	"devDependencies": {
+		"@babel/core": "^7.20.12",
+		"@babel/preset-env": "^7.20.2",
+		"@rollup/plugin-babel": "^6.0.3",
+		"@rollup/plugin-node-resolve": "^15.0.1",
+		"@rollup/plugin-strip": "^3.0.2",
+		"@rollup/plugin-terser": "^0.4.0",
+		"@rollup/pluginutils": "^5.0.2",
+		"@swc/core": "^1.3.62",
+		"@zephyr3d/base": "^0.1.2",
+		"cross-env": "^7.0.3",
+		"rollup": "^3.15.0",
+		"rollup-plugin-copy": "^3.4.0",
+		"rollup-plugin-dts": "^5.2.0",
+		"rollup-plugin-swc3": "^0.8.2",
+		"rollup-plugin-typescript2": "^0.34.1",
+		"shx": "^0.3.4",
+		"typescript": "^5.1.3"
+	},
+	"peerDependencies": {
+		"@zephyr3d/base": "^0.1.2"
+	},
+	"dependencies": {
+		"@types/node": "^18.13.0",
+		"@webgpu/types": "^0.1.31"
+	},
+	"scripts": {
+		"clean": "shx rm -rf ./dist .tsbuildinfo",
+		"tsc": "tsc -p . --noEmit",
+		"build": "cross-env NODE_OPTIONS=--max_old_space_size=8192 rollup -c --silent"
+	}
+}