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

Simple handling of layer opacity in webgl points layer

Browse Source 
Now the layer opacity is simply handled by a CSS property on the layer DOM element. As such it does not have to be
taken into account in shaders.
This commit is contained in:
Olivier Guyot
2018-12-07 00:16:32 +01:00
parent a6989af00a
commit f177a2bcd5
2 changed files with 12 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/ol/renderer/webgl/PointsLayer.js
View File

@@ -4,7 +4,7 @@
import LayerRenderer from '../Layer';
import WebGLArrayBuffer from '../../webgl/Buffer';
import {DYNAMIC_DRAW, ARRAY_BUFFER, ELEMENT_ARRAY_BUFFER, FLOAT} from '../../webgl';
import WebGLHelper, {DefaultAttrib, DefaultUniform} from '../../webgl/Helper';
import WebGLHelper, {DefaultAttrib} from '../../webgl/Helper';
import GeometryType from '../../geom/GeometryType';
const VERTEX_SHADER = `
@@ -35,14 +35,13 @@ const VERTEX_SHADER = `
const FRAGMENT_SHADER = `
precision mediump float;
uniform float u_opacity;
varying vec2 v_texCoord;
varying float v_opacity;
void main(void) {
gl_FragColor.rgb = vec3(1.0, 1.0, 1.0);
float alpha = u_opacity * v_opacity;
float alpha = v_opacity;
if (alpha == 0.0) {
discard;
}
@@ -201,10 +200,16 @@ class WebGLPointsLayerRenderer extends LayerRenderer {
* @inheritDoc
*/
renderFrame(frameState, layerState) {
this.helper_.setUniformFloatValue(DefaultUniform.OPACITY, layerState.opacity);
this.helper_.drawElements(0, this.indicesBuffer_.getArray().length);
this.helper_.finalizeDraw(frameState);
return this.helper_.getCanvas();
const canvas = this.helper_.getCanvas();
const opacity = layerState.opacity;
if (opacity !== canvas.style.opacity) {
canvas.style.opacity = opacity;
}
return canvas;
}
/**

5
src/ol/webgl/Helper.js
View File

@@ -43,8 +43,7 @@ export const ShaderType = {
export const DefaultUniform = {
PROJECTION_MATRIX: 'u_projectionMatrix',
OFFSET_SCALE_MATRIX: 'u_offsetScaleMatrix',
OFFSET_ROTATION_MATRIX: 'u_offsetRotateMatrix',
OPACITY: 'u_opacity'
OFFSET_ROTATION_MATRIX: 'u_offsetRotateMatrix'
};
/**
@@ -130,7 +129,7 @@ export const DefaultAttrib = {
* Uniforms are defined using the `uniforms` option and can either be explicit values or callbacks taking the frame state as argument.
* You can also change their value along the way like so:
* ```js
* this.context.setUniformFloatValue(DefaultUniform.OPACITY, layerState.opacity);
* this.context.setUniformFloatValue('u_value', valueAsNumber);
* ```
*
* ### Defining post processing passes