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

Webgl renderer / fix existing examples

Browse Source 
The shaders were rewritten manually for those, althoughj eventually they
should use the shader builder utilities as well.
This commit is contained in:
Olivier Guyot
2019-09-25 10:36:40 +02:00
parent 2b36445ecc
commit 109f9718f9
4 changed files with 136 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
examples/icon-sprite-webgl.js
View File

@@ -8,7 +8,7 @@ import VectorLayer from '../src/ol/layer/Vector.js';
import {Vector} from '../src/ol/source.js';
import {fromLonLat} from '../src/ol/proj.js';
import WebGLPointsLayerRenderer from '../src/ol/renderer/webgl/PointsLayer.js';
import {lerp} from '../src/ol/math.js';
import {formatColor, formatNumber} from '../src/ol/webgl/ShaderBuilder.js';
const key = 'pk.eyJ1IjoidHNjaGF1YiIsImEiOiJjaW5zYW5lNHkxMTNmdWttM3JyOHZtMmNtIn0.CDIBD8H-G2Gf-cPkIuWtRg';
@@ -35,33 +35,60 @@ const shapeTextureCoords = {
const oldColor = [255, 160, 110];
const newColor = [180, 255, 200];
const size = 16;
class WebglPointsLayer extends VectorLayer {
createRenderer() {
return new WebGLPointsLayerRenderer(this, {
texture: texture,
colorCallback: function(feature, color) {
// color is interpolated based on year (min is 1910, max is 2013)
// please note: most values are between 2000-2013
const ratio = (feature.get('year') - 1950) / (2013 - 1950);
color[0] = lerp(oldColor[0], newColor[0], ratio * ratio) / 255;
color[1] = lerp(oldColor[1], newColor[1], ratio * ratio) / 255;
color[2] = lerp(oldColor[2], newColor[2], ratio * ratio) / 255;
color[3] = 1;
return color;
},
texCoordCallback: function(feature, component) {
let coords = shapeTextureCoords[feature.get('shape')];
if (!coords) {
coords = shapeTextureCoords['default'];
attributes: [
{
name: 'year',
callback: function(feature) {
return feature.get('year');
}
}
return coords[component];
},
sizeCallback: function() {
return 16;
}
],
vertexShader: [
'precision mediump float;',
'uniform mat4 u_projectionMatrix;',
'uniform mat4 u_offsetScaleMatrix;',
'uniform mat4 u_offsetRotateMatrix;',
'attribute vec2 a_position;',
'attribute float a_index;',
'attribute float a_year;',
'varying float v_year;',
'void main(void) {',
' mat4 offsetMatrix = u_offsetScaleMatrix;',
' float offsetX = a_index == 0.0 || a_index == 3.0 ? ',
' ' + formatNumber(-size / 2) + ' : ' + formatNumber(size / 2) + ';',
' float offsetY = a_index == 0.0 || a_index == 1.0 ? ',
' ' + 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;',
' v_year = a_year;',
'}'
].join(' '),
fragmentShader: [
'precision mediump float;',
'uniform float u_time;',
'uniform float u_minYear;',
'uniform float u_maxYear;',
'varying float v_year;',
'void main(void) {',
// 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.rgb *= gl_FragColor.a;',
'}'
].join(' '),
texture: texture // FIXME: this doesn't work yet
});
}
}