Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: Start replacing gl with device (v9) #7464

Merged
merged 3 commits into from Dec 3, 2022
Merged

feat: Start replacing gl with device (v9) #7464

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1ca51f7
feat: Start replacing `gl` with `device`
ibgreen Dec 1, 2022
4b9e619
wip
ibgreen Dec 2, 2022
61a07ce
wip
ibgreen Dec 2, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 1 addition & 0 deletions examples/playground/index.html
View file
Open in desktop
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
2 changes: 1 addition & 1 deletion modules/aggregation-layers/src/contour-layer/contour-layer.ts
View file
Open in desktop
Expand Up @@ -239,7 +239,7 @@ export default class ContourLayer<DataT = any, ExtraPropsT = {}> extends GridAgg
const cellSizeChanged = oldProps.cellSize !== cellSize;
let gpuAggregation = props.gpuAggregation;
if (this.state.gpuAggregation !== 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
8 changes: 4 additions & 4 deletions modules/aggregation-layers/src/gpu-grid-layer/gpu-grid-cell-layer.ts
View file
Open in desktop
Expand Up @@ -83,7 +83,7 @@ export default class GPUGridCellLayer extends Layer<_GPUGridCellLayerProps> {
});
}

initializeState({gl}: LayerContext) {
initializeState(): void {
const attributeManager = this.getAttributeManager()!;
attributeManager.addInstanced({
colors: {
Expand All @@ -95,13 +95,13 @@ export default class GPUGridCellLayer extends Layer<_GPUGridCellLayerProps> {
noAlloc: true
}
});
const model = this._getModel(gl);
const model = this._getModel();
this._setupUniformBuffer(model);
this.setState({model});
}

_getModel(gl: WebGLRenderingContext): Model {
return new Model(gl, {
_getModel(): Model {
return new Model(this.context.device, {
...this.getShaders(),
id: this.props.id,
geometry: new CubeGeometry(),
Expand Down
8 changes: 4 additions & 4 deletions modules/aggregation-layers/src/gpu-grid-layer/gpu-grid-layer.ts
View file
Open in desktop
Expand Up @@ -175,8 +175,8 @@ export default class GPUGridLayer<DataT = any, ExtraPropsT = {}> extends GridAgg
static layerName = 'GPUGridLayer';
static defaultProps = defaultProps;

initializeState({gl}: LayerContext): void {
const isSupported = GPUGridAggregator.isSupported(gl);
initializeState({device}: LayerContext): void {
const isSupported = GPUGridAggregator.isSupported(device);
if (!isSupported) {
log.error('GPUGridLayer is not supported on this browser, use GridLayer instead')();
}
Expand All @@ -192,7 +192,7 @@ export default class GPUGridLayer<DataT = any, ExtraPropsT = {}> extends GridAgg
needMin: true,
needMax: true,
combineMaxMin: true,
maxMinBuffer: new Buffer(gl, {
maxMinBuffer: new Buffer(device, {
byteLength: 4 * 4,
accessor: {size: 4, type: GL.FLOAT, divisor: 1}
})
Expand All @@ -201,7 +201,7 @@ export default class GPUGridLayer<DataT = any, ExtraPropsT = {}> extends GridAgg
needMin: true,
needMax: true,
combineMaxMin: true,
maxMinBuffer: new Buffer(gl, {
maxMinBuffer: new Buffer(device, {
byteLength: 4 * 4,
accessor: {size: 4, type: GL.FLOAT, divisor: 1}
})
Expand Down
5 changes: 3 additions & 2 deletions modules/aggregation-layers/src/grid-aggregation-layer.ts
View file
Open in desktop
Expand Up @@ -42,12 +42,13 @@ export default abstract class GridAggregationLayer<
};

initializeAggregationLayer({dimensions}) {
const {gl} = this.context;
super.initializeAggregationLayer(dimensions);
this.setState({
// CPU aggregation results
layerData: {},
gpuGridAggregator: new GPUGridAggregator(gl, {id: `${this.id}-gpu-aggregator`}),
gpuGridAggregator: new GPUGridAggregator(this.context.device, {
id: `${this.id}-gpu-aggregator`
}),
cpuGridAggregator: pointToDensityGridDataCPU
});
}
Expand Down
19 changes: 8 additions & 11 deletions modules/aggregation-layers/src/heatmap-layer/heatmap-layer.ts
View file
Open in desktop
Expand Up @@ -335,7 +335,7 @@ export default class HeatmapLayer<DataT = any, ExtraPropsT = {}> extends Aggrega

// override Composite layer private method to create AttributeManager instance
_getAttributeManager() {
return new AttributeManager(this.context.gl, {
return new AttributeManager(this.context.device, {
id: this.props.id,
stats: this.context.stats
});
Expand Down Expand Up @@ -364,18 +364,17 @@ export default class HeatmapLayer<DataT = any, ExtraPropsT = {}> extends Aggrega
}

_createTextures() {
const {gl} = this.context;
const {textureSize, format, type} = this.state;

this.setState({
weightsTexture: new Texture2D(gl, {
weightsTexture: new Texture2D(this.context.device, {
width: textureSize,
height: textureSize,
format,
type,
...TEXTURE_OPTIONS
}),
maxWeightsTexture: new Texture2D(gl, {format, type, ...TEXTURE_OPTIONS}) // 1 X 1 texture,
maxWeightsTexture: new Texture2D(this.context.device, {format, type, ...TEXTURE_OPTIONS}) // 1 X 1 texture,
});
}

Expand Down Expand Up @@ -419,12 +418,11 @@ export default class HeatmapLayer<DataT = any, ExtraPropsT = {}> extends Aggrega
}

_createWeightsTransform(shaders = {}) {
const {gl} = this.context;
let {weightsTransform} = this.state;
const {weightsTexture} = this.state;
weightsTransform?.delete();

weightsTransform = new Transform(gl, {
weightsTransform = new Transform(this.context.device, {
id: `${this.id}-weights-transform`,
elementCount: 1,
_targetTexture: weightsTexture,
Expand All @@ -435,15 +433,14 @@ export default class HeatmapLayer<DataT = any, ExtraPropsT = {}> extends Aggrega
}

_setupResources() {
const {gl} = this.context;
this._createTextures();
const {textureSize, weightsTexture, maxWeightsTexture} = this.state;

const weightsTransformShaders = this.getShaders('weights-transform');
this._createWeightsTransform(weightsTransformShaders);

const maxWeightsTransformShaders = this.getShaders('max-weights-transform');
const maxWeightTransform = new Transform(gl, {
const maxWeightTransform = new Transform(this.context.device, {
id: `${this.id}-max-weights-transform`,
_sourceTextures: {
inTexture: weightsTexture
Expand All @@ -459,11 +456,11 @@ export default class HeatmapLayer<DataT = any, ExtraPropsT = {}> extends Aggrega
maxWeightsTexture,
maxWeightTransform,
zoom: null,
triPositionBuffer: new Buffer(gl, {
triPositionBuffer: new Buffer(this.context.device, {
byteLength: 48,
accessor: {size: 3}
}),
triTexCoordBuffer: new Buffer(gl, {
triTexCoordBuffer: new Buffer(this.context.device, {
byteLength: 48,
accessor: {size: 2}
})
Expand Down Expand Up @@ -565,7 +562,7 @@ export default class HeatmapLayer<DataT = any, ExtraPropsT = {}> extends Aggrega
width: colorRange.length
});
} else {
colorTexture = new Texture2D(this.context.gl, {
colorTexture = new Texture2D(this.context.device, {
data: colors,
width: colorRange.length,
height: 1,
Expand Down
9 changes: 5 additions & 4 deletions modules/aggregation-layers/src/heatmap-layer/triangle-layer.ts
View file
Open in desktop
Expand Up @@ -18,6 +18,7 @@
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.

import type {Device} from '@luma.gl/api';
import GL from '@luma.gl/constants';
import {Model, Geometry, Texture2D} from '@luma.gl/core';
import {Layer, LayerContext, project32} from '@deck.gl/core';
Expand All @@ -42,21 +43,21 @@ export default class TriangleLayer extends Layer<_TriangleLayerProps> {
return {vs, fs, modules: [project32]};
}

initializeState({gl}: LayerContext): void {
initializeState({device}: LayerContext): void {
const attributeManager = this.getAttributeManager()!;
attributeManager.add({
positions: {size: 3, noAlloc: true},
texCoords: {size: 2, noAlloc: true}
});
this.setState({
model: this._getModel(gl)
model: this._getModel(device)
});
}

_getModel(gl: WebGLRenderingContext): Model {
_getModel(device: Device): Model {
const {vertexCount} = this.props;

return new Model(gl, {
return new Model(device, {
...this.getShaders(),
id: this.props.id,
geometry: new Geometry({
Expand Down
12 changes: 7 additions & 5 deletions modules/aggregation-layers/src/screen-grid-layer/screen-grid-cell-layer.ts
View file
Open in desktop
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
7 changes: 3 additions & 4 deletions modules/aggregation-layers/src/screen-grid-layer/screen-grid-layer.ts
View file
Open in desktop
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
0 .../src/utils/aggregation-operation-utils.js → .../src/utils/aggregation-operation-utils.ts
View file
Open in desktop
File renamed without changes.
0 ...grid-aggregation/aggregate-all-fs.glsl.js → ...grid-aggregation/aggregate-all-fs.glsl.ts
View file
Open in desktop
File renamed without changes.
0 ...grid-aggregation/aggregate-all-vs.glsl.js → ...grid-aggregation/aggregate-all-vs.glsl.ts
View file
Open in desktop
File renamed without changes.
0 ...-aggregation/aggregate-to-grid-fs.glsl.js → ...-aggregation/aggregate-to-grid-fs.glsl.ts
View file
Open in desktop
File renamed without changes.
0 ...-aggregation/aggregate-to-grid-vs.glsl.js → ...-aggregation/aggregate-to-grid-vs.glsl.ts
View file
Open in desktop
File renamed without changes.
0 ...regation/gpu-grid-aggregator-constants.js → ...regation/gpu-grid-aggregator-constants.ts
View file
Open in desktop
File renamed without changes.
0 ...-aggregation/gpu-grid-aggregator-utils.js → ...-aggregation/gpu-grid-aggregator-utils.ts
View file
Open in desktop
File renamed without changes.
6 changes: 3 additions & 3 deletions modules/aggregation-layers/src/utils/gpu-grid-aggregation/gpu-grid-aggregator.md
View file
Open in desktop
Expand Up @@ -4,7 +4,7 @@

# Usage (Aggregation in World space)
```
const aggregator = new GPUGridAggregator(gl);
const aggregator = new GPUGridAggregator(device);
const results = aggregator.run({
attributes, // position and weight attributes
Expand All @@ -29,7 +29,7 @@ const results = aggregator.run({
You can also perform aggregation in screen space by provide a viewport and set `projectPoints` to true. Aggregator will first project positions and then aggregate them in screen space.

```
const aggregator = new GPUGridAggregator(gl);
const aggregator = new GPUGridAggregator(device);
const results = aggregator.run({
attributes, // position and weight attributes
Expand Down Expand Up @@ -57,7 +57,7 @@ const results = aggregator.run({

‘ScreenGridAggregator’ constructor takes following arguments and constructs an object.

* gl (WebGLContext) : used for querying WebGL features and creating required webgl resources.
* device (WebGLContext) : used for querying WebGL features and creating required webgl resources.
* opts (Object) : Optionally contains and ‘id’ and ‘sahderCache’ object for caching/re-using shaders.


Expand Down