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

Merge pull request #9023 from jahow/fix-webgl-points-layer

Browse Source 
Fix webgl PointsLayer not rendering anything
This commit is contained in:
Tim Schaub
2018-11-30 21:38:43 -07:00
committed by GitHub
parent 171f1a5bac 8bb7d77f68
commit 3944f0e62b
3 changed files with 33 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/ol/layer/Heatmap.js
View File

@@ -205,6 +205,7 @@ class Heatmap extends VectorLayer {
attribute vec2 a_texCoord; attribute vec2 a_texCoord;
attribute float a_rotateWithView; attribute float a_rotateWithView;
attribute vec2 a_offsets; attribute vec2 a_offsets;
attribute float a_opacity;
uniform mat4 u_projectionMatrix; uniform mat4 u_projectionMatrix;
uniform mat4 u_offsetScaleMatrix; uniform mat4 u_offsetScaleMatrix;
@@ -212,6 +213,7 @@ class Heatmap extends VectorLayer {
uniform float u_size; uniform float u_size;
varying vec2 v_texCoord; varying vec2 v_texCoord;
varying float v_opacity;
void main(void) { void main(void) {
mat4 offsetMatrix = u_offsetScaleMatrix; mat4 offsetMatrix = u_offsetScaleMatrix;
@@ -221,6 +223,7 @@ class Heatmap extends VectorLayer {
vec4 offsets = offsetMatrix * vec4(a_offsets, 0.0, 0.0); vec4 offsets = offsetMatrix * vec4(a_offsets, 0.0, 0.0);
gl_Position = u_projectionMatrix * vec4(a_position, 0.0, 1.0) + offsets * u_size; gl_Position = u_projectionMatrix * vec4(a_position, 0.0, 1.0) + offsets * u_size;
v_texCoord = a_texCoord; v_texCoord = a_texCoord;
v_opacity = a_opacity;
}`, }`,
fragmentShader: ` fragmentShader: `
precision mediump float; precision mediump float;
@@ -229,12 +232,13 @@ class Heatmap extends VectorLayer {
uniform float u_blur; uniform float u_blur;
varying vec2 v_texCoord; varying vec2 v_texCoord;
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);
vec2 texCoord = v_texCoord * 2.0 - vec2(1.0, 1.0); vec2 texCoord = v_texCoord * 2.0 - vec2(1.0, 1.0);
float sqRadius = texCoord.x * texCoord.x + texCoord.y * texCoord.y; float sqRadius = texCoord.x * texCoord.x + texCoord.y * texCoord.y;
float alpha = 1.0 - sqRadius * sqRadius; float alpha = 1.0 - sqRadius * sqRadius * v_opacity;
if (alpha <= 0.0) { if (alpha <= 0.0) {
discard; discard;
} }

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

@@ -13,12 +13,14 @@ const VERTEX_SHADER = `
attribute vec2 a_texCoord; attribute vec2 a_texCoord;
attribute float a_rotateWithView; attribute float a_rotateWithView;
attribute vec2 a_offsets; attribute vec2 a_offsets;
attribute float a_opacity;
uniform mat4 u_projectionMatrix; uniform mat4 u_projectionMatrix;
uniform mat4 u_offsetScaleMatrix; uniform mat4 u_offsetScaleMatrix;
uniform mat4 u_offsetRotateMatrix; uniform mat4 u_offsetRotateMatrix;
varying vec2 v_texCoord; varying vec2 v_texCoord;
varying float v_opacity;
void main(void) { void main(void) {
mat4 offsetMatrix = u_offsetScaleMatrix; mat4 offsetMatrix = u_offsetScaleMatrix;
@@ -28,6 +30,7 @@ const VERTEX_SHADER = `
vec4 offsets = offsetMatrix * vec4(a_offsets, 0.0, 0.0); vec4 offsets = offsetMatrix * vec4(a_offsets, 0.0, 0.0);
gl_Position = u_projectionMatrix * vec4(a_position, 0.0, 1.0) + offsets; gl_Position = u_projectionMatrix * vec4(a_position, 0.0, 1.0) + offsets;
v_texCoord = a_texCoord; v_texCoord = a_texCoord;
v_opacity = a_opacity;
}`; }`;
const FRAGMENT_SHADER = ` const FRAGMENT_SHADER = `
@@ -35,10 +38,11 @@ const FRAGMENT_SHADER = `
uniform float u_opacity; uniform float u_opacity;
varying vec2 v_texCoord; varying vec2 v_texCoord;
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; float alpha = u_opacity * v_opacity;
if (alpha == 0.0) { if (alpha == 0.0) {
discard; discard;
} }
@@ -73,7 +77,12 @@ const FRAGMENT_SHADER = `
* All features will be rendered as quads (two triangles forming a square). New data will be flushed to the GPU * All features will be rendered as quads (two triangles forming a square). New data will be flushed to the GPU
* every time the vector source changes. * every time the vector source changes.
* *
* Use shaders to customize the final output. * Use shaders to customize the final output. The following attributes are available:
* * `vec2 a_position`
* * `vec2 a_texCoord`
* * `vec2 a_offsets`
* * `float a_rotateWithView`
* * `float a_opacity`
* *
* This uses {@link module:ol/webgl/Helper~WebGLHelper} internally. * This uses {@link module:ol/webgl/Helper~WebGLHelper} internally.
* *
@@ -86,12 +95,14 @@ const FRAGMENT_SHADER = `
* attribute vec2 a_texCoord; * attribute vec2 a_texCoord;
* attribute float a_rotateWithView; * attribute float a_rotateWithView;
* attribute vec2 a_offsets; * attribute vec2 a_offsets;
* attribute float a_opacity;
* *
* uniform mat4 u_projectionMatrix; * uniform mat4 u_projectionMatrix;
* uniform mat4 u_offsetScaleMatrix; * uniform mat4 u_offsetScaleMatrix;
* uniform mat4 u_offsetRotateMatrix; * uniform mat4 u_offsetRotateMatrix;
* *
* varying vec2 v_texCoord; * varying vec2 v_texCoord;
* varying float v_opacity;
* *
* void main(void) { * void main(void) {
* mat4 offsetMatrix = u_offsetScaleMatrix; * mat4 offsetMatrix = u_offsetScaleMatrix;
@@ -101,6 +112,7 @@ const FRAGMENT_SHADER = `
* vec4 offsets = offsetMatrix * vec4(a_offsets, 0.0, 0.0); * vec4 offsets = offsetMatrix * vec4(a_offsets, 0.0, 0.0);
* gl_Position = u_projectionMatrix * vec4(a_position, 0.0, 1.0) + offsets; * gl_Position = u_projectionMatrix * vec4(a_position, 0.0, 1.0) + offsets;
* v_texCoord = a_texCoord; * v_texCoord = a_texCoord;
* v_opacity = a_opacity;
* } * }
* ``` * ```
* *
@@ -110,10 +122,11 @@ const FRAGMENT_SHADER = `
* uniform float u_opacity; * uniform float u_opacity;
* *
* varying vec2 v_texCoord; * varying vec2 v_texCoord;
* 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; * float alpha = u_opacity * v_opacity;
* if (alpha == 0.0) { * if (alpha == 0.0) {
* discard; * discard;
* } * }
@@ -202,14 +215,14 @@ class WebGLPointsLayerRenderer extends LayerRenderer {
const x = this.coordCallback_(feature, 0); const x = this.coordCallback_(feature, 0);
const y = this.coordCallback_(feature, 1); const y = this.coordCallback_(feature, 1);
const size = this.sizeCallback_(feature); const size = this.sizeCallback_(feature);
const stride = 6; const stride = 8;
const baseIndex = this.verticesBuffer_.getArray().length / stride; const baseIndex = this.verticesBuffer_.getArray().length / stride;
this.verticesBuffer_.getArray().push( this.verticesBuffer_.getArray().push(
x, y, -size / 2, -size / 2, 0, 0, x, y, -size / 2, -size / 2, 0, 0, 1, 1,
x, y, +size / 2, -size / 2, 1, 0, x, y, +size / 2, -size / 2, 1, 0, 1, 1,
x, y, +size / 2, +size / 2, 1, 1, x, y, +size / 2, +size / 2, 1, 1, 1, 1,
x, y, -size / 2, +size / 2, 0, 1 x, y, -size / 2, +size / 2, 0, 1, 1, 1
); );
this.indicesBuffer_.getArray().push( this.indicesBuffer_.getArray().push(
baseIndex, baseIndex + 1, baseIndex + 3, baseIndex, baseIndex + 1, baseIndex + 3,
@@ -223,9 +236,11 @@ class WebGLPointsLayerRenderer extends LayerRenderer {
this.helper_.bindBuffer(ELEMENT_ARRAY_BUFFER, this.indicesBuffer_); this.helper_.bindBuffer(ELEMENT_ARRAY_BUFFER, this.indicesBuffer_);
const bytesPerFloat = Float32Array.BYTES_PER_ELEMENT; const bytesPerFloat = Float32Array.BYTES_PER_ELEMENT;
this.helper_.enableAttributeArray(DefaultAttrib.POSITION, 2, FLOAT, bytesPerFloat * 6, 0); this.helper_.enableAttributeArray(DefaultAttrib.POSITION, 2, FLOAT, bytesPerFloat * 8, 0);
this.helper_.enableAttributeArray(DefaultAttrib.OFFSETS, 2, FLOAT, bytesPerFloat * 6, bytesPerFloat * 2); this.helper_.enableAttributeArray(DefaultAttrib.OFFSETS, 2, FLOAT, bytesPerFloat * 8, bytesPerFloat * 2);
this.helper_.enableAttributeArray(DefaultAttrib.TEX_COORD, 2, FLOAT, bytesPerFloat * 6, bytesPerFloat * 4); this.helper_.enableAttributeArray(DefaultAttrib.TEX_COORD, 2, FLOAT, bytesPerFloat * 8, bytesPerFloat * 4);
this.helper_.enableAttributeArray(DefaultAttrib.OPACITY, 1, FLOAT, bytesPerFloat * 8, bytesPerFloat * 6);
this.helper_.enableAttributeArray(DefaultAttrib.ROTATE_WITH_VIEW, 1, FLOAT, bytesPerFloat * 8, bytesPerFloat * 7);
return true; return true;
} }

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

@@ -619,11 +619,11 @@ class WebGLHelper extends Disposable {
const vertexShader = this.compileShader(vertexShaderSource, gl.VERTEX_SHADER); const vertexShader = this.compileShader(vertexShaderSource, gl.VERTEX_SHADER);
this.shaderCompileErrors_ = null; this.shaderCompileErrors_ = null;
if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) { if (gl.getShaderInfoLog(fragmentShader)) {
this.shaderCompileErrors_ = this.shaderCompileErrors_ =
`Fragment shader compilation failed:\n${gl.getShaderInfoLog(fragmentShader)}`; `Fragment shader compilation failed:\n${gl.getShaderInfoLog(fragmentShader)}`;
} }
if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) { if (gl.getShaderInfoLog(vertexShader)) {
this.shaderCompileErrors_ = (this.shaderCompileErrors_ || '') + this.shaderCompileErrors_ = (this.shaderCompileErrors_ || '') +
`Vertex shader compilation failed:\n${gl.getShaderInfoLog(vertexShader)}`; `Vertex shader compilation failed:\n${gl.getShaderInfoLog(vertexShader)}`;
} }