feat(ColumnLayer): `getBevel` & `getRadius` by charlieforward9 · Pull Request #9933 · visgl/deck.gl

charlieforward9 · 2026-01-08T21:10:16Z

Screen.Recording.2026-01-08.151234.mp4

Background

Change List

This pull request adds support for customizable cap shapes to the ColumnLayer, allowing users to render columns with flat, rounded (dome), or pointy (cone) tops. The implementation includes updates to the geometry generation logic, new documentation, an interactive example, and tests to ensure correctness.

Column Cap Shape Feature

Added a new capShape property to ColumnLayer and its geometry, supporting 'flat', 'rounded', and 'pointy' options for the top cap. This is reflected in the layer props, geometry props, and default values. [1] [2] [3] [4]
Updated the geometry generation logic in column-geometry.ts to create the appropriate vertex and normal data for each cap shape, including new algorithms for dome and cone tops. [1] [2] [3]

Documentation and Example

Documented the new capShape property in the API reference and added a dedicated interactive example with usage instructions and controls for cap shape and disk resolution. [1] [2] [3] [4] [5]

Testing

Added unit tests to verify geometry generation for all cap shapes and new render test cases for the pointy and rounded cap options. [1] [2]

Internal Layer Logic

Updated internal layer methods to pass the capShape property through geometry creation and trigger geometry updates when capShape changes. [1] [2]

These changes collectively provide a more flexible and visually rich column rendering capability for deck.gl.

Co-authored-by: charlieforward9 <62311337+charlieforward9@users.noreply.github.com>

felixpalmer

Nice idea ❤️ . Did you also consider implementing this as a bevel?

felixpalmer · 2026-01-09T10:28:26Z

      getElevation: h => h.value * 5000
    }
