Skip to content
This repository was archived by the owner on Nov 1, 2024. It is now read-only.

Hints from Alan Rynne to connect Speckle to Cesium #3

Open
olange opened this issue Feb 3, 2024 · 4 comments
Open

Hints from Alan Rynne to connect Speckle to Cesium #3

olange opened this issue Feb 3, 2024 · 4 comments

Comments

@olange
Copy link
Member

olange commented Feb 3, 2024

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

Links

@olange olange changed the title Hints from Speckle to connect to Cesium Hints from Alan Rynne to connect Speckle to Cesium Feb 3, 2024
@loleg
Copy link

loleg commented Feb 3, 2024

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
Copy link

loleg commented Feb 3, 2024

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
Copy link

loleg commented Feb 3, 2024

image

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
Copy link

Masty88 commented Feb 6, 2024

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

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants