1 | goog.require('ol.Map');
|
2 | goog.require('ol.View');
|
3 | goog.require('ol.control');
|
4 | goog.require('ol.has');
|
5 | goog.require('ol.layer.Tile');
|
6 | goog.require('ol.source.OSM');
|
7 |
|
8 | if (!ol.has.WEBGL) {
|
9 | var info = document.getElementById('no-webgl');
|
10 | |
11 |
|
12 |
|
13 | info.style.display = '';
|
14 | } else {
|
15 |
|
16 | var osm = new ol.layer.Tile({
|
17 | source: new ol.source.OSM()
|
18 | });
|
19 |
|
20 | var map = new ol.Map({
|
21 | layers: [osm],
|
22 | renderer: (['webgl', 'canvas']),
|
23 | target: 'map',
|
24 | controls: ol.control.defaults({
|
25 | attributionOptions: {
|
26 | collapsible: false
|
27 | }
|
28 | }),
|
29 | view: new ol.View({
|
30 | center: [0, 0],
|
31 | zoom: 2
|
32 | })
|
33 | });
|
34 |
|
35 | var fragmentShaderSource = [
|
36 | 'precision mediump float;',
|
37 | 'void main() {',
|
38 | '}'
|
39 | ].join('');
|
40 |
|
41 | var vertexShaderSource = [
|
42 | 'attribute vec2 a_position;',
|
43 | 'void main() {',
|
44 | ' gl_Position = vec4(a_position, 0, 1);',
|
45 | '}'
|
46 | ].join('');
|
47 |
|
48 | osm.on('precompose', function(event) {
|
49 | var context = event.glContext;
|
50 |
|
51 | var gl = context.getGL();
|
52 | var program = gl.createProgram();
|
53 |
|
54 | var vertexShader = gl.createShader(gl.VERTEX_SHADER);
|
55 | gl.shaderSource(vertexShader, vertexShaderSource);
|
56 | gl.compileShader(vertexShader);
|
57 | gl.attachShader(program, vertexShader);
|
58 |
|
59 | var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
|
60 | gl.shaderSource(fragmentShader, fragmentShaderSource);
|
61 | gl.compileShader(fragmentShader);
|
62 | gl.attachShader(program, fragmentShader);
|
63 |
|
64 | gl.linkProgram(program);
|
65 | context.useProgram(program);
|
66 |
|
67 | var positionLocation = gl.getAttribLocation(program, 'a_position');
|
68 |
|
69 | gl.enable(gl.STENCIL_TEST);
|
70 | gl.colorMask(false, false, false, false);
|
71 | gl.stencilOp(gl.KEEP, gl.KEEP, gl.REPLACE);
|
72 | gl.stencilFunc(gl.ALWAYS, 1, 0xff);
|
73 |
|
74 | var buffer = gl.createBuffer();
|
75 | gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
|
76 | gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
|
77 |
|
78 | -1.0, -1.0, -0.75, -1.0, -1.0, 1.0,
|
79 | -1.0, 1.0, -0.75, -1.0, -0.75, 1.0,
|
80 |
|
81 | -0.5, -1.0, -0.25, -1.0, -0.5, 1.0,
|
82 | -0.5, 1.0, -0.25, -1.0, -0.25, 1.0,
|
83 |
|
84 | 0.0, -1.0, 0.25, -1.0, 0.0, 1.0,
|
85 | 0.0, 1.0, 0.25, -1.0, 0.25, 1.0,
|
86 |
|
87 | 0.5, -1.0, 0.75, -1.0, 0.5, 1.0,
|
88 | 0.5, 1.0, 0.75, -1.0, 0.75, 1.0
|
89 | ]), gl.STATIC_DRAW);
|
90 |
|
91 | gl.enableVertexAttribArray(positionLocation);
|
92 | gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
|
93 | gl.drawArrays(gl.TRIANGLES, 0, 24);
|
94 |
|
95 | gl.bindBuffer(gl.ARRAY_BUFFER, null);
|
96 | gl.deleteBuffer(buffer);
|
97 |
|
98 | gl.colorMask(true, true, true, true);
|
99 | gl.stencilFunc(gl.NOTEQUAL, 0, 0xff);
|
100 | gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP);
|
101 | });
|
102 |
|
103 | osm.on('postcompose', function(event) {
|
104 | var context = event.glContext;
|
105 | var gl = context.getGL();
|
106 | gl.disable(gl.STENCIL_TEST);
|
107 | });
|
108 | }
|