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

Added missing attributes in PointsLayer

Browse Source 
Attributes were used in the shader but not bound to a buffer, which made the
rendering failed in some implementations.
This commit is contained in:
jahow
2018-12-01 00:01:52 +01:00
parent 171f1a5bac
commit 78028893e2
2 changed files with 20 additions and 10 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;
} }

24
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;
} }
@@ -202,14 +206,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 +227,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;
} }