poppygl 0.0.13 → 0.0.14

package/dist/index.d.ts

@@ -13,6 +13,8 @@ declare const createUint8Bitmap: ImageFactory;
 interface Material {
     baseColorFactor: [number, number, number, number];
     baseColorTexture: BitmapLike | null;
+    alphaMode?: "OPAQUE" | "MASK" | "BLEND";
+    alphaCutoff?: number;
 }
 interface DrawCall {
     positions: Float32Array;

package/dist/index.js

@@ -544,6 +544,13 @@ var SoftwareRenderer = class {
           let g = baseColor[1] * lit;
           let b = baseColor[2] * lit;
           let a = baseColor[3];
+          const alphaMode = material.alphaMode ?? "OPAQUE";
+          const alphaCutoff = material.alphaCutoff ?? 0.5;
+          if (alphaMode === "MASK" && a < alphaCutoff) continue;
+          const shouldWriteDepth = alphaMode !== "BLEND";
+          if (shouldWriteDepth) {
+            depth[di] = z01;
+          }
           if (gammaOut) {
             r = srgbEncodeLinear01(clamp(r, 0, 1));
             g = srgbEncodeLinear01(clamp(g, 0, 1));
@@ -553,13 +560,29 @@ var SoftwareRenderer = class {
             g = clamp(g, 0, 1);
             b = clamp(b, 0, 1);
           }
+          const dstIdx = (y * this.width + x) * 4;
+          const dstR = (this.buffer[dstIdx + 0] ?? 0) / 255;
+          const dstG = (this.buffer[dstIdx + 1] ?? 0) / 255;
+          const dstB = (this.buffer[dstIdx + 2] ?? 0) / 255;
+          const dstA = (this.buffer[dstIdx + 3] ?? 0) / 255;
+          let outR = r;
+          let outG = g;
+          let outB = b;
+          let outA = a;
+          if (alphaMode === "BLEND" && a < 1) {
+            const oneMinusA = 1 - a;
+            outR = r * a + dstR * oneMinusA;
+            outG = g * a + dstG * oneMinusA;
+            outB = b * a + dstB * oneMinusA;
+            outA = a + dstA * oneMinusA;
+          }
           this.setPixel(
             x,
             y,
-            r * 255 | 0,
-            g * 255 | 0,
-            b * 255 | 0,
-            clamp(a, 0, 1) * 255 | 0
+            clamp(outR, 0, 1) * 255 | 0,
+            clamp(outG, 0, 1) * 255 | 0,
+            clamp(outB, 0, 1) * 255 | 0,
+            clamp(outA, 0, 1) * 255 | 0
           );
         }
       }
@@ -635,20 +658,34 @@ function renderDrawCalls(drawCalls, optionsInput = {}, imageFactory = createUint
     };
     allDrawCalls.push(createGrid(finalGridOptions));
   }
-  for (const dc of allDrawCalls) {
-    if (dc.mode === 1) {
-      renderer.drawLines(dc, camera, options.gamma);
-    } else {
-      renderer.drawMesh(
-        dc,
-        camera,
-        { dir: options.lightDir, ambient: options.ambient },
-        dc.material,
-        options.cull,
-        options.gamma
-      );
+  const opaqueDraws = allDrawCalls.filter(
+    (dc) => (dc.material.alphaMode ?? "OPAQUE") === "OPAQUE"
+  );
+  const maskDraws = allDrawCalls.filter(
+    (dc) => (dc.material.alphaMode ?? "OPAQUE") === "MASK"
+  );
+  const blendDraws = allDrawCalls.filter(
+    (dc) => (dc.material.alphaMode ?? "OPAQUE") === "BLEND"
+  );
+  const renderGroup = (dcs) => {
+    for (const dc of dcs) {
+      if (dc.mode === 1) {
+        renderer.drawLines(dc, camera, options.gamma);
+      } else {
+        renderer.drawMesh(
+          dc,
+          camera,
+          { dir: options.lightDir, ambient: options.ambient },
+          dc.material,
+          options.cull,
+          options.gamma
+        );
+      }
     }
-  }
+  };
+  renderGroup(opaqueDraws);
+  renderGroup(maskDraws);
+  renderGroup(blendDraws);
   return { bitmap: renderer.bitmap, camera, options };
 }
 
@@ -877,7 +914,14 @@ function getMaterial(gltf, textures, images, materialIndex) {
       texImg = images[imageIndex] || null;
     }
   }
-  return { baseColorFactor: factor, baseColorTexture: texImg };
+  const alphaMode = typeof material.alphaMode === "string" ? material.alphaMode : "OPAQUE";
+  const alphaCutoff = typeof material.alphaCutoff === "number" ? material.alphaCutoff : 0.5;
+  return {
+    baseColorFactor: factor,
+    baseColorTexture: texImg,
+    alphaMode,
+    alphaCutoff
+  };
 }
 function createSceneFromGLTF(gltf, resources) {
   const ctx = { gltf, buffers: resources.buffers };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "poppygl",
   "main": "dist/index.js",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "repository": {
     "type": "git",
     "url": "https://github.com/tscircuit/poppygl.git"