Add mesh to viewport

[peiyanlu]

Can Uint8Array format GeometryStream be directly rendered onto the screen, so that components can be added separately to the viewport, similar to creating Mesh in THREE. js

I referred to the process of processing glTF binary data in GltfReader.ts and came up with the following idea, but encountered a problem when generating vertices and I am unable to handle count

export const getGraphic = async () => {
  const base64 = 'eNrjOsbIlTB3oqkrA8MJJ4YGa1c4GwiM12WsxWAD1QDZukD2Iag4hI3QCxaHs4HiQioMjEzMDEzMTCyszCysLGzsrGzsbIwM7IwsTIxsLIwMzKwMrOxaWsWlRWmJyam6xSWVOam6xiaWJka6EBCviwqMBBgYGux//6oCY5B9QhJQFyLbDnYtAJB9Nng='
  const res = await fetch(`data:application/gltf-buffer;base64,${ base64 }`)
  const bytes = new Uint8Array(await res.arrayBuffer())
  
  const buffer = new Float32Array(bytes.buffer, bytes.byteOffset, bytes.byteLength / 4)

  const pointRange = Range3d.createNull()
  for (let i = 0; i < buffer.length; i += 0) {
    pointRange.extendXYZ(buffer[i++], buffer[i++], buffer[i++])
  }
  
  const positions = new QPoint3dList(QParams3d.fromRange(pointRange))
  const scratchPoint = new Point3d()
  
  // How do I determine the value of count ？
  const count = 24
  for (let i = 0, j = 0; i < count; i++, j += 0) {
    scratchPoint.set(buffer[j++], buffer[j++], buffer[j++])
    positions.add(scratchPoint)
  }
  const points = positions.toTypedArray()

  const numPoints = points.length

  const indices = numPoints < 255
    ? new Uint8Array(numPoints)
    : (numPoints < 0xffff
        ? new Uint16Array(numPoints)
        : new Uint32Array(numPoints)
    )
  for (let i = 0; i < numPoints; i++) {
    indices[i] = i
  }


  const meshPrimitive = Mesh.create({
    displayParams: new DisplayParams(
      DisplayParams.Type.Mesh,
      ColorDef.white,
      ColorDef.white,
      1,
      LinePixels.Solid,
      FillFlags.Always,
      IModelApp.renderSystem.createRenderMaterial({
        diffuse: { color: ColorDef.white },
        specular: { color: ColorDef.white },
      }),
      undefined,
      undefined,
      undefined,
    ),
    features: undefined,
    type: Mesh.PrimitiveType.Mesh,
    range: Range3d.createNull(),
    is2d: false,
    isPlanar: false,
    hasBakedLighting: true,
    isVolumeClassifier: false,
    quantizePositions: true,
  })


  if (meshPrimitive.points instanceof QPoint3dList) {
    meshPrimitive.points.fromTypedArray(pointRange, points)
  }
  if (meshPrimitive.triangles) {
    meshPrimitive.triangles.addFromTypedArray(indices)
  }
  
  const graphic = meshPrimitive.getGraphics(IModelApp.renderSystem)
  if (graphic) {
    const branch = new GraphicBranch(true)
    branch.add(graphic)

    const matrix3d = Matrix3d.fromJSON([...])
    const transform = Transform.createOriginAndMatrix(Point3d.createZero(), matrix3d)
    
    const renderGraphic = IModelApp.renderSystem.createBranch(
      branch,
      transform,
    )

    return IModelApp.renderSystem.createGraphicOwner(renderGraphic)
  }
}

[pmconne]

A GeometryStream contains high-level geometric objects like bspline surfaces, BReps, CurveVectors, etc. The GPU can't render those directly - they have to be converted into low-level primitives like triangles and lines. That's the job of the backend tile generator.

You can use requestElementGraphics to convert a GeometryStream into something the GPU can render.

Just as a heads-up, several of the APIs in your example snippet - like Mesh and DisplayParams - are marked @internal which means they offer no stability guarantees and can be removed at any time. Prefer to use the @beta and @public APIs described in the published documentation.