diff --git a/src/ol/renderer/webgl-new/PointsLayer.js b/src/ol/renderer/webgl-new/PointsLayer.js index 7259f0fdb7..462e487294 100644 --- a/src/ol/renderer/webgl-new/PointsLayer.js +++ b/src/ol/renderer/webgl-new/PointsLayer.js @@ -8,46 +8,46 @@ import WebGLContext, {DefaultUniform} from '../../webgl/Context'; import WebGLVertex from "../../webgl/Vertex"; import WebGLFragment from "../../webgl/Fragment"; -const VERTEX_SHADER = - 'attribute vec2 a_position;' + - 'attribute vec2 a_texCoord;' + - 'attribute float a_opacity;' + - 'attribute float a_rotateWithView;' + - '' + - 'uniform mat4 u_projectionMatrix;' + - 'uniform mat4 u_offsetScaleMatrix;' + - 'uniform mat4 u_offsetRotateMatrix;' + - '' + - 'varying vec2 v_texCoord;' + - 'varying float v_opacity;' + - '' + - 'void main(void) {' + - ' mat4 offsetMatrix = u_offsetScaleMatrix;' + - ' if (a_rotateWithView == 1.0) {' + - ' offsetMatrix = u_offsetScaleMatrix * u_offsetRotateMatrix;' + - ' }' + - ' vec4 offsets = offsetMatrix * vec4(a_offsets, 0.0, 0.0);' + - ' gl_Position = u_projectionMatrix * vec4(a_position, 0.0, 1.0) + offsets;' + - ' v_texCoord = a_texCoord;' + - ' v_opacity = a_opacity;' + - '}'; +const VERTEX_SHADER = ` + attribute vec2 a_position; + attribute vec2 a_texCoord; + attribute float a_opacity; + attribute float a_rotateWithView; + + uniform mat4 u_projectionMatrix; + uniform mat4 u_offsetScaleMatrix; + uniform mat4 u_offsetRotateMatrix; + + varying vec2 v_texCoord; + varying float v_opacity; + + void main(void) { + mat4 offsetMatrix = u_offsetScaleMatrix; + if (a_rotateWithView == 1.0) { + offsetMatrix = u_offsetScaleMatrix * u_offsetRotateMatrix; + } + vec4 offsets = offsetMatrix * vec4(a_offsets, 0.0, 0.0); + gl_Position = u_projectionMatrix * vec4(a_position, 0.0, 1.0) + offsets; + v_texCoord = a_texCoord; + v_opacity = a_opacity; + }`; -const FRAGMENT_SHADER = - 'uniform float u_opacity;' + - 'uniform sampler2D u_image;' + - '' + - 'varying vec2 v_texCoord;' + - 'varying float v_opacity;' + - '' + - 'void main(void) {' + - ' vec4 texColor = texture2D(u_image, v_texCoord);' + - ' gl_FragColor.rgb = texColor.rgb;' + - ' float alpha = texColor.a * v_opacity * u_opacity;' + - ' if (alpha == 0.0) {' + - ' discard;' + - ' }' + - ' gl_FragColor.a = alpha;' + - '}'; +const FRAGMENT_SHADER = ` + uniform float u_opacity; + uniform sampler2D u_image; + + varying vec2 v_texCoord; + varying float v_opacity; + + void main(void) { + vec4 texColor = texture2D(u_image, v_texCoord); + gl_FragColor.rgb = texColor.rgb; + float alpha = texColor.a * v_opacity * u_opacity; + if (alpha == 0.0) { + discard; + } + gl_FragColor.a = alpha; + }`; /** * @classdesc @@ -100,8 +100,8 @@ class WebGLPointsLayerRenderer extends LayerRenderer { * @inheritDoc */ prepareFrame(frameState) { - const vectorLayer = this.getLayer(); - const vectorSource = vectorLayer.getSource(); + const vectorLayer = /** @type {import("../../layer/Vector.js").default} */ (this.getLayer()); + const vectorSource = /** @type {import("../../source/Vector.js").default} */ (vectorLayer.getSource()); if (this.sourceRevision_ >= vectorSource.getRevision()) { return false; diff --git a/src/ol/webgl/Context.js b/src/ol/webgl/Context.js index f3a4b3afe8..2d1bdac48d 100644 --- a/src/ol/webgl/Context.js +++ b/src/ol/webgl/Context.js @@ -28,7 +28,7 @@ import {create, fromTransform} from "../vec/mat4"; export const DefaultUniform = { PROJECTION_MATRIX: 'u_projectionMatrix', - SCALE_MATRIX: 'u_offsetScaleMatrix', + OFFSET_SCALE_MATRIX: 'u_offsetScaleMatrix', OFFSET_ROTATION_MATRIX: 'u_offsetRotateMatrix', OPACITY: 'u_opacity' }; @@ -115,9 +115,17 @@ class WebGLContext extends Disposable { */ this.offsetScaleMatrix_ = createTransform(); + /** + * @private + * @type {Array} + */ this.tmpMat4_ = create(); - this.locations_ = {}; + /** + * @private + * @type {Object.} + */ + this.locations_; } /** @@ -284,12 +292,21 @@ class WebGLContext extends Disposable { rotateTransform(offsetRotateMatrix, -rotation); } - this.getGL().uniformMatrix4fv(locations.u_projectionMatrix, false, - fromTransform(this.tmpMat4_, projectionMatrix)); - this.getGL().uniformMatrix4fv(locations.u_offsetScaleMatrix, false, - fromTransform(this.tmpMat4_, offsetScaleMatrix)); - this.getGL().uniformMatrix4fv(locations.u_offsetRotateMatrix, false, - fromTransform(this.tmpMat4_, offsetRotateMatrix)); + this.setUniformMatrixValue(DefaultUniform.PROJECTION_MATRIX, fromTransform(this.tmpMat4_, projectionMatrix)); + this.setUniformMatrixValue(DefaultUniform.OFFSET_SCALE_MATRIX, fromTransform(this.tmpMat4_, offsetScaleMatrix)); + this.setUniformMatrixValue(DefaultUniform.OFFSET_ROTATION_MATRIX, fromTransform(this.tmpMat4_, offsetRotateMatrix)); + } + + /** + * Will get the location from the shader or the cache + * @param {string} name Uniform name + * @return {WebGLUniformLocation} uniformLocation + */ + getUniformLocation(name) { + if (!this.locations_[name]) { + this.locations_[name] = this.getGL().getUniformLocation(this.currentProgram_, name); + } + return this.locations_[name]; } /** @@ -298,7 +315,16 @@ class WebGLContext extends Disposable { * @param {number} value Value */ setUniformFloatValue(uniform, value) { - this.getGL().uniformMatrix4fv(this.locations_[uniform], false, value); + this.getGL().uniform1f(this.getUniformLocation(uniform), value); + } + + /** + * Give a value for a standard matrix4 uniform + * @param {string} uniform Uniform name + * @param {Array} value Matrix value + */ + setUniformMatrixValue(uniform, value) { + this.getGL().uniformMatrix4fv(this.getUniformLocation(uniform), false, value); } /** @@ -330,6 +356,7 @@ class WebGLContext extends Disposable { const gl = this.getGL(); gl.useProgram(program); this.currentProgram_ = program; + this.locations_ = {}; return true; } }