Modify custom primitive's color buffer

I've created a custom primitive with a couple of hundred thousand triangles.

Something like:

   var triangles = 2000000;

   var positions = new Float64Array(triangles * 3 * 3);
   var normals = new Float32Array(triangles * 3 * 3);
   var colors = new Float32Array(triangles * 3 * 3);

   /// ... fill in the buffers

   var instance = new GeometryInstance({
      geometry : new Geometry({
          attributes : {
            position : new GeometryAttribute({
               componentDatatype : ComponentDatatype.DOUBLE,
               componentsPerAttribute : 3,
               values : positions,
               normalize: false
            }),
            color : new GeometryAttribute({
              componentDatatype : ComponentDatatype.FLOAT,
              componentsPerAttribute : 3,
              values : colors,
              normalize: false
           }),
            normal : new GeometryAttribute({
               componentDatatype : ComponentDatatype.FLOAT,
               componentsPerAttribute : 3,
               values : normals,
               normalize: false
            })
         },
         primitiveType : PrimitiveType.TRIANGLES,
         boundingSphere : BoundingSphere.fromVertices(positions),
      })
   });
   var primitive = new Primitive({
      geometryInstances : instance,
      appearance : new PerInstanceColorAppearance({
         translucent : false
      })
   });

   viewer.scene.primitives.add(primitive);

At a later time, I am in need of updating the color buffer to a different set of colors.

  So I go:

   var triangles = 2000000;

   var colors = new Float32Array(triangles * 3 * 3);

   /// ... fill in the color buffer with new colors

   primitive._vaAttributes[0][primitive._attributeLocations.color].vertexBuffer.copyFromArrayView(colors.buffer, 0);

And it does not work.

   Any help appreciated.

Hi,

I can’t recommend reaching into _vaAttributes since it is an implementation detail that may change in the future. Perhaps recreate the geometry and primitive (use “asynchronous : false”) in the primitive constructor each time a color change is needed. If that is not fast enough, consider creating separate geometries (but still one primitive) and then following the example in “Updating Per-Instance Attributes” in the tutorial.

Patrick

Hi Patrick,

My current solution involves recreating the geometry. Although it flickers. I will try to make it synchronous as suggested to avoid flickering. I am not sure if it will be a viable option for when the colours will vary with time.

I can give per instance attribute thing a go but I am not sure if it will be a very good option for me. I am drawing a massive number of triangles to visualise the surface of massive structured grids with masked out empty regions. The grids are irregular and colors vary cell to cell. I am only rendering the faces and even if I was to draw each face of the grid with a rectangle, I would still need hundreds of thousands of geometries per primitive. I would have thought that was a lot of objects and updates to have inside JavaScript.

Is there no way to simply update the color array for the vertices? Or are there better solutions for what I am trying to achieve?

Cheers

Keep an eye on #932. This will be the solution you want, but it is at least a few months out.

Patrick