Hints from Alan Rynne to connect Speckle to Cesium

[olange]

Goals

1. Create an account with Speckle.xyz, a new stream and import any Cesium IFC file.
2. Try to read the stream with @speckle/objectloader package
3. See how we can blend this in our IFCDataSource source code within the ‹cesium-ifc-viewer› component
4. Bonus: updated the view when the component changes

Useful resources

• https://www.npmjs.com/package/@speckle/objectloader ⟵ Speckle ObjectLoader package to read contents of a Stream available from Speckle back-end and use it in either a browser (which we want) or Node.js
• https://speckle.xyz/graphql ⟵ allows to interrogate Speckle for the data model of our stream
• https://github.com/specklesystems/speckle-sharp/blob/main/Objects/Objects/Geometry/Mesh.cs ⟵ sample Mesh object of the Speckle data model
• https://speckle.xyz/streams/e6fa820fdd/webhooks ⟵ if we want our back-end to be informed of changes to a stream — but we want our front-end to be informed of changes, as we don't rely on a back-end…
• wss://speckle.xyz/graphql (Subscriptions › CommitCreated) ⟵ and for this, GraphQL Subscriptions come to play

Links

• Speckle › Alan Rynne (LinkedIn)

[loleg]

Here's a bit of GraphQL that might help:

{
"operationName":"Object",
"variables":{"streamId":"b58e33b830","id":"03ed008756c7c980205bf196db5ee8f0"},
"query": query Object($streamId: String!, $id: String!) {
  stream(id: $streamId) {
    id
    object(id: $id) {
      totalChildrenCount
      id
      speckleType
      data
      __typename
    }
    __typename
    }
  }
}

Alternatively:

query Object($streamId: String!, $id: String!) {
  stream(id: $streamId) {
    id
    object(id: $id) {
      totalChildrenCount
      id
      speckleType
      data
      __typename
    }
  __typename
  }
}

{
  "streamId":"e6fa820fdd",
	"id":"03ed008756c7c980205bf196db5ee8f0"
}

[loleg]

I would look also specifically at SpeckleLoader class

… as well as the SpeckleConverter and more importantly the SpeckleRenderer …

https://github.com/specklesystems/speckle-server/blob/main/packages/viewer/src/modules/loaders/Speckle/SpeckleConverter.ts

https://github.com/specklesystems/speckle-server/blob/9628a8a5169db4d3baa22cabf6bd1242acca7fa5/packages/viewer/src/modules/SpeckleRenderer.ts

… and even more importantly the thing that rules all the others, the Viewer itself …

https://github.com/specklesystems/speckle-server/blob/main/packages/viewer/src/modules/Viewer.ts#L300

… but from there, we're lost: have no idea where we could grab the geometries that we could forward to Cesium.

[loleg]

This is where I get stuck trying to run the viewer-sandbox after making sure the whole project has properly compiled, including the viewer - and I've tried adding it explicitly as a project dependency as well.

[Masty88]

I actually manage to create a gltf from the ifc data that we receive from speckle!
this code help me:
https://github.com/specklesystems/speckleserver/blob/a793dc433a35de7c9834bb4d454f9f4c853cbd40/packages/viewer/src/modules/Converter.js#L25-L74

Key Steps and Hints:

Retrieve JSON Data from Speckle:

The process begins with fetching JSON data from Speckle, which includes geometry and associated metadata.
Traverse Objects to Store obcjet with @displayValues:

Iterate through the retrieved objects to identify and store those that have a 'display value'.
These 'display values' typically contain the necessary information to visualize the objects in 3D.
Process Objects with Geometry and Decompose Faces and Vertices Arrays:

For objects that contain geometry, decompose the arrays of faces and vertices.
Understand the meaning of 1 and 0 in the faces array: 1 typically indicates a quadrangular face, while 0 indicates a triangular face.
Convert quadrangular faces to triangular ones if necessary, as Three.js predominantly uses triangles.
Temporary Addition of Mesh to Three.js Scene and glTF Export for Verification:

Temporarily add the created meshes to a Three.js scene. This step is crucial for visual verification of the geometry.
Export the scene to a glTF format to check the accuracy and integrity of the 3D models.

Next Steps:

Create an IFC Tree Structure:

The next phase involves creating an IFC (Industry Foundation Classes) tree structure.
Each part of the mesh should be assigned properties derived from the corresponding Speckle object, possibly using GraphQL to fetch these properties.
Import glTF into Cesium via DataSource:

Import the generated glTF into Cesium, a platform for visualizing 3D geospatial data.
Utilize Cesium's DataSource to integrate the glTF, enabling the visualization of the 3D models within a geospatial context.

https://www.loom.com/share/41642ffaa70448c5a71837adb324ca2d?sid=ebb09f89-1938-427e-9f9a-1d566c1b296a