3d tiles next point cloud example (tiles stored using GLB instead of PNTS)

CesiumJS
1

Hi,
I am trying to render a simple 3D Tiles point cloud using tiles stored in GLB as described in 3D Tiles Next post, but I cannot get it to render in Cesium. My dataset it very simple, it has only 3 points.

I was able to get the tileset version using pnts format, and also a version of the tileset that stores a triangle using GLB to render correctly.

Can you point me to a tileset of a point cloud that stores tiles using GLB? This will help me see what I am doing wrong.
Thanks!

2

Trying to provide some context:

3D Tiles Next is a set of draft extensions for 3D Tiles 1.0. Most of the functionalities that have been shown in these extensions are now becoming part of 3D Tiles 1.1. This means that with the latest version of 3D Tiles and CesiumJS, you should just be able to refer to the GLB file as the tile.content, and it should just be rendered.

(There currently is no dedicated sample for point clouds in the 3d-tiles-samples repository, but that is still on my ‘to do’ list. Point clouds can come in different flavors - see the Cesium Unit Tests - and I’d try to generate a representative sample here, based on different GLBs. There is one sample with a GLB that contains a point cloud from an earlier state, based on 3D Tiles 1.0 and an extension. It should still work, but has been removed for now, and will be replaced by an updated 3D Tiles 1.1 sample).

When you encouter problems with your test tileset: If you could append the whole tileset+GLB here (as a ZIP file), others could try it out and maybe find out what’s wrong there.

3

@Marco13 Thank you for the pointers! It seems that the points in my example did show up, but they were very hard to see. It seems pointSize for styling the points does not seem to work if the points are using gltf instead of pnts.
This is the example I am using for 3 points stored using gltf and 3 points stored using pnts.

https://drive.google.com/drive/folders/1wWeBVMYDg8BF9w_C7WVbubfYEmlQMd3E?usp=sharing

I include the html file I am use to style the points.
Do you have any advice on how to fix this?

Thanks,
Dan

4

Another experiment I’ve done is took jacksonville-3dtiles dataset (from the folder linked in my previous post) which shows a triangle and only changed the mode field inside the gltf file from 4 (triangle) to 0 (point).

I had to regenerate the glb file afterwards.

The triangle disappears but there are no points visible. So actually I am not sure the points are shown at all.

5

I’m not sure about the last one - one of the examples that you uploaded did contain a triangle, but apparently, with mode 4.

Regarding the other one: Indeed, it seems like the pointSize is not supported for glTF models yet ( Cesium3DTileStyle.pointSize in ModelExperimental · Issue #10046 · CesiumGS/cesium · GitHub ), so the points should be there, but may hardly be visible.

One workaround could be a custom shader…

const viewer = new Cesium.Viewer("cesiumContainer");

var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
    url : 'http://localhost:8003/test/jacksonville-3dtiles-points-gltf/jacksonville-3dtiles-points-gltf/tileset.json'
}));

function setPointStyleWithShader(tileset, pointSize, r, g, b) {
  var pointShader = new Cesium.CustomShader({
    vertexShaderText: [
      "void vertexMain(VertexInput vsInput, inout czm_modelVertexOutput vsOutput)",
      "{",
      "    vsOutput.pointSize = float(" + pointSize + ");",
      "}",
    ].join("\n"),
    fragmentShaderText: [
      "void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material)",
      "{",
      "    material.diffuse = vec3(float(" + r + "), float(" + g + "), float(" + b + "));",
      "}",
    ].join("\n"),  
  });
  tileset.customShader = pointShader;
}

setPointStyleWithShader(tileset, 10.0, 1.0, 1.0, 0.0);

viewer.zoomTo(tileset);

but that’s clumsy…

1 Like
6

@danlipsa as @Marco13 pointed out, pointSize in styling is not yet supported in ModelExperimental.

However, if you’re just trying to get the points to show up, point cloud attenuation is another option. Set

tileset.pointCloudShading.attenuation = true;

There are other parameters to adjust the size of the points. Please see the docs and the Point Cloud Shading Sandcastle for more information.

1 Like
7

@ptrgags That did it! Now I can see the points. I’ll check out the example to see other shading parameters.

Thank you guys!
Best,
Dan

1 Like