three.js: PCDLoader incorrect colors from ascii PCD files

Description of the problem

The decoding of RGB colors in incorrect in PCDLoader when decoding ascii files…

three.js/examples/js/loaders/PCDLoader.js

I am basing this fact on PCD files that display correctly using Debian version of pcl_viewer.

We need to treat the data as a 32 bit integer and the color byte order is reversed.

Here is a code fix for the problem:

  //var c = new Float32Array( [ parseFloat( line[ offset.rgb ] ) ] );
  //var dataview = new DataView( c.buffer, 0 );
  //color.push( dataview.getUint8( 0 ) / 255.0 );
  //color.push( dataview.getUint8( 1 ) / 255.0 );
  //color.push( dataview.getUint8( 2 ) / 255.0 );

   var c = new Int32Array( [ parseInt( line[ offset.rgb ] ) ] );
   var dataview = new DataView( c.buffer, 0 );
   color.push( dataview.getUint8( 2 ) / 255.0 );
   color.push( dataview.getUint8( 1 ) / 255.0 );
   color.push( dataview.getUint8( 0 ) / 255.0 );

Three.js version

Latest as of 2017 - 09 -15

Browser

All of them
Chrome
Firefox
Internet Explorer

OS

[] All of them
Windows
macOS
[x ] Linux
Android
iOS

Hardware Requirements (graphics card, VR Device, …)

N/A

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 23 (11 by maintainers)

Commits related to this issue

Fix for PCD Loader to display proper RGB values This fixes #12207 to ensure the right color values are displayed. This fixes both ascii and binary data file renderings. — committed to techtunde/three.js by techtunde 6 years ago
Squashed commit of the following: commit 5360a81b8c557ed255e97b87c49e7d00b546b795 Author: Mr.doob <info@mrdoob.com> Date: Wed Oct 31 10:42:06 2018 -0400 r98 commit f8dc0a9335a18eda38bf028e54c... — committed to opensim-org/three.js by aymanhab 6 years ago
Fix for PCD Loader to display proper RGB values This fixes #12207 to ensure the right color values are displayed. This fixes both ascii and binary data file renderings. — committed to DavidPeicho/three.js by techtunde 6 years ago

Most upvoted comments

The loader is not decoding the colors correctly. This appears to work:

var rgb = parseFloat( line[ offset.rgb ] );
var r = ( rgb >> 16 ) & 0x0000ff;
var g = ( rgb >> 8 ) & 0x0000ff;
var b = ( rgb >> 0 ) & 0x0000ff;
color.push( r / 255, g / 255, b / 255 );

There may be a more-elegant solution.

Plus, it should be:

material.vertexColors = THREE.VertexColors;

WestLangley on Sep 27, 2018

@Mugen87 Yes it works, they both now show the Pointcloud logo in purple and green. screen shot 2018-09-27 at 11 05 49 am

techtunde on Sep 27, 2018

@focaldepth Can you please share one of your PCD files that does not load with PCDLoader on your system?

Mugen87 on Sep 19, 2017

The mentioned code section is currently not executed by the official example because the corresponding file is in binary format. So maybe this code was never tested before.

Would you like to do a PR with your changes? Besides, it would be cool if you could add a simple PCD ascii file for testing purposes to /examples/models/pcd/.

Mugen87 on Sep 15, 2017