GLTFScene: basic support for KHR_materials_pbrSpecularGlossiness (copy #625)

.circleci/config.yml

@@ -8,10 +8,23 @@ version: 2
 jobs:
   build:
     machine: true
+    environment:
+      - GIT_LFS_SKIP_SMUDGE: 1
 
     steps:
       - checkout
 
+      # Caching LFS assets, e.g. glb files. https://mflash.dev/blog/2020/09/05/using-git-lfs-in-ci/
+      - run: git lfs ls-files -l | cut -d' ' -f1 | sort > .lfs-assets-id
+      - restore_cache:
+          keys:
+            - v1-lfscache-{{ checksum ".lfs-assets-id" }}
+            - v1-lfscache-
+      - run: git lfs pull
+      - save_cache:
+          paths:
+            - .git/lfs
+          key: v1-lfscache-{{ checksum ".lfs-assets-id" }}
       - restore_cache:
           keys:
             - global-deps-{{ checksum "package-lock.json" }}

.gitattributes

@@ -0,0 +1 @@
+common/fixtures/SpecGlossVsMetalRough.glb filter=lfs diff=lfs merge=lfs -text

Dockerfile-webviz-ci

@@ -13,12 +13,16 @@ FROM node:10.22-slim
 # https://circleci.com/docs/2.0/custom-images/#required-tools-for-primary-containers
 RUN apt-get update && apt-get install -yq gnupg libgconf-2-4 wget git ssh --no-install-recommends
 
+RUN curl -s https://packagecloud.io/install/repositories/github/git-lfs/script.deb.sh | sudo bash \
+  && sudo apt-get install git-lfs \
+  && git lfs install
+
 # Install Google Chrome for Puppeteer.
 # https://github.com/GoogleChrome/puppeteer/blob/master/docs/troubleshooting.md#running-puppeteer-in-docker
 RUN wget --no-check-certificate -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add - \
-    && sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list' \
-    && apt-get update \
-    && apt-get install -y google-chrome-stable fonts-ipafont-gothic fonts-wqy-zenhei fonts-thai-tlwg fonts-kacst fonts-freefont-ttf --no-install-recommends
+  && sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list' \
+  && apt-get update \
+  && apt-get install -y google-chrome-stable fonts-ipafont-gothic fonts-wqy-zenhei fonts-thai-tlwg fonts-kacst fonts-freefont-ttf --no-install-recommends
 ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true
 
 ENV WEBVIZ_IN_DOCKER=true

packages/regl-worldview/src/commands/GLTFScene.js

@@ -147,8 +147,8 @@ const drawModel = (regl) => {
           data: bitmap,
           min: glConstantToRegl(sampler.minFilter),
           mag: glConstantToRegl(sampler.magFilter),
-          wrapS: glConstantToRegl(sampler.wrapS),
-          wrapT: glConstantToRegl(sampler.wrapT),
+          wrapS: sampler.wrapS ? glConstantToRegl(sampler.wrapS) : "repeat",
+          wrapT: sampler.wrapT ? glConstantToRegl(sampler.wrapT) : "repeat",
         });
         return texture;
       });
@@ -160,11 +160,24 @@ const drawModel = (regl) => {
     // helper to draw the primitives comprising a mesh
     function drawMesh(mesh, nodeMatrix) {
       for (const primitive of mesh.primitives) {
-        const material = model.json.materials[primitive.material];
-        const texInfo = material.pbrMetallicRoughness.baseColorTexture;
         if (!accessors) {
           throw new Error("Error decoding GLB model: Missing `accessors` in JSON data");
         }
+        const material = model.json.materials[primitive.material];
+        let texInfo;
+        let baseColorFactor = [1, 1, 1, 1];
+        if (
+          material.extensions?.KHR_materials_pbrSpecularGlossiness?.diffuseTexture ||
+          material.extensions?.KHR_materials_pbrSpecularGlossiness?.diffuseFactor
+        ) {
+          // https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_materials_pbrSpecularGlossiness
+          // Simply use the diffuse color as the base color, and ignore the specular color
+          texInfo = material.extensions.KHR_materials_pbrSpecularGlossiness.diffuseTexture;
+          baseColorFactor = material.extensions.KHR_materials_pbrSpecularGlossiness.diffuseFactor || baseColorFactor;
+        } else if (material.pbrMetallicRoughness) {
+          texInfo = material.pbrMetallicRoughness.baseColorTexture;
+          baseColorFactor = material.pbrMetallicRoughness.baseColorFactor || baseColorFactor;
+        }
         drawCalls.push({
           indices: accessors[primitive.indices],
           positions: accessors[primitive.attributes.POSITION],
@@ -173,7 +186,7 @@ const drawModel = (regl) => {
             ? 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],
+          baseColorFactor,
           nodeMatrix,
         });
       }

packages/regl-worldview/src/stories/GLTFScene.stories.js

@@ -53,4 +53,28 @@ storiesOf("Worldview/GLTFScene", module)
         </GLTFScene>
       </Worldview>
     );
+  })
+  .add("Support for KHR_materials_pbrSpecularGlossiness extension", () => {
+    const model = require("common/fixtures/SpecGlossVsMetalRough.glb");
+    return (
+      <Worldview
+        defaultCameraState={{
+          distance: 4,
+          thetaOffset: (-3 * Math.PI) / 4,
+          phi: Math.PI / 3,
+          targetOffset: [0, 3, 0],
+        }}>
+        <Axes />
+        <Grid />
+        <GLTFScene model={model}>
+          {{
+            pose: {
+              position: { x: 0, y: 3, z: 0 },
+              orientation: { x: 0, y: 0, z: 1, w: 0 },
+            },
+            scale: { x: 7, y: 7, z: 7 },
+          }}
+        </GLTFScene>
+      </Worldview>
+    );
   });

packages/regl-worldview/src/utils/parseGLB.js

@@ -122,7 +122,11 @@ export default async function parseGLB(arrayBuffer: ArrayBuffer): Promise<GLBMod
     (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);
+        const data = new DataView(
+          binary.buffer,
+          binary.byteOffset + (bufferView.byteOffset || 0),
+          bufferView.byteLength
+        );
         return self.createImageBitmap(new Blob([data], { type: imgInfo.mimeType }));
       })
     ));

packages/webviz-core/src/util/binaryObjects/binaryTranslation/Dockerfile

@@ -9,3 +9,6 @@ FROM trzeci/emscripten:1.39.17-upstream
 RUN apt-get update
 RUN apt-get -y install clang-format clang-tidy
 
+RUN curl -s https://packagecloud.io/install/repositories/github/git-lfs/script.deb.sh | sudo bash \
+  && sudo apt-get install git-lfs \
+  && git lfs install