Skip to first unread message
jay.h...@noaa.gov
Oct 26, 2018, 5:57:26 PM10/26/18
to cesium-dev
Is there a way to have a transparent polygon 'occlude' another non-transparent polygon behind it such that you are able to see through them both to the map layer below?
Basically like that. Doesn't have to be two transparent polygons either, one is okay.
Omar Shehata
Oct 30, 2018, 10:22:23 AM10/30/18
to cesium-dev
Creating a mask in 3D like that is a bit tricky. There isn't a quick built-in way to do it but you might be able to accomplish this with a custom blending mode. You can define a custom Appearance (https://cesiumjs.org/Cesium/Build/Documentation/Appearance.html?classFilter=Appea) and that will allow you to define a blend mode. The documentation on this is a bit sparse right now (I opened a GitHub issue to improve this https://github.com/AnalyticalGraphicsInc/cesium/issues/7203) but these two threads have some code examples of custom blend modes:
If you figure out a good way to do accomplish this, please post back here!
jay.h...@noaa.gov
Nov 1, 2018, 8:28:03 PM11/1/18
to cesium-dev
Thanks Omar, I was able to get something! I don't quite understand all the different parts of what the blending options do, but I was able to do pretty much exactly what I wanted.
There are a few downsides, the main one being that the mask polygon affects ALL primitives underneath it; while I would prefer for it to only affect the one directly underneath, or by some other association, I suspect this is asking too much. That is part of why I did the experiment separating the triangle and it's mask into a separate PrimitiveCollection.
The other downside is that when the polygons are put close together (by manipulating the height), the lower ones can 'poke through' the invisible wall and re-appear. That being said, it is solvable by simply increasing the separation, or using 2D mode (which is the context I'm working in, so everything is fine)
I might play around a bit more with the BlendingFunction/Equation and the mask color/alpha but I need to brush up on what exactly is happening first.
https://cesiumjs.org/Cesium/Build/Apps/Sandcastle/#c=7Vdtb9s2EP4rhL9UGgz6JU1WuG4w1faWIEkTxOswwA4MWqIlojSpkZQNb/B/LylKNuUoWTwYAwZMXyQe74539zxHUiskwIrgNRbgE2B4DQZYkmwJf8tl3rswHw44U4gwLN75H6dsylbaKuV0o20mk3az/dScdOzrvPkBXly0u+f620iePlrtJZLfcu0uPG++h2dn7U43VzdGP1ZkrkZpHhIRUjwLMVN5pPt1fui0zg60BIpIJqv5jCglqeQk+gXzSItCz5kcIKF4LFCakBAuBF8OcSwwll5l2YkOtSroPPnNKQPHPm9ZWdfO96HMxAKFeEikQizEOs2i6uYFFxQpzwBSFNe89sIpa7WuIx0oCREFioN1ghRQAjFJM5NATw8yDNY8oxHIJAYLLoBKMBCYRViMFVLY1jU3mpuK/mXTxQzNKY6AdVHUAP+RIUU4e4zneqJI8DPVzkbFDAyGwwPlgKYJ+nv1RcZCIxrzTIT4+Qo/F/NwfP/1cTCaBbcPV0Gtbd2Cb7EeYqkIeyHBnYP7L6PZ3fWXr+PZ21y9Gk29synbFugarHLoLWBA7hELM6n48hSQ3QW/HwOZjvd/yOohM7igNK3uSw9YXDPb3QNOuQjSFCNhhl4BnGnoCmjPWriQO23bK1E3T4RTldxpnlhtO7HVRlvf2ZxnJw9tgag8IjZX3TxzU1jC4t6OzAeRF8eQIMuDvf5Bi4giKxM2xTkwXpmq5JREsxjz3GjiHk9VqZVrr/rAqLrXgiVWYlMWp6xGXMh7lVj0Rh1zVtp4Tu6pnboiWCARJrV2u0nPOTD0F2Jn7nERCIE2nnHouydSgkmcaCS6bfMU5SsVkFKCzDPtDVQgCQ3We37n0B+mHJS2eRC5iufqw5ur4OYarolK8nbx2vDC94sACvgcJGCaycSzta4AZdDIAYYoijxrXwe0W9b4IFbZc0F3qoN2fO6Zb3dGbliYCM54JgtilsWbMt8lx509ef8L7DAUr2XH+3+dHZ9vg8GNw47OITf27bijhqm0u1+diBr7lV5gRrk3HkmP/PoMQ7TUCOk72eZXXgYS7Y+SXRkf9S6FWEyLipUoWuCO7fwoE4X3Nuye7zdLG5LUmzOGaVkeW768kHti21tuldeDXFZlanEd74FXQ3x+iwb11+ji3t6r3uOdc6rET0dWGxUMBdYnzC5I6ye3fiX5f8ydN3T9oXWZ28Fvw0vddtKuexwN63qufLb74dY/xTbZaDb6Um0ovrTSn8gy5UKBTFAPwpbCy1TfH7BszbPwG1YwlDkF+63SqB+RFSDRp2nj4C902gAhRVLqmUVG6Zj8iaeNy35L61fMKEfmBnG/woKijVFJOpe3Vggh7Lf08LmV4pzOkXA8fgc
There are a few downsides, the main one being that the mask polygon affects ALL primitives underneath it; while I would prefer for it to only affect the one directly underneath, or by some other association, I suspect this is asking too much. That is part of why I did the experiment separating the triangle and it's mask into a separate PrimitiveCollection.
The other downside is that when the polygons are put close together (by manipulating the height), the lower ones can 'poke through' the invisible wall and re-appear. That being said, it is solvable by simply increasing the separation, or using 2D mode (which is the context I'm working in, so everything is fine)
I might play around a bit more with the BlendingFunction/Equation and the mask color/alpha but I need to brush up on what exactly is happening first.
https://cesiumjs.org/Cesium/Build/Apps/Sandcastle/#c=7Vdtb9s2EP4rhL9UGgz6JU1WuG4w1faWIEkTxOswwA4MWqIlojSpkZQNb/B/LylKNuUoWTwYAwZMXyQe74539zxHUiskwIrgNRbgE2B4DQZYkmwJf8tl3rswHw44U4gwLN75H6dsylbaKuV0o20mk3az/dScdOzrvPkBXly0u+f620iePlrtJZLfcu0uPG++h2dn7U43VzdGP1ZkrkZpHhIRUjwLMVN5pPt1fui0zg60BIpIJqv5jCglqeQk+gXzSItCz5kcIKF4LFCakBAuBF8OcSwwll5l2YkOtSroPPnNKQPHPm9ZWdfO96HMxAKFeEikQizEOs2i6uYFFxQpzwBSFNe89sIpa7WuIx0oCREFioN1ghRQAjFJM5NATw8yDNY8oxHIJAYLLoBKMBCYRViMFVLY1jU3mpuK/mXTxQzNKY6AdVHUAP+RIUU4e4zneqJI8DPVzkbFDAyGwwPlgKYJ+nv1RcZCIxrzTIT4+Qo/F/NwfP/1cTCaBbcPV0Gtbd2Cb7EeYqkIeyHBnYP7L6PZ3fWXr+PZ21y9Gk29synbFugarHLoLWBA7hELM6n48hSQ3QW/HwOZjvd/yOohM7igNK3uSw9YXDPb3QNOuQjSFCNhhl4BnGnoCmjPWriQO23bK1E3T4RTldxpnlhtO7HVRlvf2ZxnJw9tgag8IjZX3TxzU1jC4t6OzAeRF8eQIMuDvf5Bi4giKxM2xTkwXpmq5JREsxjz3GjiHk9VqZVrr/rAqLrXgiVWYlMWp6xGXMh7lVj0Rh1zVtp4Tu6pnboiWCARJrV2u0nPOTD0F2Jn7nERCIE2nnHouydSgkmcaCS6bfMU5SsVkFKCzDPtDVQgCQ3We37n0B+mHJS2eRC5iufqw5ur4OYarolK8nbx2vDC94sACvgcJGCaycSzta4AZdDIAYYoijxrXwe0W9b4IFbZc0F3qoN2fO6Zb3dGbliYCM54JgtilsWbMt8lx509ef8L7DAUr2XH+3+dHZ9vg8GNw47OITf27bijhqm0u1+diBr7lV5gRrk3HkmP/PoMQ7TUCOk72eZXXgYS7Y+SXRkf9S6FWEyLipUoWuCO7fwoE4X3Nuye7zdLG5LUmzOGaVkeW768kHti21tuldeDXFZlanEd74FXQ3x+iwb11+ji3t6r3uOdc6rET0dWGxUMBdYnzC5I6ye3fiX5f8ydN3T9oXWZ28Fvw0vddtKuexwN63qufLb74dY/xTbZaDb6Um0ovrTSn8gy5UKBTFAPwpbCy1TfH7BszbPwG1YwlDkF+63SqB+RFSDRp2nj4C902gAhRVLqmUVG6Zj8iaeNy35L61fMKEfmBnG/woKijVFJOpe3Vggh7Lf08LmV4pzOkXA8fgc
Omar Shehata
Nov 2, 2018, 11:46:20 AM11/2/18
to cesium-dev
This is awesome Jay. Thanks for contributing this! I'm not sure if that was intentional but I appreciate the triforce.
I think having it only affect certain polygons is definitely possible, but will be a bit more work. There are two ways I can imagine doing this: the first is just to use a separate render pass for the mask and its masked primitives. CesiumJS does have a post process system (https://cesiumjs.org/Cesium/Build/Documentation/PostProcessStage.html?classFilter=post) but I'm not sure how easy it would be to render primitives in that pass. You might have to dig a bit into how a scene is rendered (https://github.com/AnalyticalGraphicsInc/cesium/blob/master/Source/Scene/Scene.js#L1964).
The second way has to do with render order. I don't think Cesium lets you guarantee a particular render order, but if you add the underlying circle first, and give it a separate Appearance, it will render as a solid and the mask will only apply to the triangle. I modified your example to try this out:
I'm really curious, what kind of application are you doing this for?
jay.h...@noaa.gov
Nov 2, 2018, 1:02:52 PM11/2/18
to cesium-dev
It's for NOAA's GNOME oil modeling tools, specifically the web frontend. https://gnome.orr.noaa.gov/
Here's an example of the map view so you don't have to figure out how to get the data and set up a simulation. The yellow polygons are what the simulation sees as 'land'. However, these land polygons do not have the lakes integrated, those are separate polygons with a different classification.
https://photos.google.com/share/AF1QipOMbvwbkbFTFIyNPZHjgZLYFqIczAol8uv9S5rvheDFPVSPT6z5ZEwr-bkdMzzMuQ/photo/AF1QipPdrZd00GhOBFOC5QDObNyUbr7c1YajSnNfbVbq?key=Q2dqZjF0WW9SNXFPeEdhQkpLMG1IMlVIWDhQM0dR
Basically, we wanted the lakes to 'look like' the sea, where they would be transparent to whatever base layer put below. In the past, the best we could do was color them differently or not draw them at all.
There's actually quite a bit of low level Cesium work in the various bits of that frontend, mainly in the pursuit of speed with huge datasets and rendering the simulation output close to real time. Now that the Map is converted to use Primitives I think we aren't using Entity level abstraction anywhere.
By the way, I made a further modification to the Sandcastle, where I added another separate blending object to the circle's RenderState so I could experiment a little. It appears that if the'translucent' appearance option is false, it does not get a blending option and becomes unaffected by the mask. However, I found you can still add a custom blending object and leave it disabled, which makes sense. The question now is whether I can enable the blending object and set some combination of settings to evade the mask. Again, I think I need to do some learning and truly understand what's going on in the graphics stack before I spend a lot of time guessing.
https://cesiumjs.org/Cesium/Build/Apps/Sandcastle/#c=7Vh/b+I2GP4qFv9cmJCB9tpNtNeNg+5atb1WZbdNKlVlHEOsM3bOdkBs4rvPPxLi0NC1W7XTpMs/wfb7y+/zvPYbFkiCBSVLIsE7wMkSDIii2Rz+6uaiN9gNB4JrRDmRb5pHYz7mC6OVCrYyOnd3nVbnvnXX9a+D1g/w8LCzd2B+25n7Iy89R+qzk96DB623cH+/091z4lbp+8pcKFGoYyoxIw+YcO0iLf18123vb0lJFNNMVfdzyhhNlaDxByJiM4WjYHGApBYzidKEYjiVYj4kM0mIiipu70yo1YnufbM15uClz3M8m9w1m1BlcoowGVKlEcfEbDPPun3BKUM6soDkybWvcnLM2+3z2ARKMWJAC7BMkAZaIq5YZjfQM4OMgKXIWAwyRcBUSKATAiThMZEjjTTxeXVKE5vRP/12CUcTRmLgTeQ5IF8ypKngt7OJWcg3+J4ZY6f5CuwPh1vCfZYm6O/FpxnHdmokMonJYw8/5+twdP3pdnD60L+8OevX6tY5fI72kChN+Y4Nbgxcfzx9uDr/+Gn08DxTT0ZTb2zM1zm6FisHvQcMqBIxnCkt5q8B2VX/95dAZuL9BtluyMBvtgixgSa3BsQUTKwJIFI7VmbR1uOMmFpNqNrgtkwoI4AL7SCnfOZK1Z9HP3rQlWA0rsd8ipj6BvpXAN3aK25MlKbVS+mGyHPuj/aBYEL205QgaYdRjqA9zSsV++j8zueDM7tXwG+fmKQ6uTKM8dJ+YW2U1s2jgDUPrx5byLhnBhfcpa4kDMl7BalrArd18NXjDsWrgRdH8FbkefMk6XyrQ7kxU1TThQ2bEcesqIrRjAindBc2VdXZsA+qmh+4OdP9zImWK5+LvJ3qhd2I+YX4/tNdEKhvg/K+q1ftwwLEZrl3E1ltVBBLYnK9CdLbcdquHYXKeCQwLTKlIIrjyCe4LpNRgFnhuyCH6oUqH7ZWQ81Qu9jbVtuHtJZ0kpnkgQpRigdbJgZ5tsNtl/3Chsu9E4lCeXh7OoRLqhN3FkXdZrPqZ10O12FbijYF0CtrPVxXK44TKbjIVM7nnLLGQclYkywTcZVTu7JWZitExbSsM8GrDPRP6pfOKJFI4qRWb7MYPUnWvpRoFVmDzTAJCaGzxFT3Xsc+xf5ygV3ovQpqF2f9i/MAtw48LJBb56URVDdMM5VEPteV4rcV7g6Nf0f5wNUOivxTclz5b5D/AzvssVnLjrf/OTveX/YHF3VVXXCjPOI31LCZDu/AV6JG6WkHM4r79oX08Cc3RnODkPk6Xf0iikDisr/apPHW3HyIz1iesQJFD9xLKz/OZG69A/cOygv4icvEJdKLNVqNY6VXjJx4az/ReSqkBplkEYRtTeap6SSIak8y/JloiJVTPG4XSscxXQAavxs3tv5FGTcAZkgpszLNGBvRP8i4cXLcNvIVNSaQ7SWuF0QytLIiSffk0k9CCI/bZvhYSwvBJkgGFv8C
Here's an example of the map view so you don't have to figure out how to get the data and set up a simulation. The yellow polygons are what the simulation sees as 'land'. However, these land polygons do not have the lakes integrated, those are separate polygons with a different classification.
https://photos.google.com/share/AF1QipOMbvwbkbFTFIyNPZHjgZLYFqIczAol8uv9S5rvheDFPVSPT6z5ZEwr-bkdMzzMuQ/photo/AF1QipPdrZd00GhOBFOC5QDObNyUbr7c1YajSnNfbVbq?key=Q2dqZjF0WW9SNXFPeEdhQkpLMG1IMlVIWDhQM0dR
Basically, we wanted the lakes to 'look like' the sea, where they would be transparent to whatever base layer put below. In the past, the best we could do was color them differently or not draw them at all.
There's actually quite a bit of low level Cesium work in the various bits of that frontend, mainly in the pursuit of speed with huge datasets and rendering the simulation output close to real time. Now that the Map is converted to use Primitives I think we aren't using Entity level abstraction anywhere.
By the way, I made a further modification to the Sandcastle, where I added another separate blending object to the circle's RenderState so I could experiment a little. It appears that if the'translucent' appearance option is false, it does not get a blending option and becomes unaffected by the mask. However, I found you can still add a custom blending object and leave it disabled, which makes sense. The question now is whether I can enable the blending object and set some combination of settings to evade the mask. Again, I think I need to do some learning and truly understand what's going on in the graphics stack before I spend a lot of time guessing.
https://cesiumjs.org/Cesium/Build/Apps/Sandcastle/#c=7Vh/b+I2GP4qFv9cmJCB9tpNtNeNg+5atb1WZbdNKlVlHEOsM3bOdkBs4rvPPxLi0NC1W7XTpMs/wfb7y+/zvPYbFkiCBSVLIsE7wMkSDIii2Rz+6uaiN9gNB4JrRDmRb5pHYz7mC6OVCrYyOnd3nVbnvnXX9a+D1g/w8LCzd2B+25n7Iy89R+qzk96DB623cH+/091z4lbp+8pcKFGoYyoxIw+YcO0iLf18123vb0lJFNNMVfdzyhhNlaDxByJiM4WjYHGApBYzidKEYjiVYj4kM0mIiipu70yo1YnufbM15uClz3M8m9w1m1BlcoowGVKlEcfEbDPPun3BKUM6soDkybWvcnLM2+3z2ARKMWJAC7BMkAZaIq5YZjfQM4OMgKXIWAwyRcBUSKATAiThMZEjjTTxeXVKE5vRP/12CUcTRmLgTeQ5IF8ypKngt7OJWcg3+J4ZY6f5CuwPh1vCfZYm6O/FpxnHdmokMonJYw8/5+twdP3pdnD60L+8OevX6tY5fI72kChN+Y4Nbgxcfzx9uDr/+Gn08DxTT0ZTb2zM1zm6FisHvQcMqBIxnCkt5q8B2VX/95dAZuL9BtluyMBvtgixgSa3BsQUTKwJIFI7VmbR1uOMmFpNqNrgtkwoI4AL7SCnfOZK1Z9HP3rQlWA0rsd8ipj6BvpXAN3aK25MlKbVS+mGyHPuj/aBYEL205QgaYdRjqA9zSsV++j8zueDM7tXwG+fmKQ6uTKM8dJ+YW2U1s2jgDUPrx5byLhnBhfcpa4kDMl7BalrArd18NXjDsWrgRdH8FbkefMk6XyrQ7kxU1TThQ2bEcesqIrRjAindBc2VdXZsA+qmh+4OdP9zImWK5+LvJ3qhd2I+YX4/tNdEKhvg/K+q1ftwwLEZrl3E1ltVBBLYnK9CdLbcdquHYXKeCQwLTKlIIrjyCe4LpNRgFnhuyCH6oUqH7ZWQ81Qu9jbVtuHtJZ0kpnkgQpRigdbJgZ5tsNtl/3Chsu9E4lCeXh7OoRLqhN3FkXdZrPqZ10O12FbijYF0CtrPVxXK44TKbjIVM7nnLLGQclYkywTcZVTu7JWZitExbSsM8GrDPRP6pfOKJFI4qRWb7MYPUnWvpRoFVmDzTAJCaGzxFT3Xsc+xf5ygV3ovQpqF2f9i/MAtw48LJBb56URVDdMM5VEPteV4rcV7g6Nf0f5wNUOivxTclz5b5D/AzvssVnLjrf/OTveX/YHF3VVXXCjPOI31LCZDu/AV6JG6WkHM4r79oX08Cc3RnODkPk6Xf0iikDisr/apPHW3HyIz1iesQJFD9xLKz/OZG69A/cOygv4icvEJdKLNVqNY6VXjJx4az/ReSqkBplkEYRtTeap6SSIak8y/JloiJVTPG4XSscxXQAavxs3tv5FGTcAZkgpszLNGBvRP8i4cXLcNvIVNSaQ7SWuF0QytLIiSffk0k9CCI/bZvhYSwvBJkgGFv8C
Reply all
Reply to author
Forward
0 new messages