Add fill-extrude-height and fill-extrude-base properties. #3223

lbud · 2016-09-19T22:39:42Z

This PR adds support for fill-extrude-height and fill-extrude-base.

I would love to start getting some 👀 on this branch.

Notably, this diverges from our existing patterns in the following ways:

Includes two different vertex interfaces in fill_bucket.js and diverges into fill VAOs or extrusion VAOs depending on the style
Adds a draw file that does not correspond to a style spec type: draw_extrusion handles complete drawing of extruded fills; this diversion happens in painter.js

To do:

~~spherical interpolation~~
update package.json shas once all corresponding PRs are finalized.
work with @lucaswoj to figure out how to benchmark this feature

Closes #684.

Companion PRs:
mapbox/mapbox-gl-style-spec#495
mapbox/mapbox-gl-test-suite#145
mapbox/mapbox-gl-shaders#25

@jfirebaugh @lucaswoj @mourner @mollymerp

Launch Checklist

briefly describe the changes in this PR
write tests for all new functionality
document any changes to public APIs
post benchmark scores
manually test the debug page

dagjomar · 2016-09-19T23:37:17Z

Is this for real? 😮 Can you post some screenshots of this?

lucaswoj · 2016-09-26T22:06:58Z

documentation.yml

@@ -43,6 +43,7 @@ toc:
  - CameraOptions
  - AnimationOptions
  - StyleOptions
+  - LightingOptions


Shall we rename this to LightOptions like in mapbox/mapbox-gl-style-spec#495 (comment)?

I removed Lighting/LightOptions entirely since now as a part of style, it is more clearly derived from the spec.

lucaswoj · 2016-09-26T22:56:53Z

js/data/bucket/fill_bucket.js

+            group.elementArray.emplaceBack(indices[triangleIndices[j]],
+                indices[triangleIndices[j + 1]],
+                indices[triangleIndices[j + 2]]);
+        }


Did you consider creating a separate FillExtrusionBucket class rather than branching on this.fillType === 'fill' within methods of FillBucket?

lucaswoj · 2016-09-26T23:00:13Z

js/render/draw_extrusion.js

+    gl.clearStencil(0x80);
+    gl.stencilMask(0xFF);
+    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+    gl.stencilMask(0x00);


Does this overwrite our tile clipping masks?

Here's what I've figured out:

gl.clear only affects the currently bound framebuffer and is needed here

I can delete several of these lines (basically all but the gl.clear) and get visually the same results. My best guess is that this was in here because the original implementation (from which I copied these) rendered to the map as a normal layer, so it needed to fiddle with the stencil mask (so as to clear the entire screen). Now that we're rendering in a new framebuffer, it doesn't need to redraw a mask that's not actually there — so, deleting all these lines except the gl.clear, which clears its last frame draw. (Fwiw/for future reference: based on my testing I actually don't think it was affecting the global stencil mask anyway because of the different framebuffer.)

testing for the clipping masks made me realize I forgot to flip the depthMask back off after this draw, which was causing fills to z-fight if above an extrusion layer — fixed 😅

testing for the clipping masks made me realize I forgot to flip the depthMask back off after this draw, which was causing fills to z-fight if above an extrusion layer — fixed 😅

nope I was totally wrong, this broke other fills and also is #3320

☝️ fixed

lucaswoj · 2016-09-26T23:06:45Z

js/render/painter.js

+    for (var key in lightOptions) {
+        this.light[key] = lightOptions[key];
+    }
+};


I see Painter as a collection of GL utilities with no knowledge of map primitives and Style as the owner of state about the map style. Why did you choose to put this light state on Painter rather than Style?

lucaswoj · 2016-09-26T23:12:20Z

js/render/painter.js

+    if (widthTextures) {
+        var textures = widthTextures[height || width];
+        return textures && textures.length > 0 ? textures.pop() : null;
+    }


Did you verify that the performance benefits of reusing textures are still worthwhile with these added constraints? Given that we never deallocate these textures, are you concerned about resource leaks?

fixed — we're now saving one texture at a time that can be reused for every subsequent frame until the map is resized, at which point we delete that texture and create a new one for the new size

Perfect 😄

lucaswoj · 2016-09-26T23:25:15Z

js/ui/light.js

+
+        return this;
+    }
+});


This class could be simplified by taking advantage of the existing StyleDeclaration and StyleTransition classes.

