added the concept of frame buffer in webgl context

This commit is contained in:
Olivier Guyot
2018-11-15 16:11:17 +01:00
parent 81807c5910
commit 298af9ca0f
2 changed files with 215 additions and 64 deletions

View File

@@ -72,8 +72,8 @@ class WebGLPointsLayerRenderer extends LayerRenderer {
const vertexShader = new WebGLVertex(options.vertexShader || VERTEX_SHADER);
const fragmentShader = new WebGLFragment(options.fragmentShader || FRAGMENT_SHADER);
const program = this.context_.getProgram(fragmentShader, vertexShader);
this.context_.useProgram(program);
this.program_ = this.context_.getProgram(fragmentShader, vertexShader);
this.context_.useProgram(this.program_);
this.sizeCallback_ = options.sizeCallback || function(feature) {
return 1;
@@ -95,10 +95,10 @@ class WebGLPointsLayerRenderer extends LayerRenderer {
* @inheritDoc
*/
renderFrame(frameState, layerState) {
this.context_.prepareDraw(frameState.size, frameState.pixelRatio);
this.context_.applyFrameState(frameState);
this.context_.setUniformFloatValue(DefaultUniform.OPACITY, layerState.opacity);
this.context_.drawElements(0, this.indicesBuffer_.getArray().length);
this.context_.finalizeDraw();
return this.context_.getCanvas();
}
@@ -109,6 +109,8 @@ class WebGLPointsLayerRenderer extends LayerRenderer {
const vectorLayer = /** @type {import("../../layer/Vector.js").default} */ (this.getLayer());
const vectorSource = /** @type {import("../../source/Vector.js").default} */ (vectorLayer.getSource());
this.context_.prepareDraw(frameState.size, frameState.pixelRatio);
if (this.sourceRevision_ < vectorSource.getRevision()) {
this.sourceRevision_ = vectorSource.getRevision();
@@ -140,17 +142,17 @@ class WebGLPointsLayerRenderer extends LayerRenderer {
baseIndex + 1, baseIndex + 2, baseIndex + 3
);
});
// write new data
this.context_.bindBuffer(ARRAY_BUFFER, this.verticesBuffer_);
this.context_.bindBuffer(ELEMENT_ARRAY_BUFFER, this.indicesBuffer_);
let bytesPerFloat = Float32Array.BYTES_PER_ELEMENT;
this.context_.enableAttributeArray(DefaultAttrib.POSITION, 2, FLOAT, bytesPerFloat * 6, 0);
this.context_.enableAttributeArray(DefaultAttrib.OFFSETS, 2, FLOAT, bytesPerFloat * 6, bytesPerFloat * 2);
this.context_.enableAttributeArray(DefaultAttrib.TEX_COORD, 2, FLOAT, bytesPerFloat * 6, bytesPerFloat * 4);
}
// write new data
this.context_.bindBuffer(ARRAY_BUFFER, this.verticesBuffer_);
this.context_.bindBuffer(ELEMENT_ARRAY_BUFFER, this.indicesBuffer_);
let bytesPerFloat = Float32Array.BYTES_PER_ELEMENT;
this.context_.enableAttributeArray(DefaultAttrib.POSITION, 2, FLOAT, bytesPerFloat * 6, 0);
this.context_.enableAttributeArray(DefaultAttrib.OFFSETS, 2, FLOAT, bytesPerFloat * 6, bytesPerFloat * 2);
this.context_.enableAttributeArray(DefaultAttrib.TEX_COORD, 2, FLOAT, bytesPerFloat * 6, bytesPerFloat * 4);
return true;
}
}