regl-worldview - npm Package Compare versions

Comparing version 0.0.12 to 0.0.13

package.json

 {
   "name": "regl-worldview",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "description": "A reusable component for rendering 2D and 3D views using regl",
@@ -5,0 +5,0 @@ "license": "Apache-2.0",

src/commands/GLTFScene.js

@@ -12,5 +12,6 @@ // @flow
 
+import { blend, pointToVec3, orientationToVec4 } from "../utils/commandUtils";
 import parseGLB from "../utils/parseGLB";
 
-import { Command, pointToVec3, orientationToVec4, type Pose, type Scale, WorldviewReactContext } from "..";
+import { Command, type Pose, type Scale, WorldviewReactContext } from "..";
 
@@ -41,6 +42,10 @@ function glConstantToRegl(value: ?number): ?string {
     primitive: "triangles",
+    blend,
     uniforms: {
+      globalAlpha: regl.context("globalAlpha"),
+      poseMatrix: regl.context("poseMatrix"),
+
       baseColorTexture: regl.prop("baseColorTexture"),
+      baseColorFactor: regl.prop("baseColorFactor"),
       nodeMatrix: regl.prop("nodeMatrix"),
-      poseMatrix: regl.context("poseMatrix"),
       "light.direction": [0, 0, -1],
@@ -75,3 +80,5 @@ "light.ambientIntensity": 0.5,
   precision mediump float;
+  uniform float globalAlpha;
   uniform sampler2D baseColorTexture;
+  uniform vec4 baseColorFactor;
   varying mediump vec2 vTexCoord;
@@ -90,5 +97,5 @@ varying mediump vec3 vNormal;
   void main() {
-    vec3 baseColor = texture2D(baseColorTexture, vTexCoord).rgb;
+    vec4 baseColor = texture2D(baseColorTexture, vTexCoord) * baseColorFactor;
     float diffuse = light.diffuseIntensity * max(0.0, dot(vNormal, -light.direction));
-    gl_FragColor = vec4((light.ambientIntensity + diffuse) * baseColor, 1);
+    gl_FragColor = vec4((light.ambientIntensity + diffuse) * baseColor.rgb, baseColor.a * globalAlpha);
   }
@@ -98,2 +105,10 @@ `,
 
+  // default values for when baseColorTexture is not specified
+  const singleTexCoord = regl.buffer([0, 0]);
+  const whiteTexture = regl.texture({
+    data: [255, 255, 255, 255],
+    width: 1,
+    height: 1,
+  });
+
   // Build the draw calls needed to draw the model. This only needs to happen once, since they
@@ -108,15 +123,19 @@ // are the same each time, with only poseMatrix changing.
     // upload textures to the GPU
-    const textures = model.json.textures.map((textureInfo) => {
-      const sampler = model.json.samplers[textureInfo.sampler];
-      const bitmap: ImageBitmap = model.images[textureInfo.source];
-      const texture = regl.texture({
-        data: bitmap,
-        min: glConstantToRegl(sampler.minFilter),
-        mag: glConstantToRegl(sampler.magFilter),
-        wrapS: glConstantToRegl(sampler.wrapS),
-        wrapT: glConstantToRegl(sampler.wrapT),
+    const textures =
+      model.json.textures &&
+      model.json.textures.map((textureInfo) => {
+        const sampler = model.json.samplers[textureInfo.sampler];
+        const bitmap: ImageBitmap = model.images[textureInfo.source];
+        const texture = regl.texture({
+          data: bitmap,
+          min: glConstantToRegl(sampler.minFilter),
+          mag: glConstantToRegl(sampler.magFilter),
+          wrapS: glConstantToRegl(sampler.wrapS),
+          wrapT: glConstantToRegl(sampler.wrapT),
+        });
+        return texture;
       });
-      bitmap.close();
-      return texture;
-    });
+    if (model.images) {
+      model.images.forEach((bitmap: ImageBitmap) => bitmap.close());
+    }
     drawCalls = [];
@@ -133,4 +152,7 @@
           normals: model.accessors[primitive.attributes.NORMAL],
-          texCoords: model.accessors[primitive.attributes[`TEXCOORD_${texInfo.texCoord || 0}`]],
-          baseColorTexture: textures[texInfo.index],
+          texCoords: texInfo
+            ? model.accessors[primitive.attributes[`TEXCOORD_${texInfo.texCoord || 0}`]]
+            : { divisor: 1, buffer: singleTexCoord },
+          baseColorTexture: texInfo ? textures[texInfo.index] : whiteTexture,
+          baseColorFactor: material.pbrMetallicRoughness.baseColorFactor || [1, 1, 1, 1],
           nodeMatrix,
@@ -172,3 +194,3 @@ });
   // create a regl command to set the context for each draw call
-  const withPoseMatrix = regl({
+  const withContext = regl({
     context: {
@@ -182,2 +204,3 @@ poseMatrix: (context, props) =>
         ),
+      globalAlpha: (context, props) => (props.alpha == null ? 1 : props.alpha),
     },
@@ -188,3 +211,3 @@ });
     prepareDrawCallsIfNeeded(props.model);
-    withPoseMatrix(props, () => {
+    withContext(props, () => {
       command(drawCalls);
@@ -200,2 +223,3 @@ });
     scale: Scale,
+    alpha: ?number,
   |},
@@ -202,0 +226,0 @@ |};

src/utils/parseGLB.js

@@ -84,2 +84,15 @@ // @flow
     }
+    let numComponents;
+    // prettier-ignore
+    switch (accessorInfo.type) {
+      case "SCALAR": numComponents = 1; break;
+      case "VEC2": numComponents = 2; break;
+      case "VEC3": numComponents = 3; break;
+      case "VEC4": numComponents = 4; break;
+      case "MAT2": numComponents = 4; break;
+      case "MAT3": numComponents = 9; break;
+      case "MAT4": numComponents = 16; break;
+      default:
+        throw new Error(`unrecognized type ${accessorInfo.type}`);
+    }
     const bufferView = json.bufferViews[accessorInfo.bufferView];
@@ -95,3 +108,3 @@ if (bufferView.buffer !== 0) {
       binary.byteOffset + (bufferView.byteOffset || 0) + (accessorInfo.byteOffset || 0),
-      bufferView.byteLength / arrayType.BYTES_PER_ELEMENT
+      accessorInfo.count * numComponents
     );
@@ -101,11 +114,13 @@ });
   // load embedded images
-  const images = await Promise.all(
-    json.images.map((imgInfo) => {
-      const bufferView = json.bufferViews[imgInfo.bufferView];
-      const data = new DataView(binary.buffer, binary.byteOffset + bufferView.byteOffset, bufferView.byteLength);
-      return self.createImageBitmap(new Blob([data], { type: imgInfo.mimeType }));
-    })
-  );
+  const images =
+    json.images &&
+    (await Promise.all(
+      json.images.map((imgInfo) => {
+        const bufferView = json.bufferViews[imgInfo.bufferView];
+        const data = new DataView(binary.buffer, binary.byteOffset + bufferView.byteOffset, bufferView.byteLength);
+        return self.createImageBitmap(new Blob([data], { type: imgInfo.mimeType }));
+      })
+    ));
 
   return { json, accessors, images };
 }

New alerts

Unidentified License

License

(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.

Found 1 instance in 1 package

Fixed alerts

Unidentified License

License

(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2157593

increased by0.57%

Lines of code

11771

increased by1.1%

No dependency changes