lucaswoj · 2016-09-26T23:27:13Z

js/ui/light.js

+     * @param {LightOptions} options Options describing the target light properties of the transition.
+     * @param {Object} [eventData] Data to propagate to any event listeners.
+     * @fires lightstart
+     * @fires lightend


I like the idea of an events that mark the beginning and end of a style property transition. I'm not sure we need such an event specifically for light properties, however. What do yout think about a follow-up PR that adds transitionstart and transitionend events?

Follow-up PR sounds good 👍

lucaswoj · 2016-09-26T23:28:17Z

js/ui/light.js

+            this.painter.setLight({
+                anchor: anchor
+            });
+        } else throw new Error('light.anchor must be one of: `map`, `viewport`');


All validation logic that can be done in the style spec should be done in the style spec.

Because of the setLight runtime API I think we should validate here, no?

light is associated with the style.

We keep all style validation code separate from GL JS so that we can have a standalone style validation utility. This is used, for example, by the style upload API.

Here is an example of where we use the style spec's validation code to validate layers

lucaswoj · 2016-09-26T23:29:38Z

js/ui/light.js

+            throw new Error('light.direction must be an array of three numbers');
+
+        if (direction[1] < 0 || direction[1] >= 360) util.warnOnce('Azimuthal angle will be wrapped to [0, 360)');
+        if (direction[2] < 0 || direction[2] >= 180) util.warnOnce('Polar angle will be clamped to [0, 180)');


Hard failures or smart fallbacks are preferable to warnings.

lucaswoj · 2016-09-26T23:30:40Z

js/ui/light.js

+            r * Math.sin(azimuthal) * Math.sin(polar),
+            r * Math.cos(polar)
+        ];
+    },


This looks like a good candidate for a standalone util

lbud · 2016-10-07T01:10:13Z

Per mapbox/mapbox-gl-style-spec#240 (comment) I've disabled fill-outline-color for extruded fills in anticipation of that paint property being deprecated for fills entirely in the near future.
CI doesn't agree with my render tests on extrusion patterns, but once those are fixed this is ready to 🚗 💨

lbud · 2016-10-07T01:14:13Z

@dagjomar it is for real :)

…y rendering to the whole screen (when given artificial color frag data)

* Move light into its own UI Map subcomponent * Smoothly transitioning light APIs * Abstract light.direction into spherical coordinates/hide cartesian altogether

…ized

…rawing extrusion

…ender-test sha

lucaswoj

This is amazing @lbud! Congratulations! Not only is this code beautiful but it was delivered with positivity and finesse. I'm so proud to have you in the GL JS family.

🍾 time!

lucaswoj · 2016-10-07T23:53:31Z

And enjoy your vacation!

lbud mentioned this pull request Sep 19, 2016

Extrusion shaders mapbox/mapbox-gl-shaders#25

Merged

lucaswoj suggested changes Sep 26, 2016

View reviewed changes

lucaswoj added the under construction label Oct 5, 2016

lbud mentioned this pull request Oct 7, 2016

Fix z-fighting on overlapping extrusions #3324

Closed

Lauren Budorick added 23 commits October 7, 2016 12:08

first pass at recreating the building branch

c8eadf6

Rm large json, rm building stroke

ebed8ec

Rm shaders

300e373

Incorporate building levels data in demo

455ca3a

Building shadow colors

3436411

building -> extrusion

42b141e

Implement extrusion-opacity

197534c

Have interior rings working (commit before refactoring)

0c23500

factor out extra for loop

3944d49

Building -> Extrusion

b2a5e46

spec names

a48fd60

Make extrusions at least render patterns as if flat

b9c7417

WIP COMMIT: moving pattern extrusions

a75a2f5

WIP: no longer growing patternbldgs

0939cc7

WIP: move extrusion pattern to its own shader

e48e829

extrusion-pattern

e7cfe8d

WIP: antialiasing

828c8b9

Nothing is rendering to the secondary texture, which _is_ successfull…

c808b0d

…y rendering to the whole screen (when given artificial color frag data)

clean up a bit

3cf0395

wip: working ish, except depth

75e87d5

wip: it works! add depth renderbuffer

b365ec9

tweaks

4e79339

fix depth rendering with labels

9b87a8c

Lauren Budorick added 19 commits October 7, 2016 12:12

