BufferGeometryUtils.mergeBufferGeometries does not render merged colors

Hello everyone, I was earlier working with realtime merging of PCD files in THREE.JS. I was advised to use BufferGeometryUtils.mergeBufferGeometries, which merged the 2 geometries. The problem I now am facing is that these 2 geometries have different color values to them and I am not able to see any colors in the new “merged geometry” created. If I supply new materials with color values it colors the whole geometry with the same color (which is obvious).

Bit hard to help without seeing neither the code, geometries, or the final result :smiling_face_with_tear:

Sorry for that, I’ll just post a screenshot of the result and the code snippet as well.

1 Like

need to move materials group also to new mesh

can you please quote a small example for this?

Here is the code snippet:
`loader.load(‘./arma_Red.pcd’,function(points){
points.geometry.center();
points.geometry.translate(50,0,0);
var pcd1 = points
loader.load(‘./arma_Blue.pcd’,function(points){
points.geometry.center()
var newGeometry = BufferGeometryUtils.mergeBufferGeometries([pcd1.geometry,points.geometry])
var newMesh = new THREE.Points(newGeometry)
scene.add(newMesh)

})

})
`


This is the output for the above code.

Now the problem is that these two pcds have there own color (blue and red) respectively, and after creating a new buffergeometry, these are coming out to be completely white.

I want there original colors to be maintained as they were.

@Mugen87 , maybe you can help me with this. So i managed to merge the colors of these files into one material with mergeBufferAttributes, and gave the newly merged material with the merged mesh.


As you can see that the color array is there having color values, but now I don’t see any mesh in my scene. The updated code is below for reference:-

`
var loader = new PCDLoader();

loader.load(‘./arma_Red.pcd’,function(points){
points.geometry.center();
points.geometry.translate(50,0,0);
var pcd1 = points
console.log(pcd1.geometry)
var colors1 = pcd1.geometry.attributes.color
loader.load(‘./arma_Blue.pcd’,function(points){
points.geometry.center()
var colors2 = points.geometry.attributes.color
var newColor = BufferGeometryUtils.mergeBufferAttributes([colors1,colors2])
var newGeometry = BufferGeometryUtils.mergeBufferGeometries([pcd1.geometry,points.geometry])
var newMesh = new THREE.Points(newGeometry,newColor)

    scene.add(newMesh)
    
})

})

`

Please take a look into the docs on the arguments the constructor takes. The first one - the geometry - is alright, but you’re passing a result of BufferGeometryUtils.mergeBufferAttributes (which is a BufferAttribute) in place of a material.

Earlier, when you did not pass anything there - a default PointsMaterial was assigned, and the default color on it was white. To let any material know that you want it to use vertex / buffer attribute colors - be sure to set Material.vertexColors to true.

Example

1 Like

Hey, thanks for the reply. Yes, I figured that out that I had to use PointsMaterial with Points geometry. Thanks for the reply.


This is the final result.
And also the final code:-

loader.load('./arma_Red.pcd',function(points){
    points.geometry.center();
    points.geometry.translate(50,0,0);
    var pcd1 = points
    loader.load('./arma_Blue.pcd',function(points){
        points.geometry.center()
        var newGeometry = BufferGeometryUtils.mergeBufferGeometries([pcd1.geometry,points.geometry])
        var ptsmat = new THREE.PointsMaterial({size:0.1,vertexColors:true})
        var newMesh = new THREE.Points(newGeometry,ptsmat)
        scene.add(newMesh)
        
    })

})

1 Like