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
src/ol/renderer/webgl/PointsLayer.js
+10 -5
View File
@@ -4,7 +4,7 @@
import LayerRenderer from '../Layer'; import LayerRenderer from '../Layer';
import WebGLArrayBuffer from '../../webgl/Buffer'; import WebGLArrayBuffer from '../../webgl/Buffer';
import {DYNAMIC_DRAW, ARRAY_BUFFER, ELEMENT_ARRAY_BUFFER, FLOAT} from '../../webgl'; 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'; import GeometryType from '../../geom/GeometryType';
const VERTEX_SHADER = ` const VERTEX_SHADER = `
@@ -35,14 +35,13 @@ const VERTEX_SHADER = `
const FRAGMENT_SHADER = ` const FRAGMENT_SHADER = `
precision mediump float; precision mediump float;
uniform float u_opacity;
varying vec2 v_texCoord; varying vec2 v_texCoord;
varying float v_opacity; varying float v_opacity;
void main(void) { void main(void) {
gl_FragColor.rgb = vec3(1.0, 1.0, 1.0); gl_FragColor.rgb = vec3(1.0, 1.0, 1.0);
float alpha = u_opacity * v_opacity; float alpha = v_opacity;
if (alpha == 0.0) { if (alpha == 0.0) {
discard; discard;
} }
@@ -201,10 +200,16 @@ class WebGLPointsLayerRenderer extends LayerRenderer {
* @inheritDoc * @inheritDoc
*/ */
renderFrame(frameState, layerState) { renderFrame(frameState, layerState) {
this.helper_.setUniformFloatValue(DefaultUniform.OPACITY, layerState.opacity);
this.helper_.drawElements(0, this.indicesBuffer_.getArray().length); this.helper_.drawElements(0, this.indicesBuffer_.getArray().length);
this.helper_.finalizeDraw(frameState); 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;
} }
/** /**
src/ol/webgl/Helper.js
+2 -3
View File
@@ -43,8 +43,7 @@ export const ShaderType = {
export const DefaultUniform = { export const DefaultUniform = {
PROJECTION_MATRIX: 'u_projectionMatrix', PROJECTION_MATRIX: 'u_projectionMatrix',
OFFSET_SCALE_MATRIX: 'u_offsetScaleMatrix', OFFSET_SCALE_MATRIX: 'u_offsetScaleMatrix',
OFFSET_ROTATION_MATRIX: 'u_offsetRotateMatrix', OFFSET_ROTATION_MATRIX: 'u_offsetRotateMatrix'
OPACITY: 'u_opacity'
}; };
/** /**
@@ -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. * 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: * You can also change their value along the way like so:
* ```js * ```js
* this.context.setUniformFloatValue(DefaultUniform.OPACITY, layerState.opacity); * this.context.setUniformFloatValue('u_value', valueAsNumber);
* ``` * ```
* *
* ### Defining post processing passes * ### Defining post processing passes