modern-canvas 0.8.1 → 0.8.2

package/dist/index.mjs

@@ -1118,6 +1118,9 @@ class Color {
     }
     return (alpha * 255 << 24) + (r << 16) + (g << 8) + b;
   }
+  toInt8Array() {
+    return [this.r8, this.g8, this.b8, this.a8];
+  }
   toArray() {
     return [this.r, this.g, this.b, this.a];
   }
@@ -2531,8 +2534,8 @@ class WebGLBatch2DModule extends WebGLModule {
   _state = WebGLState.for2D();
   _batchSize = 4096 * 4;
   _drawCallUid = 0;
-  _defaultModulate = 4294967295;
-  _defaultBackgroundColor = 0;
+  _defaultModulate = [255, 255, 255, 255];
+  _defaultBackgroundColor = [0, 0, 0, 0];
   _batchables = [];
   _vertexCount = 0;
   _indexCount = 0;
@@ -2550,7 +2553,7 @@ class WebGLBatch2DModule extends WebGLModule {
     // 1
     aBackgroundColor: { size: 4, normalized: true, type: "unsigned_byte" },
     // 1
-    aDisableWrapMode: { size: 4, normalized: true, type: "unsigned_byte" }
+    aDisableWrapMode: { size: 1, normalized: true, type: "float" }
     // 1
   };
   _vertexSize = 1 + 2 + 2 + 1 + 1 + 1;
@@ -2570,7 +2573,7 @@ attribute vec2 aPosition;
 attribute vec2 aUv;
 attribute vec4 aModulate;
 attribute vec4 aBackgroundColor;
-attribute vec4 aDisableWrapMode;
+attribute float aDisableWrapMode;
 
 uniform mat3 projectionMatrix;
 uniform mat3 viewMatrix;
@@ -2582,7 +2585,7 @@ varying float vTextureId;
 varying vec2 vUv;
 varying vec4 vModulate;
 varying vec4 vBackgroundColor;
-varying vec4 vDisableWrapMode;
+varying float vDisableWrapMode;
 
 vec2 roundPixels(vec2 position, vec2 targetSize) {
   return (floor(((position * 0.5 + 0.5) * targetSize) + 0.5) / targetSize) * 2.0 - 1.0;
@@ -2597,6 +2600,7 @@ void main(void) {
   vTextureId = aTextureId;
   vec3 pos = projectionMatrix * viewMatrix * modelMatrix * vec3(aPosition, 1.0);
   gl_Position = vec4(roundPixels(pos.xy, vec2(canvasWidth, canvasHeight)), 0.0, 1.0);
+  // gl_Position = vec4(pos.xy, 0.0, 1.0);
 
   vUv = aUv;
   vModulate = aModulate * modulate;
@@ -2608,20 +2612,20 @@ varying float vTextureId;
 varying vec2 vUv;
 varying vec4 vModulate;
 varying vec4 vBackgroundColor;
-varying vec4 vDisableWrapMode;
+varying float vDisableWrapMode;
 
 uniform sampler2D samplers[${maxTextureUnits}];
 
 void main(void) {
-  vec4 color;
-  if (vDisableWrapMode.x > 0.0 && (vUv.x < 0.0 || vUv.y < 0.0 || vUv.x > 1.0 || vUv.y > 1.0))
+  vec4 color = vec4(0.0, 0.0, 0.0, 0.0);
+  if (vDisableWrapMode > 0.0 && (vUv.x < 0.0 || vUv.y < 0.0 || vUv.x > 1.0 || vUv.y > 1.0))
   {
-    color = vec4(0.0, 0.0, 0.0, 0.0);
+    //
   }
   else
   if (vTextureId < 0.0)
   {
-    color = vec4(0.0, 0.0, 0.0, 0.0);
+    //
   }${Array.from({ length: maxTextureUnits }, (_, i) => {
         let text = "  ";
         if (i >= 0) {
@@ -2715,7 +2719,7 @@ void main(void) {
     const textureMaxUnits = this._renderer.texture.maxUnits;
     const attributeBuffer = this._getAttributeBuffer(vertexCount);
     const float32View = new Float32Array(attributeBuffer);
-    const uint32View = new Uint32Array(attributeBuffer);
+    const uint8View = new Uint8Array(attributeBuffer);
     const indexBuffer = this._getIndexBuffer(indexCount);
     let aIndex = 0;
     let iIndex = 0;
@@ -2756,7 +2760,7 @@ void main(void) {
             drawCall.first = iIndex;
           }
           const iIndexStart = aIndex / this._vertexSize;
-          const textureLocation = (texture2 ? textureLocationMap.get(texture2) : 255) ?? 255;
+          const textureLocation = (texture2 ? textureLocationMap.get(texture2) : -1) ?? -1;
           const disableWrapModeInt = disableWrapMode ? 1 : 0;
           for (let len2 = vertices.length, i2 = 0; i2 < len2; i2 += 2) {
             float32View[aIndex++] = textureLocation;
@@ -2764,9 +2768,23 @@ void main(void) {
             float32View[aIndex++] = vertices[i2 + 1];
             float32View[aIndex++] = uvs[i2];
             float32View[aIndex++] = uvs[i2 + 1];
-            uint32View[aIndex++] = modulate;
-            uint32View[aIndex++] = backgroundColor;
-            uint32View[aIndex++] = disableWrapModeInt;
+            if (modulate) {
+              const aU8Index = aIndex * 4;
+              uint8View[aU8Index] = modulate[0];
+              uint8View[aU8Index + 1] = modulate[1];
+              uint8View[aU8Index + 2] = modulate[2];
+              uint8View[aU8Index + 3] = modulate[3];
+            }
+            aIndex++;
+            if (backgroundColor) {
+              const aU8Index = aIndex * 4;
+              uint8View[aU8Index] = backgroundColor[0];
+              uint8View[aU8Index + 1] = backgroundColor[1];
+              uint8View[aU8Index + 2] = backgroundColor[2];
+              uint8View[aU8Index + 3] = backgroundColor[3];
+            }
+            aIndex++;
+            float32View[aIndex++] = disableWrapModeInt;
           }
           for (let len2 = indices.length, i2 = 0; i2 < len2; i2++) {
             indexBuffer[iIndex++] = iIndexStart + indices[i2];
@@ -5551,14 +5569,20 @@ class CanvasContext extends Path2D {
   // custom
   uvTransform;
   vertTransform;
-  _defaultStyle = Texture2D.EMPTY;
   _draws = [];
-  _toTexture(source) {
-    if (source instanceof Texture2D) {
-      return source;
-    } else {
-      return ColorTexture.get(source);
+  _parseDrawStyle(source) {
+    if (source) {
+      if (source instanceof Texture2D) {
+        return {
+          texture: source
+        };
+      } else {
+        return {
+          backgroundColor: new Color(source).toInt8Array()
+        };
+      }
     }
+    return {};
   }
   stroke(options) {
     if (!this.curves.length) {
@@ -5579,12 +5603,12 @@ class CanvasContext extends Path2D {
     }
     this._draws.push({
       ...options,
+      ...this._parseDrawStyle(strokeStyle),
       type: "stroke",
       path: new Path2D(this),
-      texture: strokeStyle ? this._toTexture(strokeStyle) : this._defaultStyle,
       uvTransform: this.uvTransform,
       vertTransform: this.vertTransform,
-      style: {
+      lineStyle: {
         alignment: this.strokeAlignment ?? 0.5,
         cap: this.lineCap ?? "butt",
         join: this.lineJoin ?? "miter",
@@ -5619,9 +5643,9 @@ class CanvasContext extends Path2D {
     }
     this._draws.push({
       ...options,
+      ...this._parseDrawStyle(fillStyle),
       type: "fill",
       path: new Path2D(this),
-      texture: fillStyle ? this._toTexture(fillStyle) : this._defaultStyle,
       uvTransform: this.uvTransform,
       vertTransform: this.vertTransform
     });
@@ -5697,17 +5721,20 @@ class CanvasContext extends Path2D {
         current.path.strokeTriangulate({
           vertices,
           indices,
-          lineStyle: current.style,
+          lineStyle: current.lineStyle,
           flipAlignment: false,
           closed: true
         });
       }
-      this.buildUvs(0, vertices, uvs, current.texture, current.uvTransform);
+      if (current.texture) {
+        this.buildUvs(0, vertices, uvs, current.texture, current.uvTransform);
+      }
       batchables.push({
         vertices: new Float32Array(vertices),
         indices: new Float32Array(indices),
         uvs: new Float32Array(uvs),
         texture: current.texture,
+        backgroundColor: current.backgroundColor,
         type: current.type,
         disableWrapMode: current.disableWrapMode,
         vertTransform: current.vertTransform
@@ -6479,7 +6506,7 @@ let CanvasItem = class extends TimelineNode {
     return batchables.map((batchable) => {
       return {
         ...batchable,
-        modulate: this._modulate.toArgb(this.globalOpacity, true),
+        modulate: this._modulate.toInt8Array(),
         blendMode: this.blendMode
       };
     });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "modern-canvas",
   "type": "module",
-  "version": "0.8.1",
+  "version": "0.8.2",
   "packageManager": "pnpm@9.15.1",
   "description": "A JavaScript WebGL rendering engine.",
   "author": "wxm",