Support for cameras stored in the GLB file (playcanvas#3354)

mvaligursky · Martin Valigursky · willeastcott · web-flow · commit 8aa699d4edfc · 2021-08-12T02:48:52.000-07:00
* Support for cameras stored in the GLB file

* Update examples/src/examples/loaders/glb.tsx

Co-authored-by: Will Eastcott &lt;will@playcanvas.com&gt;

Co-authored-by: Martin Valigursky &lt;mvaligursky@snapchat.com&gt;
Co-authored-by: Will Eastcott &lt;will@playcanvas.com&gt;
diff --git a/examples/assets/models/geometry-camera-light.glb b/examples/assets/models/geometry-camera-light.glb
diff --git a/examples/src/examples/loaders/glb.tsx b/examples/src/examples/loaders/glb.tsx
@@ -8,41 +8,46 @@ class GLBExample extends Example {
     // @ts-ignore: override class function
     example(canvas: HTMLCanvasElement): void {
 
+        // The example demonstrates loading of glb file, which contains meshes,
+        // lights and cameras, and switches between the cameras every 2 seconds.
+
         // Create the app and start the update loop
         const app = new pc.Application(canvas, {});
 
-        app.scene.ambientLight = new pc.Color(0.2, 0.2, 0.2);
+        // the array will store loaded cameras
+        let camerasComponents: Array<pc.CameraComponent> = null;
 
         // Load a glb file as a container
-        const url = "static/assets/models/playcanvas-cube.glb";
+        const url = "static/assets/models/geometry-camera-light.glb";
         app.assets.loadFromUrl(url, "container", function (err, asset) {
             app.start();
 
             // create an instance using render component
-            const entity = asset.resource.instantiateRenderEntity({
-                castShadows: true
-            });
+            const entity = asset.resource.instantiateRenderEntity();
             app.root.addChild(entity);
 
-            // Create an Entity with a camera component
-            const camera = new pc.Entity();
-            camera.addComponent("camera", {
-                clearColor: new pc.Color(0.2, 0.2, 0.2)
-            });
-            camera.translate(0, 0, 4);
-            app.root.addChild(camera);
-
-            // Create an entity with a omni light component
-            const light = new pc.Entity();
-            light.addComponent("light", {
-                type: "omni"
+            // find all cameras - by default there are disabled
+            // set their aspect ratio to automatic to work with any window size
+            camerasComponents = entity.findComponents("camera");
+            camerasComponents.forEach((component) => {
+                component.aspectRatioMode = pc.ASPECT_AUTO;
             });
-            light.setLocalPosition(1, 1, 5);
-            app.root.addChild(light);
 
+            let time = 0;
+            let activeCamera = 0;
             app.on("update", function (dt) {
-                if (entity) {
-                    entity.rotate(4 * dt, -20 * dt, 0);
+                time -= dt;
+
+                // change the camera every few seconds 
+                if (time <= 0) {
+                    time = 2;
+
+                    // disable current camera
+                    camerasComponents[activeCamera].enabled = false;
+
+                    // activate next camera
+                    activeCamera = (activeCamera + 1) % camerasComponents.length;
+                    camerasComponents[activeCamera].enabled = true;
                 }
             });
         });
diff --git a/src/resources/container.js b/src/resources/container.js
@@ -152,12 +152,22 @@ class ContainerResource {
                     }
 
                     // light - clone (additional child) entity with the light component
+                    // cannot clone the component as additional entity has a rotation to handle different light direction
                     if (glb.lights) {
                         const lightEntity = glb.lights.get(gltfNode);
                         if (lightEntity) {
                             entity.addChild(lightEntity.clone());
                         }
                     }
+
+                    // camera
+                    if (glb.cameras) {
+                        const cameraEntity = glb.cameras.get(gltfNode);
+                        if (cameraEntity) {
+                            // clone camera component into the entity
+                            cameraEntity.camera.system.cloneComponent(cameraEntity, entity);
+                        }
+                    }
                 }
             }
 
@@ -333,6 +343,7 @@ class ContainerResource {
  * | global      |      x      |             |             |      x      |
  * | node        |      x      |      x      |             |      x      |
  * | light       |      x      |      x      |             |      x      |
+ * | camera      |      x      |      x      |             |      x      |
  * | animation   |      x      |             |             |      x      |
  * | material    |      x      |      x      |             |      x      |
  * | image       |      x      |             |      x      |      x      |
diff --git a/src/resources/parser/glb-parser.js b/src/resources/parser/glb-parser.js
@@ -27,7 +27,9 @@ import { VertexBuffer } from '../../graphics/vertex-buffer.js';
 import { VertexFormat } from '../../graphics/vertex-format.js';
 
 import {
-    BLEND_NONE, BLEND_NORMAL, LIGHTFALLOFF_INVERSESQUARED
+    BLEND_NONE, BLEND_NORMAL, LIGHTFALLOFF_INVERSESQUARED,
+    PROJECTION_ORTHOGRAPHIC, PROJECTION_PERSPECTIVE,
+    ASPECT_MANUAL, ASPECT_AUTO
 } from '../../scene/constants.js';
 import { calculateNormals } from '../../scene/procedural.js';
 import { GraphNode } from '../../scene/graph-node.js';
@@ -61,6 +63,7 @@ class GlbResources {
         this.renders = null;
         this.skins = null;
         this.lights = null;
+        this.cameras = null;
     }
 
     destroy() {
@@ -1398,6 +1401,42 @@ const createNode = function (gltfNode, nodeIndex) {
     return entity;
 };
 
+// creates a camera component on the supplied node, and returns it
+const createCamera = function (gltfCamera, node) {
+
+    const projection = gltfCamera.type === "orthographic" ? PROJECTION_ORTHOGRAPHIC : PROJECTION_PERSPECTIVE;
+    const gltfProperties = projection === PROJECTION_ORTHOGRAPHIC ? gltfCamera.orthographic : gltfCamera.perspective;
+
+    const componentData = {
+        enabled: false,
+        projection: projection,
+        nearClip: gltfProperties.znear,
+        aspectRatioMode: ASPECT_AUTO
+    };
+
+    if (gltfProperties.zfar) {
+        componentData.farClip = gltfProperties.zfar;
+    }
+
+    if (projection === PROJECTION_ORTHOGRAPHIC) {
+        componentData.orthoHeight = 0.5 * gltfProperties.ymag;
+        if (gltfProperties.ymag) {
+            componentData.aspectRatioMode = ASPECT_MANUAL;
+            componentData.aspectRatio = gltfProperties.xmag / gltfProperties.ymag;
+        }
+    } else {
+        componentData.fov = gltfProperties.yfov * math.RAD_TO_DEG;
+        if (gltfProperties.aspectRatio) {
+            componentData.aspectRatioMode = ASPECT_MANUAL;
+            componentData.aspectRatio = gltfProperties.aspectRatio;
+        }
+    }
+
+    const cameraEntity = new Entity(gltfCamera.name);
+    cameraEntity.addComponent("camera", componentData);
+    return cameraEntity;
+};
+
 // creates light component, adds it to the node and returns the created light component
 const createLight = function (gltfLight, node) {
 
@@ -1421,13 +1460,12 @@ const createLight = function (gltfLight, node) {
 
     // Rotate to match light orientation in glTF specification
     // Note that this adds a new entity node into the hierarchy that does not exist in the gltf hierarchy
-    var lightNode = new Entity(node.name);
-    lightNode.rotateLocal(90, 0, 0);
+    const lightEntity = new Entity(node.name);
+    lightEntity.rotateLocal(90, 0, 0);
 
     // add component
-    lightNode.addComponent("light", lightProps);
-
-    return lightNode;
+    lightEntity.addComponent("light", lightProps);
+    return lightEntity;
 };
 
 const createSkins = function (device, gltf, nodes, bufferViews) {
@@ -1563,6 +1601,41 @@ const createScenes = function (gltf, nodes) {
     return scenes;
 };
 
+const createCameras = function (gltf, nodes, options) {
+
+    let cameras = null;
+
+    if (gltf.hasOwnProperty('nodes') && gltf.hasOwnProperty('cameras') && gltf.cameras.length > 0) {
+
+        const preprocess = options && options.camera && options.camera.preprocess;
+        const process = options && options.camera && options.camera.process || createCamera;
+        const postprocess = options && options.camera && options.camera.postprocess;
+
+        gltf.nodes.forEach(function (gltfNode, nodeIndex) {
+            if (gltfNode.hasOwnProperty('camera')) {
+                const gltfCamera = gltf.cameras[gltfNode.camera];
+                if (gltfCamera) {
+                    if (preprocess) {
+                        preprocess(gltfCamera);
+                    }
+                    const camera = process(gltfCamera, nodes[nodeIndex]);
+                    if (postprocess) {
+                        postprocess(gltfCamera, camera);
+                    }
+
+                    // add the camera to node->camera map
+                    if (camera) {
+                        if (!cameras) cameras = new Map();
+                        cameras.set(gltfNode, camera);
+                    }
+                }
+            }
+        });
+    }
+
+    return cameras;
+};
+
 const createLights = function (gltf, nodes, options) {
 
     let lights = null;
@@ -1637,6 +1710,7 @@ const createResources = function (device, gltf, bufferViews, textureAssets, opti
     const nodes = createNodes(gltf, options);
     const scenes = createScenes(gltf, nodes);
     const lights = createLights(gltf, nodes, options);
+    const cameras = createCameras(gltf, nodes, options);
     const animations = createAnimations(gltf, nodes, bufferViews, options);
     const materials = createMaterials(gltf, textureAssets.map(function (textureAsset) {
         return textureAsset.resource;
@@ -1663,6 +1737,7 @@ const createResources = function (device, gltf, bufferViews, textureAssets, opti
     result.renders = renders;
     result.skins = skins;
     result.lights = lights;
+    result.cameras = cameras;
 
     if (postprocess) {
         postprocess(gltf, result);

Original file line number	Diff line number	Diff line change
`@@ -152,12 +152,22 @@ class ContainerResource {`
`152`	`152`	`}`
`153`	`153`
`154`	`154`	`// light - clone (additional child) entity with the light component`
	`155`	`+ // cannot clone the component as additional entity has a rotation to handle different light direction`
`155`	`156`	`if (glb.lights) {`
`156`	`157`	`const lightEntity = glb.lights.get(gltfNode);`
`157`	`158`	`if (lightEntity) {`
`158`	`159`	`entity.addChild(lightEntity.clone());`
`159`	`160`	`}`
`160`	`161`	`}`
	`162`	`+`
	`163`	`+ // camera`
	`164`	`+ if (glb.cameras) {`
	`165`	`+ const cameraEntity = glb.cameras.get(gltfNode);`
	`166`	`+ if (cameraEntity) {`
	`167`	`+ // clone camera component into the entity`
	`168`	`+ cameraEntity.camera.system.cloneComponent(cameraEntity, entity);`
	`169`	`+ }`
	`170`	`+ }`
`161`	`171`	`}`
`162`	`172`	`}`
`163`	`173`
`@@ -333,6 +343,7 @@ class ContainerResource {`
`333`	`343`	`* \| global \| x \| \| \| x \|`
`334`	`344`	`* \| node \| x \| x \| \| x \|`
`335`	`345`	`* \| light \| x \| x \| \| x \|`
	`346`	`+ * \| camera \| x \| x \| \| x \|`
`336`	`347`	`* \| animation \| x \| \| \| x \|`
`337`	`348`	`* \| material \| x \| x \| \| x \|`
`338`	`349`	`* \| image \| x \| \| x \| x \|`