Skip to content

Commit

Permalink
wip
Browse files Browse the repository at this point in the history
  • Loading branch information
ibgreen committed Dec 2, 2022
1 parent 1ca51f7 commit 4b9e619
Show file tree
Hide file tree
Showing 6 changed files with 64 additions and 101 deletions.
1 change: 1 addition & 0 deletions examples/playground/index.html
Expand Up @@ -12,6 +12,7 @@
#editor {flex: 0 1 100%;}
#right-pane {flex: 0 1 60%; position: relative;}
</style>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.13.0/mapbox-gl.css' rel='stylesheet' />
</head>
<body>
<div id="app"></div>
Expand Down
4 changes: 3 additions & 1 deletion modules/aggregation-layers/src/grid-aggregation-layer.ts
Expand Up @@ -46,7 +46,9 @@ export default abstract class GridAggregationLayer<
this.setState({
// CPU aggregation results
layerData: {},
gpuGridAggregator: new GPUGridAggregator(this.context.device, {id: `${this.id}-gpu-aggregator`}),
gpuGridAggregator: new GPUGridAggregator(this.context.device, {
id: `${this.id}-gpu-aggregator`
}),
cpuGridAggregator: pointToDensityGridDataCPU
});
}
Expand Down
Expand Up @@ -18,6 +18,7 @@
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.

import {Device} from '@luma.gl/api';
import GL from '@luma.gl/constants';
import {Model, Geometry, FEATURES, hasFeatures, Texture2D, DefaultProps} from '@luma.gl/core';
import {Layer, LayerProps, log, picking, UpdateParameters} from '@deck.gl/core';
Expand Down Expand Up @@ -53,7 +54,9 @@ export default class ScreenGridCellLayer<DataT = any, ExtraPropsT = {}> extends
static layerName = 'ScreenGridCellLayer';
static defaultProps = defaultProps;

static isSupported(gl) {
static isSupported(device: Device) {
// @ts-expect-error
const gl = device.gl as WebGLRenderingContext;
return hasFeatures(gl, [FEATURES.TEXTURE_FLOAT]);
}

Expand All @@ -65,15 +68,14 @@ export default class ScreenGridCellLayer<DataT = any, ExtraPropsT = {}> extends
}

initializeState() {
const {gl} = this.context;
const attributeManager = this.getAttributeManager()!;
attributeManager.addInstanced({
// eslint-disable-next-line @typescript-eslint/unbound-method
instancePositions: {size: 3, update: this.calculateInstancePositions},
instanceCounts: {size: 4, noAlloc: true}
});
this.setState({
model: this._getModel(gl)
model: this._getModel()
});
}

Expand Down Expand Up @@ -141,8 +143,8 @@ export default class ScreenGridCellLayer<DataT = any, ExtraPropsT = {}> extends

// Private Methods

