Skip to content

Commit

Permalink
Introduce an explicit "upload" step to rendering
Browse files Browse the repository at this point in the history 
In this step, all pending vertex and index buffers are uploaded, rather than them being uploaded in the course of rendering. This brings gl-js closer to the native behavior, and in theory is more efficient.
  • Loading branch information
@jfirebaugh
jfirebaugh committed Aug 25, 2017
1 parent 198de44 commit 57f53c0
Show file tree
Hide file tree
Showing 19 changed files with 218 additions and 196 deletions.
3 changes: 3 additions & 0 deletions src/data/bucket.js
View file
Expand Up @@ -60,6 +60,9 @@ export interface Bucket {
isEmpty(): boolean;
serialize(transferables?: Array<Transferable>): SerializedBucket;

upload(gl: WebGLRenderingContext): void;
uploaded: boolean;

/**
* Release the WebGL resources associated with the buffers. Note that because
* buckets are shared between layers having the same layout properties, they
Expand Down
23 changes: 12 additions & 11 deletions src/data/bucket/circle_bucket.js
View file
Expand Up @@ -62,24 +62,18 @@ class CircleBucket implements Bucket {

programConfigurations: ProgramConfigurationSet;
segments: SegmentVector;
uploaded: boolean;

constructor(options: any) {
this.zoom = options.zoom;
this.overscaling = options.overscaling;
this.layers = options.layers;
this.index = options.index;

if (options.layoutVertexArray) {
this.layoutVertexBuffer = new VertexBuffer(options.layoutVertexArray, LayoutVertexArrayType.serialize());
this.indexBuffer = new IndexBuffer(options.indexArray);
this.programConfigurations = ProgramConfigurationSet.deserialize(circleInterface, options.layers, options.zoom, options.programConfigurations);
this.segments = new SegmentVector(options.segments);
} else {
this.layoutVertexArray = new LayoutVertexArrayType();
this.indexArray = new TriangleIndexArray();
this.programConfigurations = new ProgramConfigurationSet(circleInterface, options.layers, options.zoom);
this.segments = new SegmentVector();
}
this.layoutVertexArray = new LayoutVertexArrayType(options.layoutVertexArray);
this.indexArray = new TriangleIndexArray(options.indexArray);
this.programConfigurations = new ProgramConfigurationSet(circleInterface, options.layers, options.zoom, options.programConfigurations);
this.segments = new SegmentVector(options.segments);
}

populate(features: Array<IndexedFeature>, options: PopulateParameters) {
Expand All @@ -106,7 +100,14 @@ class CircleBucket implements Bucket {
};
}

upload(gl: WebGLRenderingContext) {
this.layoutVertexBuffer = new VertexBuffer(gl, this.layoutVertexArray);
this.indexBuffer = new IndexBuffer(gl, this.indexArray);
this.programConfigurations.upload(gl);
}

destroy() {
if (!this.layoutVertexBuffer) return;
this.layoutVertexBuffer.destroy();
this.indexBuffer.destroy();
this.programConfigurations.destroy();
Expand Down
30 changes: 15 additions & 15 deletions src/data/bucket/fill_bucket.js
View file
Expand Up @@ -53,28 +53,20 @@ class FillBucket implements Bucket {
programConfigurations: ProgramConfigurationSet;
segments: SegmentVector;
segments2: SegmentVector;
uploaded: boolean;

constructor(options: any) {
this.zoom = options.zoom;
this.overscaling = options.overscaling;
this.layers = options.layers;
this.index = options.index;

if (options.layoutVertexArray) {
this.layoutVertexBuffer = new VertexBuffer(options.layoutVertexArray, LayoutVertexArrayType.serialize());
this.indexBuffer = new IndexBuffer(options.indexArray);
this.indexBuffer2 = new IndexBuffer(options.indexArray2);
this.programConfigurations = ProgramConfigurationSet.deserialize(fillInterface, options.layers, options.zoom, options.programConfigurations);
this.segments = new SegmentVector(options.segments);
this.segments2 = new SegmentVector(options.segments2);
} else {
this.layoutVertexArray = new LayoutVertexArrayType();
this.indexArray = new TriangleIndexArray();
this.indexArray2 = new LineIndexArray();
this.programConfigurations = new ProgramConfigurationSet(fillInterface, options.layers, options.zoom);
this.segments = new SegmentVector();
this.segments2 = new SegmentVector();
}
this.layoutVertexArray = new LayoutVertexArrayType(options.layoutVertexArray);
this.indexArray = new TriangleIndexArray(options.indexArray);
this.indexArray2 = new LineIndexArray(options.indexArray2);
this.programConfigurations = new ProgramConfigurationSet(fillInterface, options.layers, options.zoom, options.programConfigurations);
this.segments = new SegmentVector(options.segments);
this.segments2 = new SegmentVector(options.segments2);
}

populate(features: Array<IndexedFeature>, options: PopulateParameters) {
Expand Down Expand Up @@ -103,7 +95,15 @@ class FillBucket implements Bucket {
};
}

upload(gl: WebGLRenderingContext) {
this.layoutVertexBuffer = new VertexBuffer(gl, this.layoutVertexArray);
this.indexBuffer = new IndexBuffer(gl, this.indexArray);
this.indexBuffer2 = new IndexBuffer(gl, this.indexArray2);
this.programConfigurations.upload(gl);
}

destroy() {
if (!this.layoutVertexBuffer) return;
this.layoutVertexBuffer.destroy();
this.indexBuffer.destroy();
this.indexBuffer2.destroy();
Expand Down
24 changes: 12 additions & 12 deletions src/data/bucket/fill_extrusion_bucket.js
View file
Expand Up @@ -51,7 +51,6 @@ function addVertex(vertexArray, x, y, nx, ny, nz, t, e) {
}

const LayoutVertexArrayType = createVertexArrayType(fillExtrusionInterface.layoutAttributes);
const IndexArrayType = fillExtrusionInterface.indexArrayType;

class FillExtrusionBucket implements Bucket {
static programInterface: ProgramInterface;
Expand All @@ -69,24 +68,18 @@ class FillExtrusionBucket implements Bucket {

programConfigurations: ProgramConfigurationSet;
segments: SegmentVector;
uploaded: boolean;

constructor(options: any) {
this.zoom = options.zoom;
this.overscaling = options.overscaling;
this.layers = options.layers;
this.index = options.index;

if (options.layoutVertexArray) {
this.layoutVertexBuffer = new VertexBuffer(options.layoutVertexArray, LayoutVertexArrayType.serialize());
this.indexBuffer = new IndexBuffer(options.indexArray);
this.programConfigurations = ProgramConfigurationSet.deserialize(fillExtrusionInterface, options.layers, options.zoom, options.programConfigurations);
this.segments = new SegmentVector(options.segments);
} else {
this.layoutVertexArray = new LayoutVertexArrayType();
this.indexArray = new IndexArrayType();
this.programConfigurations = new ProgramConfigurationSet(fillExtrusionInterface, options.layers, options.zoom);
this.segments = new SegmentVector();
}
this.layoutVertexArray = new LayoutVertexArrayType(options.layoutVertexArray);
this.indexArray = new TriangleIndexArray(options.indexArray);
this.programConfigurations = new ProgramConfigurationSet(fillExtrusionInterface, options.layers, options.zoom, options.programConfigurations);
this.segments = new SegmentVector(options.segments);
}

populate(features: Array<IndexedFeature>, options: PopulateParameters) {
Expand All @@ -113,7 +106,14 @@ class FillExtrusionBucket implements Bucket {
};
}

upload(gl: WebGLRenderingContext) {
this.layoutVertexBuffer = new VertexBuffer(gl, this.layoutVertexArray);
this.indexBuffer = new IndexBuffer(gl, this.indexArray);
this.programConfigurations.upload(gl);
}

destroy() {
if (!this.layoutVertexBuffer) return;
this.layoutVertexBuffer.destroy();
this.indexBuffer.destroy();
this.programConfigurations.destroy();
Expand Down
24 changes: 12 additions & 12 deletions src/data/bucket/line_bucket.js
View file
Expand Up @@ -88,7 +88,6 @@ function addLineVertex(layoutVertexBuffer, point: Point, extrude: Point, round:
}

const LayoutVertexArrayType = createVertexArrayType(lineInterface.layoutAttributes);
const IndexArrayType = lineInterface.indexArrayType;

/**
* @private
Expand All @@ -114,24 +113,18 @@ class LineBucket implements Bucket {

programConfigurations: ProgramConfigurationSet;
segments: SegmentVector;
uploaded: boolean;

constructor(options: any) {
this.zoom = options.zoom;
this.overscaling = options.overscaling;
this.layers = options.layers;
this.index = options.index;

if (options.layoutVertexArray) {
this.layoutVertexBuffer = new VertexBuffer(options.layoutVertexArray, LayoutVertexArrayType.serialize());
this.indexBuffer = new IndexBuffer(options.indexArray);
this.programConfigurations = ProgramConfigurationSet.deserialize(lineInterface, options.layers, options.zoom, options.programConfigurations);
this.segments = new SegmentVector(options.segments);
} else {
this.layoutVertexArray = new LayoutVertexArrayType();
this.indexArray = new IndexArrayType();
this.programConfigurations = new ProgramConfigurationSet(lineInterface, options.layers, options.zoom);
this.segments = new SegmentVector();
}
this.layoutVertexArray = new LayoutVertexArrayType(options.layoutVertexArray);
this.indexArray = new TriangleIndexArray(options.indexArray);
this.programConfigurations = new ProgramConfigurationSet(lineInterface, options.layers, options.zoom, options.programConfigurations);
this.segments = new SegmentVector(options.segments);
}

populate(features: Array<IndexedFeature>, options: PopulateParameters) {
Expand All @@ -158,7 +151,14 @@ class LineBucket implements Bucket {
};
}

upload(gl: WebGLRenderingContext) {
this.layoutVertexBuffer = new VertexBuffer(gl, this.layoutVertexArray);
this.indexBuffer = new IndexBuffer(gl, this.indexArray);
this.programConfigurations.upload(gl);
}

destroy() {
if (!this.layoutVertexBuffer) return;
this.layoutVertexBuffer.destroy();
this.indexBuffer.destroy();
this.programConfigurations.destroy();
Expand Down
50 changes: 28 additions & 22 deletions src/data/bucket/symbol_bucket.js
View file
Expand Up @@ -211,6 +211,7 @@ type SerializedSymbolBuffer = {
};

class SymbolBuffers {
programInterface: ProgramInterface;
layoutVertexArray: StructArray;
layoutVertexBuffer: VertexBuffer;

Expand All @@ -224,32 +225,19 @@ class SymbolBuffers {
dynamicLayoutVertexBuffer: VertexBuffer;

constructor(programInterface: ProgramInterface, layers: Array<StyleLayer>, zoom: number, arrays?: SerializedSymbolBuffer) {
this.programInterface = programInterface;

const LayoutVertexArrayType = createVertexArrayType(programInterface.layoutAttributes);
const IndexArrayType = programInterface.indexArrayType;

if (arrays) {
this.layoutVertexBuffer = new VertexBuffer(arrays.layoutVertexArray, LayoutVertexArrayType.serialize());
this.indexBuffer = new IndexBuffer(arrays.indexArray);
this.programConfigurations = ProgramConfigurationSet.deserialize(programInterface, layers, zoom, arrays.programConfigurations);
this.segments = new SegmentVector(arrays.segments);
} else {
this.layoutVertexArray = new LayoutVertexArrayType();
this.indexArray = new IndexArrayType();
this.programConfigurations = new ProgramConfigurationSet(programInterface, layers, zoom);
this.segments = new SegmentVector();
}

if (!programInterface.dynamicLayoutAttributes) {
return;
}

const DynamicLayoutVertexArrayType = createVertexArrayType(programInterface.dynamicLayoutAttributes);
this.layoutVertexArray = new LayoutVertexArrayType(arrays && arrays.layoutVertexArray);
this.indexArray = new IndexArrayType(arrays && arrays.indexArray);
this.programConfigurations = new ProgramConfigurationSet(programInterface, layers, zoom, arrays && arrays.programConfigurations);
this.segments = new SegmentVector(arrays && arrays.segments);

if (arrays) {
this.dynamicLayoutVertexArray = new DynamicLayoutVertexArrayType(arrays.dynamicLayoutVertexArray);
this.dynamicLayoutVertexBuffer = new VertexBuffer(arrays.dynamicLayoutVertexArray, DynamicLayoutVertexArrayType.serialize(), true);
} else {
this.dynamicLayoutVertexArray = new DynamicLayoutVertexArrayType();
if (programInterface.dynamicLayoutAttributes) {
const DynamicLayoutVertexArrayType = createVertexArrayType(programInterface.dynamicLayoutAttributes);
this.dynamicLayoutVertexArray = new DynamicLayoutVertexArrayType(arrays && arrays.dynamicLayoutVertexArray);
}
}

Expand All @@ -263,7 +251,18 @@ class SymbolBuffers {
};
}

upload(gl: WebGLRenderingContext) {
this.layoutVertexBuffer = new VertexBuffer(gl, this.layoutVertexArray);
this.indexBuffer = new IndexBuffer(gl, this.indexArray);
this.programConfigurations.upload(gl);

if (this.programInterface.dynamicLayoutAttributes) {
this.dynamicLayoutVertexBuffer = new VertexBuffer(gl, this.dynamicLayoutVertexArray, true);
}
}

destroy() {
if (!this.layoutVertexBuffer) return;
this.layoutVertexBuffer.destroy();
this.indexBuffer.destroy();
this.programConfigurations.destroy();
Expand Down Expand Up @@ -336,6 +335,7 @@ class SymbolBucket implements Bucket {
text: SymbolBuffers;
icon: SymbolBuffers;
collisionBox: SymbolBuffers;
uploaded: boolean;

constructor(options: SymbolBucketParameters) {
this.collisionBoxArray = options.collisionBoxArray;
Expand Down Expand Up @@ -474,6 +474,12 @@ class SymbolBucket implements Bucket {
};
}

upload(gl: WebGLRenderingContext) {
this.text.upload(gl);
this.icon.upload(gl);
this.collisionBox.upload(gl);
}

destroy() {
this.text.destroy();
this.icon.destroy();
Expand Down

0 comments on commit 57f53c0

Please sign in to comment.