# Point Cloud Styling based on color value

**URL:** <https://community.cesium.com/t/point-cloud-styling-based-on-color-value/11223>\
**Category:** CesiumJS\
**Created:** [October 13, 2020, 6:28pm UTC](https://community.cesium.com/t/point-cloud-styling-based-on-color-value/11223 "2020-10-13T18:28:26Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![wepmanj](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/wepmanj/32/1987_2.png) [@wepmanj](https://community.cesium.com/u/wepmanj)\
**Post date:** [October 13, 2020, 6:28pm UTC](https://community.cesium.com/t/point-cloud-styling-based-on-color-value/11223/1 "2020-10-13T18:28:27Z")

</div>

I’m using CesiumJS to view point cloud based 3DTiles. I’d like to be able to toggle showing points in a specific color range but it doesn’t seem to work. Should the following code work to hide any points that don’t have a red value of 242?

tileset.style = new Cesium.Cesium3DTileStyle({  
show : “${Red} !=242”  
});

---

<div class="post-metadata">

**Author:** ![dzung](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/dzung/32/2996_2.png) [@dzung](https://community.cesium.com/u/dzung)\
**Post date:** [October 13, 2020, 7:11pm UTC](https://community.cesium.com/t/point-cloud-styling-based-on-color-value/11223/2 "2020-10-13T19:11:09Z")

</div>

Your point clouds tileset likely doesn’t have the `Red` property. You may need to access the `Color` property instead:

```auto
tileset.style = new Cesium.Cesium3DTileStyle({
    show : “${COLOR}.x !=242”
});

```

You may also have to change the 242 to its corresponding value between 0 and 1. We have a specification for 3D Tiles which you can access here: [https://github.com/CesiumGS/3d-tiles/tree/master/specification/Styling#point-cloud](https://github.com/CesiumGS/3d-tiles/tree/master/specification/Styling#point-cloud)

---

<div class="post-metadata">

**Author:** ![wepmanj](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/wepmanj/32/1987_2.png) [@wepmanj](https://community.cesium.com/u/wepmanj)\
**Post date:** [October 13, 2020, 7:20pm UTC](https://community.cesium.com/t/point-cloud-styling-based-on-color-value/11223/3 "2020-10-13T19:20:06Z")

</div>

Thank you. Here are the values I’m seeing in the .pnts file being rendered.

## (py3dtiles) [ec2-user@ip-172-31-12-146 ~]$ py3dtiles\_info /lidar/cesium/6-61-28-29.pnts Tile Header

Magic Value: pnts  
Version: 1  
Tile byte length: 390622  
Feature table json byte length: 144  
Feature table bin byte length: 390450

## Feature Table Header

{‘POINTS\_LENGTH’: 26030, ‘RTC\_CENTER’: [-402461.359375, -5509823.703125, 3176833.640625], ‘POSITION’: {‘byteOffset’: 0}, ‘RGB’: {‘byteOffset’: 312360}}

## First point

{‘X’: -3.470625, ‘Y’: -3.656875, ‘Z’: -3.050625, ‘Red’: 242, ‘Green’: 242, ‘Blue’: 242}

Based on this I’d expect to see the red property unless it’s getting transformed in the API itself. Also, can you expand on converting a color value to between 0 and 1. There is no information on how that’d be done in the link you provided.

---

<div class="post-metadata">

**Author:** ![wepmanj](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/wepmanj/32/1987_2.png) [@wepmanj](https://community.cesium.com/u/wepmanj)\
**Post date:** [October 14, 2020, 6:49pm UTC](https://community.cesium.com/t/point-cloud-styling-based-on-color-value/11223/4 "2020-10-14T18:49:56Z")

</div>

@omar Any thoughts on how this would be done?

---

<div class="post-metadata">

**Author:** ![dzung](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/dzung/32/2996_2.png) [@dzung](https://community.cesium.com/u/dzung)\
**Post date:** [October 15, 2020, 2:20pm UTC](https://community.cesium.com/t/point-cloud-styling-based-on-color-value/11223/5 "2020-10-15T14:20:35Z")

</div>

For converting values from 0 to 255 to 0 to 1, you can reference this post:

> <https://stackoverflow.com/questions/10848990/rgb-values-to-0-to-1-scale>

This post might help with the `Red` attribute not found issue:

> [@Per point attributes in cesiumjs](https://community.cesium.com/t/per-point-attributes-in-cesiumjs/7795/8):
>
> If you check the first part of your .pnts file (either with head or with your browser's dev tools) you can see something like: "pntsè,ì+X{"BATCH\_ID":{"byteOffset":..." which indicates that each point has a BATCH ID. Now if you look at the Batch Table of your file, (which in the case of this file that was made with the point-cloud-tiler binary is at the very end) you will find this string: '{"Classification":{"byteOffset":0,"componentType":"UNSIGNED\_BYTE","type":"SCALAR"}}'. Unfortunately it do…

It might just be that you need to use !== instead of != for the comparison. Were there any errors that were shown in the console?

---

<div class="post-metadata">

**Author:** ![wepmanj](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/wepmanj/32/1987_2.png) [@wepmanj](https://community.cesium.com/u/wepmanj)\
**Post date:** [October 15, 2020, 3:34pm UTC](https://community.cesium.com/t/point-cloud-styling-based-on-color-value/11223/6 "2020-10-15T15:34:57Z")

</div>

I’m getting no errors in the console and I’ve tried the following with no success.

“{Red} !== 242" "{Color}.Red !== 242”  
“{Red} != 242" "{Color}.Red != 242”  
“{Red} !== .949" "{Color}.Red !== .949”  
“{Red} != .949" "{Color}.Red != .949”  
“{Color}.Red != 242" "{Red} !== ‘F2’”  
“{Color}.Red !=='F2'" "{Red} != ‘F2’”  
“${Color}.Red != ‘F2’”

Is turning point display on and off with a Lidar based 3DTileset based on color something that’s been tested and known to work?

---

<div class="post-metadata">

**Author:** ![dzung](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/dzung/32/2996_2.png) [@dzung](https://community.cesium.com/u/dzung)\
**Post date:** [October 16, 2020, 1:15pm UTC](https://community.cesium.com/t/point-cloud-styling-based-on-color-value/11223/7 "2020-10-16T13:15:33Z")

</div>

It is known to work. [Here](https://sandcastle.cesium.com/#c=nVRtc+I2EP4rO8x9gJTakIS7C+EyTUkuMYOhATccOd90hLzEAluikgyBDP+9kg0huWb6oV8sa3effXl2V64LN5JwDW1ULEs7QyCUolKgBaxFJoEJDkQp1CrkhY3jCe5EOCVZoi9z40DMkcMXCEu47sSTG8r6rOP9ufHqPeYpjw8atO199OaLb/ftzpljjP6ObubGyHsaj64b/as4fhjWE39zd9oNBsyfUT2e9dLxsFYfp725P/IbvWAwf5h5rNvuLB6MMz8Yr/31ipHR15o3E0+9wGv4G//Yn92tp3fO5Fvdu2d/9fE2+SRHZ6xWr/EnSa8/+x/bHTLpL7Ob0eSP/sPq+DQsnYc85EsiYclwhdIUwnG1I8S5z2XlsETze1twTRhHGZYqLzjNEjQMGWDhwVEUOToLyVKm2RKVQ6KoHHJ47bg4Tq6CAlx+tnqATCZNOBA9QGW6QNGZSpFe2j54Ufn05OzT50q1ACwE47qdiCwaxiRi/LEJO1cARGvkGdGmiU3QMsPqXoNrvBIpdtljrHOM1RbKrT22lZAXBU4zTnU+BYtFsh7qdYLlShHCdSFAZfGgY6LNB4GKREgFSguJERCJwIVMScI25mqGqvZrPYce2e+OOEdZr295f01PEXRXVR6gaWZNPk7KH57b/W5/sHUkHMFxo+HUqvAie3xHNtnLKmGpWhR6bo8j19aal3TLIgRcolzr+KW0mCggoBZI2ZTRIglYJqQgzaBGCJlCY6NjiSoWSQSKcYp7UyIZGhdUCrtcMVNF44DazlkfVHClYXTrBdeGie8mSXBtqlV47/fH+f/lz2yumV/1akoipjQxqTb3AjDs7oUvFFdhifTULAL8UmT5vfbD/FoaD6L6v0XHOxHUDel71g3vu9NQtbLd/PC8j7iFC6g5J6/7s30ziDRBIt8M4s88ZLyoMtpjh4RHlCidoF3FQIhkQuTvmdaCm4ou7WRD7tEmehh0G/u/oW2bywF6SK1YHvM+FC/CRog0EOVdolZZqpZaeb4XtoLfWLoQUtv1LzuOqzFdJESjcicZnZvKqFIW1HL3kFbElsCiL+88TCYL82IbzTRLkqFZvLB00XKN/RtYIvLXom8GPSFrY2LTaMX1i26hcByn5ZqrDfozVhcsvPL7Dw) is a Sandcastle example of hiding points that are close to WHITE.

---

<div class="post-metadata">

**Author:** ![wepmanj](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/wepmanj/32/1987_2.png) [@wepmanj](https://community.cesium.com/u/wepmanj)\
**Post date:** [October 19, 2020, 1:47pm UTC](https://community.cesium.com/t/point-cloud-styling-based-on-color-value/11223/8 "2020-10-19T13:47:48Z")

</div>

@dzung I’ve applied this example to ion asset id 168554 and it doesn’t seem to work. Would you be able to look at that asset and see why it isn’t? The color I’m trying to turn off should be 242,242,242.

---

<div class="post-metadata">

**Author:** ![wepmanj](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/wepmanj/32/1987_2.png) [@wepmanj](https://community.cesium.com/u/wepmanj)\
**Post date:** [October 29, 2020, 6:38pm UTC](https://community.cesium.com/t/point-cloud-styling-based-on-color-value/11223/9 "2020-10-29T18:38:03Z")

</div>

@dzung, Can I expect any further assistance on this or am I on my own here?

---

<div class="post-metadata">

**Author:** ![dzung](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/dzung/32/2996_2.png) [@dzung](https://community.cesium.com/u/dzung)\
**Post date:** [October 29, 2020, 7:22pm UTC](https://community.cesium.com/t/point-cloud-styling-based-on-color-value/11223/10 "2020-10-29T19:22:46Z")

</div>

Would it be possible for you to share a Sandcastle with your asset loaded?

---

<div class="post-metadata">

**Author:** ![dzung](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/dzung/32/2996_2.png) [@dzung](https://community.cesium.com/u/dzung)\
**Post date:** [October 29, 2020, 7:53pm UTC](https://community.cesium.com/t/point-cloud-styling-based-on-color-value/11223/11 "2020-10-29T19:53:13Z")

</div>

I took a look at your asset and was able to apply the styles mentioned in my previous post. Please check out [this Sandcastle](https://sandcastle.cesium.com/#c=nVRdc9o6EP0rO0wfIJdrQ1K4TUIzl9IOMRPCEJykpO6DkEWsIiQqyXxl8t+7sg0kbeY+3BfLWu3ZPXu0K9+HribSQocZns57IyCUMmPAKtioVANXEogxzJpI5j5eoKQXsylJhW1nzqGaMQkfISqxTS+ZdCkf8F5wuw3q1zwwgbxp0E7QDGaLr3ed3qmHTj/j7gydgvcP9/3jcTje9Du1k/H2U3IVDuv9cGgH3dv19ajWGG9vknF496P/42E+6Pb5Vae3eMBg/e1wdR0+mmAuktjtw9vGIByf9LftxuBrzZMPyemYDrcfvpBZ/3M9bMrR7WnYbayaQ/lTXvbG6+Zw3Vn31u0PUek8kpFcEg1LzlZMYyWSrQpFvLvMVo5KNNt3lLSES6ajUmWPs1wwlAiBeQTPUCaZt9B8zi1fMuOROC5HEl4GzpeTz2EOLj+5c4BUizM4KH3DDF4DZd5Uq3nbXUQQl+v/NJonjUrVIZ4rkSyY5Lm3Ss1DVS445UfTVFKbXeViITYjuxGsXIEso+9DyIzl8hFsQix+GFAllDZgrNIsBqIZSKXnRPAtbrEzan/XM+iR+xaJPOOivtbuZYl50qLILMEZNox+nJTfPXUGV4ObZ0/DERw3Gl6tCnvb4xu2yc5WiUqFBuduOfJdrVlJlzxmwJZMb2yyLy0hBgiYBaN8ymlOApZEpKxA3TNIDUMfm2hmEiViMFxStnfVnGEIqpWbkIQbWCiOw0OFSmMXgyppLNxfBuEXVOIbkgTfUa3CW7/fz/+vfjh+2IPmDIo9WrixBKme7QyA6u6Me4mrsGT0PTYz/JWz/Fb7jr9OxoOp/qfpuDBBHUXfqY66FytKtXK3+e5pl/EZLqDmnby8n+dXjUgFI/pVI/6uQyrzKuMddkRkTImxgrlxCpUSE6I/pdYqiRW1XWdDFtERPTS6y/3f0I7jcoAeqOXDE8lStdTKaF04ov/y+UJp6ya17Hm+ZfOFIJYZf5LSGRZAjXHAlr+DtGK+BB5/fOMNwWT4uuLJNBVihPMVlS5aPvq/gglFYuziAfazIBt0cTRaSf3iKj/wPK/l49Yl/R1r82JfxP0F). To apply the style you will need to click on the Apply Style button at the top left corner of the viewer.

---

<div class="post-metadata">

**Author:** ![wepmanj](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/wepmanj/32/1987_2.png) [@wepmanj](https://community.cesium.com/u/wepmanj)\
**Post date:** [October 29, 2020, 8:40pm UTC](https://community.cesium.com/t/point-cloud-styling-based-on-color-value/11223/12 "2020-10-29T20:40:02Z")

</div>

Yeah, somehow I must have made a mistake when implementing because when I tried building the sandcastle example it worked fine. Appreciate the help!
