Use UBO for binOptions

visgl · Sep 8, 2024 · 01ff5c5 · 01ff5c5
1 parent 88bde1b
commit 01ff5c5
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 15 deletions.
diff --git a/test/apps/aggregator/app.ts b/test/apps/aggregator/app.ts
@@ -1,24 +1,30 @@
 import {Deck, OrthographicView} from '@deck.gl/core';
 import {HistogramLayer} from './histogram-layer';
 
-new Deck({
+const deckgl = new Deck({
   views: new OrthographicView(),
   initialViewState: {
     target: [0, 0, 0],
     zoom: 1
   },
-  controller: true,
-  layers: [
-    new HistogramLayer({
-      data: generateData(10000, 0, 100),
-      getPosition: d => d,
-      gpuAggregation: true,
-      binSize: 1,
-      heightScale: 1
-    })
-  ]
+  controller: true
 });
 
+const slider = document.getElementById('bin-size-slider') as HTMLInputElement;
+slider.oninput = updateLayer;
+updateLayer();
+
+function updateLayer() {
+  const layer = new HistogramLayer({
+    data: generateData(10000, 0, 100),
+    getPosition: d => d,
+    gpuAggregation: true,
+    binSize: Number(slider.value),
+    heightScale: 1
+  });
+  deckgl.setProps({layers: [layer]});
+}
+
 function generateData(count: number, mean: number, stdev: number) {
   const result: number[] = [];
   for (let i = 0; i < count; i++) {

diff --git a/test/apps/aggregator/histogram-layer.ts b/test/apps/aggregator/histogram-layer.ts
@@ -7,6 +7,7 @@ import {
 import {GridCellLayer} from '@deck.gl/layers';
 import type {Accessor, Color, DefaultProps, UpdateParameters} from '@deck.gl/core';
 import {Matrix4} from '@math.gl/core';
+import type {ShaderModule} from '@luma.gl/shadertools';
 
 export type HistogramLayerProps<DataT = unknown> = {
   data: DataT[];
@@ -29,6 +30,22 @@ const defaultProps: DefaultProps<HistogramLayerProps> = {
   heightScale: {type: 'number', min: 0, value: 1}
 };
 
+type BinOptions = {
+  binSize: number;
+};
+
+const binOptionsUniforms = {
+  name: 'binOptions',
+  vs: /* glsl */ `\
+  uniform binOptionsUniforms {
+    float binSize;
+  } binOptions;
+  `,
+  uniformTypes: {
+    binSize: 'f32'
+  }
+} as const satisfies ShaderModule<BinOptions>;
+
 export class HistogramLayer<DataT = unknown> extends _AggregationLayer<
   DataT,
   Required<HistogramLayerProps<DataT>>
@@ -48,13 +65,14 @@ export class HistogramLayer<DataT = unknown> extends _AggregationLayer<
         dimensions: 1,
         channelCount: 1,
         bufferLayout: this.getAttributeManager()!.getBufferLayouts({isInstanced: false}),
+        modules: [binOptionsUniforms],
         vs: `
   uniform float binSize;
   in float position;
   in float weight;
 
   void getBin(out int binId) {
-    binId = int(floor(position / binSize));
+    binId = int(floor(position / binOptions.binSize));
   }
   void getValue(out float value) {
     value = weight;
@@ -145,7 +163,7 @@ export class HistogramLayer<DataT = unknown> extends _AggregationLayer<
 
   renderLayers() {
     const {aggregator} = this.state;
-    const {heightScale, fillColor} = this.props;
+    const {heightScale, fillColor, binSize} = this.props;
     const binAttribute = aggregator.getBins();
     const valueAttribute = aggregator.getResult(0);
 
@@ -160,8 +178,8 @@ export class HistogramLayer<DataT = unknown> extends _AggregationLayer<
           getElevation: valueAttribute
         }
       },
-      modelMatrix: new Matrix4().rotateX(Math.PI / 2),
-      cellSize: 0.9,
+      modelMatrix: new Matrix4().rotateX(Math.PI / 2).scale([binSize, 1, 1]),
+      cellSize: 0.9 * binSize,
       extruded: true,
       elevationScale: heightScale,
       getFillColor: fillColor

diff --git a/test/apps/aggregator/index.html b/test/apps/aggregator/index.html
@@ -11,10 +11,19 @@
         height: 100vh;
         overflow: hidden;
       }
+      #controls {
+        position: fixed;
+        top: 10px;
+        left: 10px;
+        z-index: 1;
+      }
     </style>
   </head>
 
   <body>
     <script type="module" src="app.ts"></script>
+    <div id="controls">
+      <input id="bin-size-slider" type="range" min="0.1" max="10" step="0.1" value="1" />
+    </div>
   </body>
 </html>