From b8564d503addf54eccb056f5178e598a262d3ae6 Mon Sep 17 00:00:00 2001 From: Olivier Guyot Date: Wed, 25 Sep 2019 13:03:24 +0200 Subject: [PATCH] Webgl icon example / restore texture for icons --- examples/icon-sprite-webgl.js | 76 ++++++++++++++++++++++------ src/ol/renderer/webgl/PointsLayer.js | 1 - 2 files changed, 61 insertions(+), 16 deletions(-) diff --git a/examples/icon-sprite-webgl.js b/examples/icon-sprite-webgl.js index 7cb76100a3..c8e9afb9b9 100644 --- a/examples/icon-sprite-webgl.js +++ b/examples/icon-sprite-webgl.js @@ -21,18 +21,17 @@ const texture = new Image(); texture.src = 'data/ufo_shapes.png'; // This describes the content of the associated sprite sheet -// coords are u0, v0, u1, v1 for a given shape -// FIXME: re enable this -// const shapeTextureCoords = { -// 'light': [0, 0.5, 0.25, 0], -// 'sphere': [0.25, 0.5, 0.5, 0], -// 'circle': [0.25, 0.5, 0.5, 0], -// 'disc': [0.5, 0.5, 0.75, 0], -// 'oval': [0.5, 0.5, 0.75, 0], -// 'triangle': [0.75, 0.5, 1, 0], -// 'fireball': [0, 1, 0.25, 0.5], -// 'default': [0.75, 1, 1, 0.5] -// }; +// coords are u0, v0 for a given shape (all icons have a size of 0.25 x 0.5) +const shapeTextureCoords = { + 'light': [0, 0], + 'sphere': [0.25, 0], + 'circle': [0.25, 0], + 'disc': [0.5, 0], + 'oval': [0.5, 0], + 'triangle': [0.75, 0], + 'fireball': [0, 0.5], + 'default': [0.75, 0.5] +}; const oldColor = [255, 160, 110]; const newColor = [180, 255, 200]; @@ -47,8 +46,31 @@ class WebglPointsLayer extends VectorLayer { callback: function(feature) { return feature.get('year'); } + }, + { + name: 'texCoordU', + callback: function(feature) { + let coords = shapeTextureCoords[feature.get('shape')]; + if (!coords) { + coords = shapeTextureCoords['default']; + } + return coords[0]; + } + }, + { + name: 'texCoordV', + callback: function(feature) { + let coords = shapeTextureCoords[feature.get('shape')]; + if (!coords) { + coords = shapeTextureCoords['default']; + } + return coords[1]; + } } ], + uniforms: { + u_texture: texture + }, vertexShader: [ 'precision mediump float;', @@ -58,6 +80,9 @@ class WebglPointsLayer extends VectorLayer { 'attribute vec2 a_position;', 'attribute float a_index;', 'attribute float a_year;', + 'attribute float a_texCoordU;', + 'attribute float a_texCoordV;', + 'varying vec2 v_texCoord;', 'varying float v_year;', 'void main(void) {', @@ -68,6 +93,9 @@ class WebglPointsLayer extends VectorLayer { ' ' + formatNumber(-size / 2) + ' : ' + formatNumber(size / 2) + ';', ' vec4 offsets = offsetMatrix * vec4(offsetX, offsetY, 0.0, 0.0);', ' gl_Position = u_projectionMatrix * vec4(a_position, 0.0, 1.0) + offsets;', + ' float u = a_index == 0.0 || a_index == 3.0 ? a_texCoordU : a_texCoordU + 0.25;', + ' float v = a_index == 2.0 || a_index == 3.0 ? a_texCoordV : a_texCoordV + 0.5;', + ' v_texCoord = vec2(u, v);', ' v_year = a_year;', '}' ].join(' '), @@ -77,16 +105,22 @@ class WebglPointsLayer extends VectorLayer { 'uniform float u_time;', 'uniform float u_minYear;', 'uniform float u_maxYear;', + 'uniform sampler2D u_texture;', + 'varying vec2 v_texCoord;', 'varying float v_year;', 'void main(void) {', + ' vec4 textureColor = texture2D(u_texture, v_texCoord);', + ' if (textureColor.a < 0.1) {', + ' discard;', + ' }', // color is interpolated based on year ' float ratio = clamp((v_year - 1950.0) / (2013.0 - 1950.0), 0.0, 1.1);', ' vec3 color = mix(vec3(' + formatColor(oldColor) + '),', ' vec3(' + formatColor(newColor) + '), ratio);', - ' gl_FragColor = vec4(color, 1.0);', + ' gl_FragColor = vec4(color, 1.0) * textureColor;', ' gl_FragColor.rgb *= gl_FragColor.a;', '}' ].join(' '), @@ -99,6 +133,9 @@ class WebglPointsLayer extends VectorLayer { 'attribute vec2 a_position;', 'attribute float a_index;', 'attribute vec4 a_hitColor;', + 'attribute float a_texCoordU;', + 'attribute float a_texCoordV;', + 'varying vec2 v_texCoord;', 'varying vec4 v_hitColor;', 'void main(void) {', @@ -109,19 +146,28 @@ class WebglPointsLayer extends VectorLayer { ' ' + formatNumber(-size / 2) + ' : ' + formatNumber(size / 2) + ';', ' vec4 offsets = offsetMatrix * vec4(offsetX, offsetY, 0.0, 0.0);', ' gl_Position = u_projectionMatrix * vec4(a_position, 0.0, 1.0) + offsets;', + ' float u = a_index == 0.0 || a_index == 3.0 ? a_texCoordU : a_texCoordU + 0.25;', + ' float v = a_index == 2.0 || a_index == 3.0 ? a_texCoordV : a_texCoordV + 0.5;', + ' v_texCoord = vec2(u, v);', ' v_hitColor = a_hitColor;', '}' ].join(' '), hitFragmentShader: [ 'precision mediump float;', + 'uniform sampler2D u_texture;', + 'varying vec2 v_texCoord;', 'varying vec4 v_hitColor;', 'void main(void) {', + ' vec4 textureColor = texture2D(u_texture, v_texCoord);', + ' if (textureColor.a < 0.1) {', + ' discard;', + ' }', + ' gl_FragColor = v_hitColor;', '}' - ].join(' '), - texture: texture // FIXME: this doesn't work yet + ].join(' ') }); } } diff --git a/src/ol/renderer/webgl/PointsLayer.js b/src/ol/renderer/webgl/PointsLayer.js index 17b050299c..07d1c108a5 100644 --- a/src/ol/renderer/webgl/PointsLayer.js +++ b/src/ol/renderer/webgl/PointsLayer.js @@ -113,7 +113,6 @@ class WebGLPointsLayerRenderer extends WebGLLayerRenderer { */ constructor(vectorLayer, options) { const uniforms = options.uniforms || {}; - uniforms.u_texture = getBlankImageData(); const projectionMatrixTransform = createTransform(); uniforms[DefaultUniform.PROJECTION_MATRIX] = projectionMatrixTransform;