Load point cloud in CesiumJS with loaders.gl (#485)

examples/cesium/3d-tiles/app.js

@@ -11,18 +11,24 @@ registerLoaders([DracoLoader]);
 Cesium.Ion.defaultAccessToken =
   'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJlYWMxMzcyYy0zZjJkLTQwODctODNlNi01MDRkZmMzMjIxOWIiLCJpZCI6OTYyMCwic2NvcGVzIjpbImFzbCIsImFzciIsImdjIl0sImlhdCI6MTU2Mjg2NjI3M30.1FNiClUyk00YH_nWfSGpiQAjR5V2OvREDq1PJ5QMjWQ';
 
-// const TILESET_URL =
-//   'https://raw.githubusercontent.com/uber-web/loaders.gl/master/modules/3d-tiles/test/data/Batched/BatchedColorsMix/tileset.json';
 const MELBOURNE_ION_ASSET_ID = 43978;
 
 const viewer = new Cesium.Viewer('cesiumContainer');
-const tileset = viewer.scene.primitives.add(
-  new Cesium.Cesium3DTileset({
-    url: Cesium.IonResource.fromAssetId(MELBOURNE_ION_ASSET_ID)
-  })
-);
 
-viewer.zoomTo(tileset);
+// const tileset = viewer.scene.primitives.add(
+//   new Cesium.Cesium3DTileset({
+//     url: Cesium.IonResource.fromAssetId(MELBOURNE_ION_ASSET_ID)
+//   })
+// );
+
+viewer.camera.flyTo({
+  destination: new Cesium.Cartesian3(-4129177.4436845127, 2897358.104762894, -3895489.035314936),
+  orientation: {
+    direction: new Cesium.Cartesian3(-0.13038111167390576, 0.09148571979975412, 0.9872340800394797),
+    up: new Cesium.Cartesian3(-0.8081356152768331, 0.5670519871339241, -0.1592760848608561)
+  },
+  duration: 3
+});
 
 loadTileset({
   ionAssetId: MELBOURNE_ION_ASSET_ID,
@@ -41,7 +47,7 @@ async function loadTileset({tilesetUrl, ionAssetId, ionAccessToken}) {
   const tilesetJson = await response.json();
 
   const tileset3d = new Tileset3D(tilesetJson, tilesetUrl, {
-    onTileLoad: tileHeader => console.log('Load', tileHeader.uri), // eslint-disable-line
+    onTileLoad: tileHeader => loadPnts(tileHeader.uri, tileHeader), // eslint-disable-line
     onTileUnload: tileHeader => console.log('Unload', tileHeader.uri), // eslint-disable-line
     onTileLoadFailed: tileHeader => console.error('LoadFailed', tileHeader.uri), // eslint-disable-line
     fetchOptions,
@@ -54,6 +60,66 @@ async function loadTileset({tilesetUrl, ionAssetId, ionAccessToken}) {
   });
 }
 
+function loadPnts(pntsUrl, tileHeader) {
+  const center = tileHeader.boundingVolume.center;
+  const halfAxes = tileHeader.boundingVolume.halfAxes;
+
+  const boundingVolume = new Cesium.TileOrientedBoundingBox(
+    new Cesium.Cartesian3(center.x, center.y, center.z),
+    Cesium.Matrix3.fromColumnMajorArray(halfAxes)
+  );
+
+  const boundingSphere = boundingVolume._boundingSphere;
+  const computedTransform = Cesium.Matrix4.fromColumnMajorArray(tileHeader.computedTransform);
+
+  Cesium.Resource.fetchArrayBuffer(pntsUrl).then(function(arrayBuffer) {
+    const pointCloud = new Cesium.PointCloud({
+      arrayBuffer,
+      byteOffset: 0,
+      cull: false,
+      opaquePass: Cesium.Pass.CESIUM_3D_TILE,
+      vertexShaderLoaded: getVertexShaderLoaded(),
+      fragmentShaderLoaded: getFragmentShaderLoaded(),
+      uniformMapLoaded: getUniformMapLoaded(),
+      batchTableLoaded: getBatchTableLoaded(),
+      pickIdLoaded: getPickIdLoaded()
+    });
+
+    viewer.scene.primitives.add(pointCloud);
+
+    pointCloud.boundingSphere = boundingSphere;
+    pointCloud.modelMatrix = computedTransform;
+  });
+}
+
+function getPickIdLoaded() {
+  return function() {
+    return 'czm_pickColor';
+  };
+}
+
+function getUniformMapLoaded() {
+  return function(uniformMap) {
+    return uniformMap;
+  };
+}
+
+function getFragmentShaderLoaded() {
+  return function(fs) {
+    return `uniform vec4 czm_pickColor;\n${fs}`;
+  };
+}
+
+function getVertexShaderLoaded() {
+  return function(vs) {
+    return vs;
+  };
+}
+
+function getBatchTableLoaded() {
+  return function(batchLength, batchTableJson, batchTableBinary) {};
+}
+
 function convertCesiumFrameState(frameState, height) {
   let cameraPosition = frameState.camera.position;
   cameraPosition = new Vector3([cameraPosition.x, cameraPosition.y, cameraPosition.z]);