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

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

@@ -13,12 +13,14 @@ const VERTEX_SHADER = `
attribute vec2 a_texCoord;
attribute float a_rotateWithView;
attribute vec2 a_offsets;
attribute float a_opacity;
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;
@@ -28,6 +30,7 @@ const VERTEX_SHADER = `
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 = `
@@ -35,10 +38,11 @@ const FRAGMENT_SHADER = `
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;
float alpha = u_opacity * v_opacity;
if (alpha == 0.0) {
discard;
}
@@ -202,14 +206,14 @@ class WebGLPointsLayerRenderer extends LayerRenderer {
const x = this.coordCallback_(feature, 0);
const y = this.coordCallback_(feature, 1);
const size = this.sizeCallback_(feature);
const stride = 6;
const stride = 8;
const baseIndex = this.verticesBuffer_.getArray().length / stride;
this.verticesBuffer_.getArray().push(
x, y, -size / 2, -size / 2, 0, 0,
x, y, +size / 2, -size / 2, 1, 0,
x, y, +size / 2, +size / 2, 1, 1,
x, y, -size / 2, +size / 2, 0, 1
x, y, -size / 2, -size / 2, 0, 0, 1, 1,
x, y, +size / 2, -size / 2, 1, 0, 1, 1,
x, y, +size / 2, +size / 2, 1, 1, 1, 1,
x, y, -size / 2, +size / 2, 0, 1, 1, 1
);
this.indicesBuffer_.getArray().push(
baseIndex, baseIndex + 1, baseIndex + 3,
@@ -223,9 +227,11 @@ class WebGLPointsLayerRenderer extends LayerRenderer {
this.helper_.bindBuffer(ELEMENT_ARRAY_BUFFER, this.indicesBuffer_);
const bytesPerFloat = Float32Array.BYTES_PER_ELEMENT;
this.helper_.enableAttributeArray(DefaultAttrib.POSITION, 2, FLOAT, bytesPerFloat * 6, 0);
this.helper_.enableAttributeArray(DefaultAttrib.OFFSETS, 2, FLOAT, bytesPerFloat * 6, bytesPerFloat * 2);
this.helper_.enableAttributeArray(DefaultAttrib.TEX_COORD, 2, FLOAT, bytesPerFloat * 6, bytesPerFloat * 4);
this.helper_.enableAttributeArray(DefaultAttrib.POSITION, 2, FLOAT, bytesPerFloat * 8, 0);
this.helper_.enableAttributeArray(DefaultAttrib.OFFSETS, 2, FLOAT, bytesPerFloat * 8, bytesPerFloat * 2);
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;
}