D3 Examples - GL-Solar, Rainbow Road edition

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>GL-Solar (Squares demo)</title>
    <script src="https://teczno.com/squares/squares-d3-0.0.5.min.js" type="application/javascript"></script>
    <script src="gl-boilerplate.js" type="application/javascript"></script>
    <script src="tile-queue.js" type="application/javascript"></script>
    <script src="map.js" type="application/javascript"></script>
    <link rel="stylesheet" href="https://www.openstreetmap.us/~migurski/style.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="map"></div>
​
    <p>
        <a href="https://mike.teczno.com">Michal Migurski</a>, Feb 2013.
    </p>
    
    <script id="shader-vertex" type="x-shader/x-vertex">
    
        const float pi = 3.14159265359;
        const mat4 view = mat4 (2.0/{CANVAS_WIDTH}, 0, 0, 0, 0, -2.0/{CANVAS_HEIGHT}, 0, 0, 0, 0, -0.0001, 0, -1, 1, 0, 1);
        uniform mat4 panzoom;
        uniform float frame;
​
        attribute vec3 xyz;
        attribute vec4 rgba;
        attribute float seg;
        varying float bounce;
        varying vec4 color;
        varying mat4 bloop;
        varying vec4 pos;
​
        void main()
        {
            pos = view * panzoom * vec4(xyz, 1);
            bounce = log(xyz.z + 1.) * atan(frame/5000.) * .002;
​
            bloop = mat4(1, 0, 0, 0,
                         0, 1, 0, 0,
                         0, 0, 1, 0,
                         sin(pos.x * 5.0) * sin(frame / 10.) * bounce,
                         sin(pos.y * 9.6) * cos(frame / 10.) * bounce,
                         0, 1);
            
            gl_Position = bloop * pos;
            
            if(seg >= 0.) {
                color = vec4(.5 * cos(frame/4. - seg/2. + 0. * pi/3.) + .5,
                             .5 * cos(frame/4. - seg/2. + 2. * pi/3.) + .5,
                             .5 * cos(frame/4. - seg/2. + 4. * pi/3.) + .5,
                             rgba.a);
            
            } else {
                color = rgba;
            }
        }
    
    </script>
    
    <script id="shader-fragment" type="x-shader/x-fragment">
        
        precision mediump float;
        
        const vec3 bg = vec3(0, 0, 0); // vec3(0.992, 0.965, 0.890);
        varying vec4 color;
        
        void main()
        {
            // instead of using the full RGBA, do a linear mix with background color
            gl_FragColor = vec4(mix(bg.rgb, color.rgb, color.a), 1);
        }
    
    </script>
    
    <script type="application/javascript">
    <!--
    
        var ctx = get_webgl_context();
        
        var geo = new sq.Geo.Mercator();
        var map = new Map(document.getElementById('map'), geo, {lat: 37.73570, lon: -122.40806}, 16.5);
        
        //
        // Return a pair of functions to call from Map class in map.js, one to
        // push new data into xyz-rgba buffer and the other to trigger redraw.
        //
        function get_webgl_context(matrix)
        {
            var map = document.getElementById('map'),
                c = document.createElement('canvas');
​
            c.width = map.clientWidth;
            c.height = map.clientHeight;
            c.style.position = 'absolute';
            map.insertBefore(c, null);
​
            var gl = c.getContext('experimental-webgl'),
                vsource = document.getElementById('shader-vertex').text,
                vsource = vsource.replace('{CANVAS_WIDTH}', c.width.toFixed(1)),
                vsource = vsource.replace('{CANVAS_HEIGHT}', c.height.toFixed(1)),
                fsource = document.getElementById('shader-fragment').text,
                program = linkProgram(gl, vsource, fsource);
            
            gl.useProgram(program);
            
            var xyzrgba_buffer = gl.createBuffer(),
                xyz_attrib = gl.getAttribLocation(program, 'xyz'),
                rgba_attrib = gl.getAttribLocation(program, 'rgba'),
                seg_attrib = gl.getAttribLocation(program, 'seg'),
                panzoom = gl.getUniformLocation(program, 'panzoom'),
                frameuni = gl.getUniformLocation(program, 'frame'),
                length = 0;
            
            gl.enableVertexAttribArray(xyz_attrib);
            gl.enableVertexAttribArray(rgba_attrib);
            gl.enableVertexAttribArray(seg_attrib);
            gl.bindBuffer(gl.ARRAY_BUFFER, xyzrgba_buffer);
            
            function data(xys)
            {
                gl.bufferData(gl.ARRAY_BUFFER, xys, gl.DYNAMIC_DRAW);
                length = xys.length/8;
            }
            
            function draw(size, ul, lr)
            {
                // mx+b style transformation.
                
                var mx = size.x / (lr.x - ul.x), bx = -mx * ul.x,
                    my = size.y / (lr.y - ul.y), by = -my * ul.y;
                
                var matrix = new Float32Array([mx, 0, 0, 0, 0, my, 0, 0, 0, 0, 1, 0, bx, by, 0, 1]);
                
                gl.uniformMatrix4fv(panzoom, false, matrix);
            }
            
            var frame = 1;
            paint();
            
            function paint()
            {
                gl.clearColor(0, 0, 0, 1); // gl.clearColor(253/255, 246/255, 227/255, 1);
                gl.clear(gl.COLOR_BUFFER_BIT);
                gl.enable(gl.DEPTH_TEST);
                
                gl.uniform1f(frameuni, frame);
                
                gl.vertexAttribPointer(xyz_attrib, 3, gl.FLOAT, false, 4*8, 0);
                gl.vertexAttribPointer(rgba_attrib, 4, gl.FLOAT, false, 4*8, 4*3);
                gl.vertexAttribPointer(seg_attrib, 1, gl.FLOAT, false, 4*8, 4*7);
                gl.drawArrays(gl.TRIANGLES, 0, length);
                /*
                gl.drawArrays(gl.TRIANGLES, 0, Math.min(length/2));
                gl.drawArrays(gl.TRIANGLES, Math.min(length/2), length - Math.min(length/2));
                */
                
                frame += 1;
                requestAnimationFrame(paint);
            }
            
            return {draw: draw, data: data};
        }
        
    //-->
    </script>
    <iframe width="40" height="30" src="https://www.youtube.com/embed/eJF-u9xWIH8?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>
</body>
</html>
​
    