_getModel(gl: WebGLRenderingContext): Model {
return new Model(gl, {
_getModel(): Model {
return new Model(this.context.device, {
...this.getShaders(),
id: this.props.id,
geometry: new Geometry({
Expand Down
Expand Up @@ -154,8 +154,7 @@ export default class ScreenGridLayer<DataT = any, ExtraProps = {}> extends GridA
};

initializeState() {
const {gl} = this.context;
if (!ScreenGridCellLayer.isSupported(gl)) {
if (!ScreenGridCellLayer.isSupported(this.context.device)) {
// max aggregated value is sampled from a float texture
this.setState({supported: false});
log.error(`ScreenGridLayer: ${this.id} is not supported on this browser`)();
Expand All @@ -171,7 +170,7 @@ export default class ScreenGridLayer<DataT = any, ExtraProps = {}> extends GridA
size: 1,
operation: AGGREGATION_OPERATION.SUM,
needMax: true,
maxTexture: getFloatTexture(gl, {id: `${this.id}-max-texture`})
maxTexture: getFloatTexture(this.context.device, {id: `${this.id}-max-texture`})
}
};
this.setState({
Expand Down Expand Up @@ -275,7 +274,7 @@ export default class ScreenGridLayer<DataT = any, ExtraProps = {}> extends GridA
const {viewportChanged} = opts.changeFlags;
let gpuAggregation = opts.props.gpuAggregation;
if (this.state.gpuAggregation !== opts.props.gpuAggregation) {
if (gpuAggregation && !GPUGridAggregator.isSupported(this.context.gl)) {
if (gpuAggregation && !GPUGridAggregator.isSupported(this.context.device)) {
log.warn('GPU Grid Aggregation not supported, falling back to CPU')();
gpuAggregation = false;
}
Expand Down
Expand Up @@ -138,35 +138,43 @@ export default class GPUGridAggregator {
// }
// }

state = {
// per weight GPU resources
weightAttributes: {},
textures: {},
meanTextures: {},
buffers: {},
framebuffers: {},
maxMinFramebuffers: {},
minFramebuffers: {},
maxFramebuffers: {},
equations: {},

// common resources to be deleted
resources: {},

// results
results: {}
};

device: Device;
/** @deprecated */
gl: WebGLRenderingContext;
_hasGPUSupport: boolean;

constructor(device: Device, opts = {}) {
this.id = opts.id || 'gpu-grid-aggregator';
this.gl = gl;
this.state = {
// per weight GPU resources
weightAttributes: {},
textures: {},
meanTextures: {},
buffers: {},
framebuffers: {},
maxMinFramebuffers: {},
minFramebuffers: {},
maxFramebuffers: {},
equations: {},

// common resources to be deleted
resources: {},

// results
results: {}
};
this.device = device;

// @ts-expect-error;
this.gl = device.gl as WebGLRenderingContext;
this._hasGPUSupport =
isWebGL2(gl) && // gl_InstanceID usage in min/max calculation shaders
hasFeatures(
this.gl,
isWebGL2(this.gl) && // gl_InstanceID usage in min/max calculation shaders
hasFeatures(this.gl, [
FEATURES.BLEND_EQUATION_MINMAX, // set min/max blend modes
FEATURES.COLOR_ATTACHMENT_RGBA32F, // render to float texture
FEATURES.TEXTURE_FLOAT // sample from a float texture
);
]);
if (this._hasGPUSupport) {
this._setupModels();
}
Expand Down Expand Up @@ -384,7 +392,10 @@ export default class GPUGridAggregator {
_renderToMaxMinTexture(opts) {
const {id, parameters, gridSize, minOrMaxFb, combineMaxMin, clearParams = {}} = opts;
const {framebuffers} = this.state;
const {gl, allAggregationModel} = this;
const {allAggregationModel} = this;

// @ts-expect-error
const gl = this.device.gl as WebGLRenderingContext;

withParameters(
gl,
Expand Down Expand Up @@ -492,21 +503,21 @@ export default class GPUGridAggregator {
textures[id] =
weights[id].aggregationTexture ||
textures[id] ||
getFloatTexture(this.gl, {id: `${id}-texture`, width: numCol, height: numRow});
getFloatTexture(this.device, {id: `${id}-texture`, width: numCol, height: numRow});
textures[id].resize(framebufferSize);
let texture = textures[id];
if (operation === AGGREGATION_OPERATION.MEAN) {
// For MEAN, we first aggregatet into a temp texture
meanTextures[id] =
meanTextures[id] ||
getFloatTexture(this.gl, {id: `${id}-mean-texture`, width: numCol, height: numRow});
getFloatTexture(this.device, {id: `${id}-mean-texture`, width: numCol, height: numRow});
meanTextures[id].resize(framebufferSize);
texture = meanTextures[id];
}
if (framebuffers[id]) {
framebuffers[id].attach({[GL.COLOR_ATTACHMENT0]: texture});
} else {
framebuffers[id] = getFramebuffer(this.gl, {
framebuffers[id] = getFramebuffer(this.device, {
id: `${id}-fb`,
width: numCol,
height: numRow,
Expand All @@ -520,13 +531,13 @@ export default class GPUGridAggregator {
if (needMin && needMax && combineMaxMin) {
if (!maxMinFramebuffers[id]) {
texture = weights[id].maxMinTexture || this._getMinMaxTexture(`${id}-maxMinTexture`);
maxMinFramebuffers[id] = getFramebuffer(this.gl, {id: `${id}-maxMinFb`, texture});
maxMinFramebuffers[id] = getFramebuffer(this.device, {id: `${id}-maxMinFb`, texture});
}
} else {
if (needMin) {
if (!minFramebuffers[id]) {
texture = weights[id].minTexture || this._getMinMaxTexture(`${id}-minTexture`);
minFramebuffers[id] = getFramebuffer(this.gl, {
minFramebuffers[id] = getFramebuffer(this.device, {
id: `${id}-minFb`,
texture
});
Expand All @@ -535,7 +546,7 @@ export default class GPUGridAggregator {
if (needMax) {
if (!maxFramebuffers[id]) {
texture = weights[id].maxTexture || this._getMinMaxTexture(`${id}-maxTexture`);
maxFramebuffers[id] = getFramebuffer(this.gl, {
maxFramebuffers[id] = getFramebuffer(this.device, {
id: `${id}-maxFb`,
texture
});
Expand All @@ -550,19 +561,18 @@ export default class GPUGridAggregator {
_getMinMaxTexture(name) {
const {resources} = this.state;
if (!resources[name]) {
resources[name] = getFloatTexture(this.gl, {id: `resourceName`});
resources[name] = getFloatTexture(this.device, {id: 'resourceName'});
}
return resources[name];
}

_setupModels({numCol = 0, numRow = 0} = {}) {
const {gl} = this;
const {shaderOptions} = this.state;
this.gridAggregationModel?.delete();
this.gridAggregationModel = getAggregationModel(gl, shaderOptions);
this.gridAggregationModel = getAggregationModel(this.device, shaderOptions);
if (!this.allAggregationModel) {
const instanceCount = numCol * numRow;
this.allAggregationModel = getAllAggregationModel(gl, instanceCount);
this.allAggregationModel = getAllAggregationModel(this.device, instanceCount);
}
}

Expand Down Expand Up @@ -635,7 +645,7 @@ function deleteResources(resources) {
});
}

function getAggregationModel(gl, shaderOptions) {
function getAggregationModel(device: Device, shaderOptions) {
const shaders = mergeShaders(
{
vs: AGGREGATE_TO_GRID_VS,
Expand All @@ -645,16 +655,16 @@ function getAggregationModel(gl, shaderOptions) {
shaderOptions
);

return new Model(gl, {
return new Model(device, {
id: 'Gird-Aggregation-Model',
vertexCount: 1,
drawMode: GL.POINTS,
...shaders
});
}

function getAllAggregationModel(gl, instanceCount) {
return new Model(gl, {
function getAllAggregationModel(device: Device, instanceCount) {
return new Model(device, {
id: 'All-Aggregation-Model',
vs: AGGREGATE_ALL_VS,
fs: AGGREGATE_ALL_FS,
Expand All @@ -669,8 +679,8 @@ function getAllAggregationModel(gl, instanceCount) {
});
}

function getMeanTransform(gl, opts) {
return new Transform(gl, {
function getMeanTransform(device: Device, opts) {
return new Transform(device, {
vs: TRANSFORM_MEAN_VS,
_targetTextureVarying: 'meanValues',
...opts
Expand Down
51 changes: 0 additions & 51 deletions modules/aggregation-layers/src/utils/resource-utils.js

This file was deleted.

0 comments on commit 4b9e619

Please sign in to comment.