ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Handle alpha & custom shaders in renderer

Browse Source
This commit is contained in:
Olivier Guyot
2018-11-15 11:59:13 +01:00
parent 154a046130
commit 3c5eac13c9
2 changed files with 30 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/ol/renderer/webgl-new/PointsLayer.js
View File

@@ -58,20 +58,20 @@ class WebGLPointsLayerRenderer extends LayerRenderer {
/**
* @param {import("../../layer/Vector.js").default} vectorLayer Vector layer.
*/
constructor(vectorLayer) {
constructor(vectorLayer, opt_options) {
super(vectorLayer);
this.element_ = document.createElement('canvas');
const options = opt_options || {};
this.context_ = new WebGLContext(this.element_);
this.context_ = new WebGLContext();
this.sourceRevision_ = -1;
this.verticesBuffer_ = new WebGLBuffer([], DYNAMIC_DRAW);
this.indicesBuffer_ = new WebGLBuffer([], DYNAMIC_DRAW);
const vertexShader = new WebGLVertex(VERTEX_SHADER);
const fragmentShader = new WebGLFragment(FRAGMENT_SHADER);
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);
}
@@ -86,11 +86,12 @@ class WebGLPointsLayerRenderer extends LayerRenderer {
/**
* @inheritDoc
*/
composeFrame(frameState) {
this.context_.prepareDraw();
renderFrame(frameState, layerState) {
this.context_.prepareDraw(frameState.size, frameState.pixelRatio);
this.context_.applyFrameState(frameState);
this.context_.setUniformFloatValue(DefaultUniform.OPACITY, this.getLayer().getOpacity());
this.context_.setUniformFloatValue(DefaultUniform.OPACITY, layerState.opacity);
this.context_.drawElements(0, this.indicesBuffer_.getArray().length);
return this.context_.getCanvas();
}
/**
@@ -114,7 +115,7 @@ class WebGLPointsLayerRenderer extends LayerRenderer {
return;
}
const geom = /** @type {import("../../geom/Point").default} */ (feature.getGeometry());
const x = geom.getCoordinates()[0], y = geom.getCoordinates()[1], size = 20;
const x = geom.getCoordinates()[0], y = geom.getCoordinates()[1], size = 1;
let stride = 6;
let baseIndex = this.verticesBuffer_.getArray().length / stride;

30
src/ol/webgl/Context.js
View File

@@ -9,7 +9,7 @@ import {listen, unlistenAll} from '../events.js';
import {clear} from '../obj.js';
import {ARRAY_BUFFER, ELEMENT_ARRAY_BUFFER, TEXTURE_2D, TEXTURE_WRAP_S, TEXTURE_WRAP_T} from '../webgl.js';
import ContextEventType from '../webgl/ContextEventType.js';
import {COLOR_BUFFER_BIT, FLOAT, TRIANGLES, UNSIGNED_INT, UNSIGNED_SHORT} from "../webgl";
import {BLEND, COLOR_BUFFER_BIT, FLOAT, TRIANGLES, UNSIGNED_INT, UNSIGNED_SHORT} from "../webgl";
import {
create as createTransform,
reset as resetTransform,
@@ -48,22 +48,23 @@ export const DefaultAttrib = {
class WebGLContext extends Disposable {
/**
* @param {HTMLCanvasElement} canvas Canvas.
*/
constructor(canvas) {
constructor() {
super();
/**
* @private
* @type {HTMLCanvasElement}
*/
this.canvas_ = canvas;
this.canvas_ = document.createElement('canvas');
this.canvas_.style.position = 'absolute';
/**
* @private
* @type {WebGLRenderingContext}
*/
this.gl_ = canvas.getContext('webgl');
this.gl_ = this.canvas_.getContext('webgl');
/**
* @private
@@ -207,10 +208,19 @@ class WebGLContext extends Disposable {
/**
* Clear the buffer & set the viewport to draw
*/
prepareDraw() {
this.getGL().clearColor(0.0, 0.0, 0.0, 0.0);
this.getGL().clear(this.getGL().COLOR_BUFFER_BIT);
this.getGL().viewport(0, 0, this.canvas_.width, this.canvas_.height);
prepareDraw(size, pixelRatio) {
const canvas = this.getCanvas();
canvas.width = size[0] * pixelRatio;
canvas.height = size[1] * pixelRatio;
canvas.style.width = size[0] + 'px';
canvas.style.height = size[1] + 'px';
const gl = this.getGL();
gl.clearColor(0.0, 0.0, 0.0, 0.0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.enable(gl.BLEND);
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
gl.viewport(0, 0, canvas.width, canvas.height);
}
/**
@@ -254,7 +264,7 @@ class WebGLContext extends Disposable {
const resolution = frameState.viewState.resolution;
const center = frameState.viewState.center;
// set the "uniform" values (coordinates 0,0 are the center of the view
// set the "uniform" values (coordinates 0,0 are the center of the view)
const projectionMatrix = resetTransform(this.projectionMatrix_);
scaleTransform(projectionMatrix, 2 / (resolution * size[0]), 2 / (resolution * size[1]));
rotateTransform(projectionMatrix, -rotation);