+  ),
+  genColumnLayerTestCase(


You're missing the golden images

per-instance bevel control with getBevel accessor Replace capShape prop with unified getBevel accessor that supports: - 'flat': No bevel (flat top) - 'dome': Rounded dome with smooth normals - 'cone': Pointed cone shape - {segs, height, bulge?}: Full per-instance control - segs: shape type (0-1=flat, 2=cone, 3+=dome) - height: bevel height in world units (unbounded) - bulge: curve factor affecting radius (-1 to 1+) Layer-level bevelSegments prop controls geometry resolution. Changes: - Add BevelProp type with string shortcuts and object form - Add three instanced attributes for per-instance bevel control - Update vertex shader to decode bevel parameters and apply bulge - Add wireframe rendering for bevel cap - Update layer-browser with 3-select dropdown for getBevel - Remove old column-cap-shape example - Update documentation Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

…ions in GLSL

charlieforward9 · 2026-01-10T12:32:37Z

@felixpalmer , introducing getBevel = (d) => {{segs: d.segs, height: d.heigth, bulge: d.bulge}} | "flat" | "cone" | "dome"

Unintentionally just created the TreeLayer, more on that later haha

getBevel.mov

I put a field into example/layer-browser with a simple select field. I could also land an update to the dataset in https://deck.gl/docs/api-reference/layers/column-layer in a few days

charlieforward9 · 2026-01-10T12:44:16Z

Gemini_Generated_Image_gyt77hgyt77hgyt7 (1)

…butes Changed instanceBevelHeights, instanceBevelSegs, and instanceBevelBulge from inline accessor functions to string accessors with transform functions. This fixes an issue where inline accessor functions captured `this` at definition time, causing stale props when layers were matched and state transferred between instances. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

…ntrol - Add getRadius prop that returns radius values per-instance - Add instanceRadii attribute to support per-instance rendering - Update vertex shader to multiply radius uniform by instanceRadii - radius prop acts as a scale factor (similar to radiusScale in ScatterplotLayer) - Final radius = radius * getRadius(d) - Add tests for getRadius accessor with function and constant values - Add documentation with usage examples Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

charlieforward9 · 2026-01-11T01:07:01Z

Screen.Recording.2026-01-10.at.8.05.31.PM.mov

charlieforward9 · 2026-01-11T03:05:11Z

Added `getRadius` accessor

This commit adds the getRadius accessor for per-instance radius control:

New Features:

getRadius prop accepts number or accessor function
instanceRadii attribute for per-instance rendering
Final radius = radius * getRadius(d) (similar to radiusScale in ScatterplotLayer)
Works with all radiusUnits options

Usage:

new ColumnLayer({
  radius: 1,                      // Scale factor
  getRadius: d => d.canopyRadius, // Per-instance radius
  radiusUnits: 'meters',
});

Documentation: Added to docs/api-reference/layers/column-layer.md
Tests: Added accessor and constant value tests in core-layers.spec.ts

felixpalmer · 2026-01-16T12:12:47Z

 in vec4 instanceFillColors;
 in vec4 instanceLineColors;
 in float instanceStrokeWidths;
+in float instanceRadii;


Adding extra attributes has a cost and will slow down the layer even if they are unused. There is also a hard cap on how many attributes a shader can have and this can prevent extensions working (as they add their own). I would recommend removing them.

I do notice performance impact so I would like to find some ways of achieving the same functionality without the cost.

Would SimpleMeshLayer be a better base?

I cant think of a more efficient way of generating the shape of a tree without combining multiple sublayers.

felixpalmer · 2026-01-16T12:14:23Z

+ * - {segs, height, bulge?}: Full control
+ *   - segs: number of bevel segments (0-1=flat, 2=cone, 3+=dome)
+ *   - height: bevel height in world units (must be > 0, unbounded)
+ *   - bulge: curve factor (-1 to 1+), 0=standard dome, negative=concave, positive=convex bulge


I think this is beginning to be feature creep, is this really that useful?

Its added a lot of value to our use case, we'd like to keep it and expand on it in the future.

charlieforward9 · 2026-01-23T02:18:28Z

Ill add it to the experimental package

…port This extension adds per-instance bevel shapes (dome, cone, flat) and radius scaling to ColumnLayer for hierarchical/tree visualizations. Based on: - visgl/deck.gl-community#470 (ExperimentalColumnLayer) - visgl#9933 (Original getBevel & getRadius) Following the recommendation from Chris Gervant to implement this as an extension rather than a new layer.

Copilot AI and others added 11 commits January 8, 2026 15:53

Add capShape property to ColumnLayer for customizable column tops

7423d19

Co-authored-by: charlieforward9 <62311337+charlieforward9@users.noreply.github.com>

Add tests for capShape property in ColumnLayer

d2d867c

Co-authored-by: charlieforward9 <62311337+charlieforward9@users.noreply.github.com>

Fix geometry generation for pointy and rounded cap shapes

c0606db

Co-authored-by: charlieforward9 <62311337+charlieforward9@users.noreply.github.com>

Address code review feedback: improve comments and calculations

17b13b3

Co-authored-by: charlieforward9 <62311337+charlieforward9@users.noreply.github.com>

Fix normal calculations for custom vertices and flat caps

5bfa557

Co-authored-by: charlieforward9 <62311337+charlieforward9@users.noreply.github.com>

Add accessible ColumnLayer cap shape examples to gallery

8970785

Co-authored-by: charlieforward9 <62311337+charlieforward9@users.noreply.github.com>

Replace gallery examples with proper get-started example

a22fe25

Co-authored-by: charlieforward9 <62311337+charlieforward9@users.noreply.github.com>

Fix capShape property definition to enable proper comparison

0427044

Co-authored-by: charlieforward9 <62311337+charlieforward9@users.noreply.github.com>

Add missing degenerate vertices for triangle strip transitions

a4404a5

Co-authored-by: charlieforward9 <62311337+charlieforward9@users.noreply.github.com>

Add comprehensive logging to debug capShape updates

faa7284

Co-authored-by: charlieforward9 <62311337+charlieforward9@users.noreply.github.com>

Remove debug logging - clean up for final PR

343972d

Co-authored-by: charlieforward9 <62311337+charlieforward9@users.noreply.github.com>

charlieforward9 changed the title ~~feat: ColumnLayer.capShape~~ feat: ColumnLayer capShape Jan 8, 2026

charlieforward9 changed the title ~~feat: ColumnLayer capShape~~ feat(ColumnLayer): capShape Jan 9, 2026

felixpalmer requested changes Jan 9, 2026

View reviewed changes

charlieforward9 changed the title ~~feat(ColumnLayer): capShape~~ feat(ColumnLayer): getBevel Jan 10, 2026

charlieforward9 added 2 commits January 10, 2026 06:58

refactor(column-layer): Simplify vertex processing and bevel calculat…

5f294d4

…ions in GLSL

charlieforward9 requested a review from felixpalmer January 10, 2026 12:43

charlieforward9 changed the title ~~feat(ColumnLayer): getBevel~~ feat(ColumnLayer): getBevel & getRadius Jan 11, 2026

felixpalmer requested changes Jan 16, 2026

View reviewed changes

charlieforward9 mentioned this pull request Jan 16, 2026

[RFC] Trees #9942

Closed

Copilot AI mentioned this pull request Jan 23, 2026

feat(experimental/ColumnLayer) Trees visgl/deck.gl-community#470

Closed

charlieforward9 closed this Jan 23, 2026

charlieforward9 mentioned this pull request Jan 23, 2026

feat(geo-layers/GlobalClusterLayer) visgl/deck.gl-community#469

Merged

Copilot AI mentioned this pull request Feb 4, 2026

feat: add ColumnShapeExtension with per-instance bevel and radius support NEW-HEAT/deck.gl#5

Closed

charlieforward9 mentioned this pull request Feb 9, 2026

feat(extensions): add ColumnShapeExtension for per-instance bevel shapes #10003

Closed

5 tasks

charlieforward9 linked an issue Feb 20, 2026 that may be closed by this pull request

[RFC] Trees #9942

Closed

Copilot AI mentioned this pull request Feb 25, 2026

Add cap prop to ColumnLayer for dome and cone top geometry #10038

Closed

Conversation

charlieforward9 commented Jan 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Background

Change List

These changes collectively provide a more flexible and visually rich column rendering capability for deck.gl.

Uh oh!

felixpalmer left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

felixpalmer Jan 9, 2026

Choose a reason for hiding this comment

Uh oh!

charlieforward9 commented Jan 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

charlieforward9 commented Jan 10, 2026

Uh oh!

charlieforward9 commented Jan 11, 2026

Uh oh!

charlieforward9 commented Jan 11, 2026

Added getRadius accessor

Uh oh!

felixpalmer Jan 16, 2026

Choose a reason for hiding this comment

Uh oh!

charlieforward9 Jan 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

felixpalmer Jan 16, 2026

Choose a reason for hiding this comment

Uh oh!

charlieforward9 Jan 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

charlieforward9 commented Jan 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

charlieforward9 commented Jan 8, 2026 •

edited

Loading

charlieforward9 commented Jan 10, 2026 •

edited

Loading

Added `getRadius` accessor

charlieforward9 Jan 22, 2026 •

edited

Loading

charlieforward9 Jan 22, 2026 •

edited

Loading

charlieforward9 commented Jan 23, 2026 •

edited

Loading