Billboard transparency #4886

bagnell · 2017-01-19T00:11:09Z

…ransparent fragments.

Conflicts: Source/Scene/BillboardCollection.js

emackey · 2017-01-20T14:32:27Z

Of course, it should be noted that this hurts performance for apps that use large numbers of billboards and points, because they are now drawn 2-pass instead of single-pass. But the visual improvement may be worth the cost.

mramato · 2017-01-20T14:34:09Z

Of course, it should be noted that this hurts performance for apps that use large numbers of billboards and points, because they are now drawn 2-pass instead of single-pass. But the visual improvement may be worth the cost.

Feedback has shown that it is absolutely worth the cost. Visual quality improvements is something that is asked on the forum on a constant basis.

pjcozzi · 2017-01-21T14:06:07Z

Source/Scene/BillboardCollection.js

@@ -1502,21 +1519,22 @@ define([
            vaLength = va.length;

            colorList.length = vaLength;
-            for (j = 0; j < vaLength; ++j) {
+            for (j = 0; j < vaLength * 2; ++j) {


Minor, but extract * 2 from the loop.

pjcozzi · 2017-01-21T14:12:06Z

Source/Scene/BillboardCollection.js

@@ -1482,11 +1483,27 @@ define([
                    vs.defines.push('DISTANCE_DISPLAY_CONDITION');
                }

+                fs = new ShaderSource({


Here and in the point cloud, shouldn't the render state be different for each pass? Opaque writes depth; translucent does not.

pjcozzi · 2017-01-21T14:14:09Z

Source/Shaders/BillboardCollectionFS.glsl

    vec4 color = texture2D(u_atlas, v_textureCoordinates) * vertexColor;
-    if (color.a == 0.0)
+
+#ifdef RENDER_FOR_PICK


Can you add a comment here and to the point shader that explains this? For example: fully transparent parts are not pickable, and the billboard/point is rendered twice: the opaque pass discards translucent fragments, and the translucent pass discards opaque ones.

pjcozzi · 2017-01-21T14:19:12Z

Source/Scene/PointPrimitiveCollection.js

                }

+                command.primitiveType = PrimitiveType.POINTS;
+                command.pass = (j % 2 === 0) ? Pass.OPAQUE : Pass.TRANSLUCENT;


Let's make a public enum with the following properties:

OPAQUE

TRANSLUCENT

OPAQUE_AND_TRANSLUCENT

Billboard, label, and point collections can expose this property (get/set ideally) and default to OPAQUE_AND_TRANSLUCENT. Make sure the reference doc clearly defines the performance vs. visual quality tradeoffs.

pjcozzi · 2017-01-21T14:19:48Z

Add unit tests. Checking the number of commands returned by update and their Pass would be good.

pjcozzi · 2017-01-21T14:20:15Z

Just those comments.

…ass does not.

bagnell · 2017-01-26T00:55:37Z

@pjcozzi This is ready for another look.

pjcozzi · 2017-01-26T01:19:15Z

Source/Scene/BillboardCollection.js

@@ -133,6 +135,9 @@ define([
     * @param {Matrix4} [options.modelMatrix=Matrix4.IDENTITY] The 4x4 transformation matrix that transforms each billboard from model to world coordinates.
     * @param {Boolean} [options.debugShowBoundingVolume=false] For debugging only. Determines if this primitive's commands' bounding spheres are shown.
     * @param {Scene} [options.scene] Must be passed in for billboards that use the height reference property or will be depth tested against the globe.
+     * @param {BillboardRenderTechnique} [options.renderTechnique=BillboardRenderTechnique.OPAQUE_AND_TRANSLUCENT] The billboard rendering technique. The default


Should this be exposed on LabelCollection as well?

I don't think users would use the opaque version, but they would likely use the translucent one for a performance boost.

I was thinking that they would always be both, but that isn't true anymore with the label backgrounds. I'll add it.

pjcozzi · 2017-01-26T01:25:57Z

Source/Scene/BillboardRenderTechnique.js

+     *
+     * @exports BillboardRenderTechnique
+     */
+    var BillboardRenderTechnique = {


Given that this applies to points and labels as well, I don't think it should have Billboard in the name. I am also hesitant about having technique in the name since in glTF and computer graphics, this isn't really a technique in the material sense.

Perhaps throughout, this is better named BlendOption (too confusing with blend mode? probably not at this level of the API), ImageBlendOption, RenderPasses (again, too similar to the renderer?), or CompositeMode? Ignore the implementation and think about what would sound reasonable to the end user.

pjcozzi · 2017-01-26T01:26:04Z

CHANGES.md

@@ -34,6 +34,7 @@ Change Log
 * `TerrainProvider` now optionally exposes an `availability` property that can be used to query the terrain level that is available at a location or in a rectangle.  Currently only `CesiumTerrainProvider` exposes this property.
 * Added `sampleTerrainMostDetailed` to sample the height of an array of positions using the best available terrain data at each point.  This requires a `TerrainProvider` with the `availability` property.
 * Added 2D and Columbus View support for models using the RTC extension or whose vertices are in WGS84 coordinates. [#4922](https://github.com/AnalyticalGraphicsInc/cesium/pull/4922)
+* Transparent parts of billboards, labels, and points no longer overwrite parts of the scene behind them. [#4886](https://github.com/AnalyticalGraphicsInc/cesium/pull/4886)


Update this.

pjcozzi · 2017-01-26T01:26:36Z

Source/Scene/BillboardCollection.js

+        /**
+         * The billboard rendering technique. The default is used for rendering both opaque and translucent billboards.
+         * However, if either all of the billboards are completely opaque or all are completely translucent,
+         * setting the technique to BillboardRenderTechnique.OPAQUE or BillboardRenderTechnique.TRANSLUCENT can improve performance by 2x.


Here and throughout, perhaps "up to 2x"

pjcozzi · 2017-01-26T01:28:46Z

Just those comments.

bagnell · 2017-01-26T18:44:33Z

@pjcozzi This is ready.

pjcozzi · 2017-01-26T20:02:17Z

Amazing.

Petter-li · 2019-06-21T08:21:23Z

I still have the problem. billboards img set a png, the transparency part is disappear;
version:"cesium": "^1.55.0";
can u guys told me how to fix it. Thanks.

BoJIbFbI4 · 2020-08-03T16:04:06Z

hi, same for 1.71. I'm wanna change alpha for pins that not selected for a little bit, but no matter to pin's alpha, if polygon has alpha - pins will be faded
polygon with alpha:

polygon w/o alpha:

OmarShehata · 2020-08-03T16:07:33Z

@BoJIbFbI4 let's move the discussion to the Cesium community forum: https://community.cesium.com/. Please include a Sandcastle example that reproduces the issue in your question, see: https://community.cesium.com/t/how-to-share-custom-sandcastle-examples/9828.

BoJIbFbI4 · 2020-08-04T06:23:51Z

@OmarShehata, hi. Thnx for the quick response! For me build the 99% same behavior example will take unforgivable amount of time. Maybe you know that 'fixed' issue, or can give me some advice?

bagnell and others added 8 commits March 16, 2015 15:26

Billboards draw in two passes. One for opaque fragments and one for t…

c9a486d

…ransparent fragments.

Merge branch 'master' into billboard-transparency

d53b383

Merge branch 'master' into billboard-transparency

2666f40

Conflicts: Source/Scene/BillboardCollection.js

Merge branch 'master' into billboard-transparency

dd63d01

Fix picking and cleanup.

8347d70

More fixes, copy logic to PointPrimitiveCollection.

3203985

Merge branch 'master' into billboard-transparency

31066db

Update CHANGES.md.

9e4b576

Merge branch 'master' into billboard-transparency

c4fc142

pjcozzi reviewed Jan 21, 2017

View reviewed changes

Tweak CHANGES.md

a80bd3c

pjcozzi reviewed Jan 21, 2017

View reviewed changes

bagnell added 4 commits January 25, 2017 16:23

Update render states. The opaque pass writes depth, the translucent p…

94adb32

…ass does not.

Merge branch 'master' into billboard-transparency

f371ecc

Add option to render in two passes or one.

5a4345f

Make multiple passes an option for points. Update tests.

19720fa

pjcozzi reviewed Jan 26, 2017

View reviewed changes

bagnell added 2 commits January 26, 2017 13:39

Rename and add blend option to label collection.

54b87ab

Update CHANGES.md.

157b649

Edit reference doc

79e6800

pjcozzi merged commit 19c8ab0 into master Jan 26, 2017

pjcozzi deleted the billboard-transparency branch January 26, 2017 20:02

pjcozzi mentioned this pull request Jan 26, 2017

Transparent billboards/points not working as expected. #2130

Closed

mramato mentioned this pull request Jan 26, 2017

Problems with label backgrounds #4927

Closed

hpinkos mentioned this pull request Feb 15, 2017

Problem with overlapping billboards #5007

Closed

emackey mentioned this pull request Mar 8, 2017

Two-pass labels intersect the depth buffer differently #5083

Closed

hpinkos mentioned this pull request Nov 15, 2018

Primitive ordering regression #6569

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Billboard transparency #4886

Billboard transparency #4886

bagnell commented Jan 19, 2017

emackey commented Jan 20, 2017

mramato commented Jan 20, 2017

pjcozzi Jan 21, 2017

pjcozzi Jan 21, 2017

pjcozzi Jan 21, 2017

pjcozzi Jan 21, 2017

pjcozzi commented Jan 21, 2017

pjcozzi commented Jan 21, 2017

bagnell commented Jan 26, 2017

pjcozzi Jan 26, 2017

bagnell Jan 26, 2017

pjcozzi Jan 26, 2017

pjcozzi Jan 26, 2017

pjcozzi Jan 26, 2017

pjcozzi commented Jan 26, 2017

bagnell commented Jan 26, 2017

pjcozzi commented Jan 26, 2017

Petter-li commented Jun 21, 2019

BoJIbFbI4 commented Aug 3, 2020

OmarShehata commented Aug 3, 2020

BoJIbFbI4 commented Aug 4, 2020

Billboard transparency #4886

Billboard transparency #4886

Conversation

bagnell commented Jan 19, 2017

emackey commented Jan 20, 2017

mramato commented Jan 20, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

pjcozzi commented Jan 21, 2017

pjcozzi commented Jan 21, 2017

bagnell commented Jan 26, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

pjcozzi commented Jan 26, 2017

bagnell commented Jan 26, 2017

pjcozzi commented Jan 26, 2017

Petter-li commented Jun 21, 2019

BoJIbFbI4 commented Aug 3, 2020

OmarShehata commented Aug 3, 2020

BoJIbFbI4 commented Aug 4, 2020