Fix boundary edge checking, include for both walls and outlines

adb2446

Better checking for boundary edges [ci skip]

461a08f

Fix extrusion patterns [ci skip]

35f2fd9

[wip] intermediate commit

f3e7e19

Lighting APIs:

44dc32c

* Move light into its own UI Map subcomponent * Smoothly transitioning light APIs * Abstract light.direction into spherical coordinates/hide cartesian altogether

eslint, tests

ca480ae

Lighting docs [ci skip]

9c8548b

Fix for missing walls in straight cross-tile features

8ab1080

Use computed paint properties in draw

1cbd0ef

Revert debug page changes, light vs lighting naming conventions

2a76e2f

Address PR comments (tests not ready) [ci skip]

ae99aa0

Separate FillBucket and FillExtrusionBucket, update light tests

c9adf20

Only save 1 viewport-sized texture for reuse; delete if window is res…

f98cf81

…ized

Update shas to see what CI thinks 🙏

4c574ae

Remove unnecessary GL stencil calls, flip depth mask back off after d…

bf64408

…rawing extrusion

Disable fill-outline-color for extruded fills

b3c2d7b

Fix bad depth mask flip, rm unnecessary depth sublayer call, update r…

0441831

…ender-test sha

Round edge distance, update render test sha

d39013a

Rebase, rationalize extrusion shader names, update rebased SHAs

59a3bcb

lbud force-pushed the building_redux_renderbuffer_dds branch from 8d6415e to 59a3bcb Compare October 7, 2016 19:47

Lauren Budorick added 3 commits October 7, 2016 13:31

Update test SHA

5cc4b0e

Update shas

386b3b4

Rename light direction to position

5224fa6

lucaswoj approved these changes Oct 7, 2016

View reviewed changes

Update shas MERGETOWN

6add46a

lbud merged commit c8cbb9d into master Oct 8, 2016

lbud deleted the building_redux_renderbuffer_dds branch October 8, 2016 00:01

1ec5 mentioned this pull request Oct 19, 2016

3D extrusion mapbox/mapbox-gl-native#6745

Closed

lbud mentioned this pull request Feb 8, 2017

Support fill-extrusion stroke style #4231

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add fill-extrude-height and fill-extrude-base properties. #3223

Add fill-extrude-height and fill-extrude-base properties. #3223

lbud commented Sep 19, 2016 •

edited

dagjomar commented Sep 19, 2016

lucaswoj Sep 26, 2016

lbud Oct 6, 2016

lucaswoj Sep 26, 2016

lbud Oct 6, 2016

lucaswoj Sep 26, 2016

lbud Oct 6, 2016

lbud Oct 7, 2016

lbud Oct 7, 2016

lucaswoj Sep 26, 2016

lbud Oct 6, 2016

lucaswoj Sep 26, 2016

lbud Oct 6, 2016

lucaswoj Oct 7, 2016

lucaswoj Sep 26, 2016

lbud Oct 6, 2016

lucaswoj Sep 26, 2016 •

edited

lbud Oct 4, 2016

lucaswoj Sep 26, 2016 •

edited

lbud Sep 27, 2016

lucaswoj Sep 27, 2016

lbud Oct 6, 2016

lucaswoj Sep 26, 2016 •

edited

lbud Oct 6, 2016

lucaswoj Sep 26, 2016

lbud Oct 6, 2016

lbud commented Oct 7, 2016

lbud commented Oct 7, 2016

lucaswoj left a comment

lucaswoj commented Oct 7, 2016

Add fill-extrude-height and fill-extrude-base properties. #3223

Add fill-extrude-height and fill-extrude-base properties. #3223

Conversation

lbud commented Sep 19, 2016 • edited

To do:

Launch Checklist

dagjomar commented Sep 19, 2016

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

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

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

lucaswoj Sep 26, 2016 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

lucaswoj Sep 26, 2016 • edited

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

lucaswoj Sep 26, 2016 • edited

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

lbud commented Oct 7, 2016

lbud commented Oct 7, 2016

lucaswoj left a comment

Choose a reason for hiding this comment

lucaswoj commented Oct 7, 2016

lbud commented Sep 19, 2016 •

edited

lucaswoj Sep 26, 2016 •

edited

lucaswoj Sep 26, 2016 •

edited

lucaswoj Sep 26, 2016 •

edited