2d:null 2e:["$","title",null,{"children":"Signed Distance Fields, Wind Barbs, and WebGL | Corey Guastini | Observable"}] 33:T811,md`## The Problem Visualizing weather model data on an interactive map in the browser is an exercise in making the data size as small as possible to increase peformance while maintaining data integrity. On the site [quadweather.com](https://www.quadweather.com), I accomplish visualizing modeled radar reflectivity or temperature by using a quadtree compression algorithm, inspired by [this quadtree art project](https://github.com/fogleman/Quads), to eliminate data points where they aren't needed (e.g., over areas of no precipitation or within regions of little temperature variation). For the sea-level pressure contours rendered on the site, I simplify the data using Douglas-Peucker, ported from [simplify.js](https://mourner.github.io/simplify-js/). A meteorologist knows a weather visualization is incomplete without wind barbs, though, and there are no wind barbs plotted on quadweather.com. The reason wind barbs aren't plotted is because there is no easy way to simplify wind data. A wind visualization needs a uniform display of barbs at high resolution as the user zooms into the map, so data points can't be eliminated. Worse, wind barbs need both a speed and direction to be visualized, which means twice the data of other fields. Worse still, a weather model forecasts many hours into the future, and the visualization needs to be able to step through time quickly. Trying to transfer millions of data values for many forecast hours for wind speed and direction can seem infeasible. This notebook demonstrates a method for visualizing wind barbs while minimizing the data size and maximizing performance. The final product is below. The barb density increases as you zoom in, and you can use the Forecast hour slider to step through 36 hours of the latest wind forecast. The soft and max sliders adjust the wind barb appearance and are a variation on the HLSL code in the [Valve paper](https://steamcdn-a.akamaihd.net/apps/valve/2007/SIGGRAPH2007_AlphaTestedMagnification.pdf) describing text rendering using distance fields.`34:T52f,md`## Formatting the Data The wind data plotted on this page comes from a weather model the National Weather Service (NWS) runs called the HRRR (High Resolution Rapid Refresh). It has a horizontal resolution of 3-km and covers the continental United States, which results in nearly 2 million data points for every forecast hour. The model grid is funky, so the first step in enabling ease of use in the browser is regridding the data to 0.1-degree resolution using a NWS tool called [wgrib2](https://www.cpc.ncep.noaa.gov/products/wesley/wgrib2/new_grid.html). This regridding also has the effect of cutting the number of data points down to 236,800 (740 × 320), which is much less but still plenty for a detailed visualization. The next step is converting the latitude and longitude coordinates to a Mercator projection at zoom level 0, which is how the WebGL program will expect the data when implementing a Mapbox Custom Layer. The projection calculation from degrees to Mercator is the same as the Mapbox function [MercatorCoordinate.fromLngLat](https://docs.mapbox.com/mapbox-gl-js/api/geography/#mercatorcoordinate). To make the coordinate data as small as possible, the data are encoded in the channels of an RGBA PNG image. The y coordinate is stored in the R and G channels and the x coordinate in the B and A. `35:T57c,atlas = { var kt = 100 var canvas = document.createElement('canvas'); var numGlyphs = kt/5 + 1; var numCols = Math.floor(width/(canvasSize)); var canvasWidth = numCols*canvasSize; var numRows = Math.ceil(numGlyphs/numCols); var canvasHeight = numRows*canvasSize; var dims = getSize(kt); canvas.height = dims.height; canvas.width= dims.width; const ctxSDF = DOM.context2d(canvasSize, canvasSize, 1); const imageData = ctxSDF.createImageData(canvasSize, canvasSize); var ctx = canvas.getContext('2d'); var ctxAtlas = sdfAtlas.getContext('2d'); var thisSpeed = 0; var startX = 0; var startY = 0; var count = 0; while (thisSpeed <= kt) { atlasDict[thisSpeed] = new TinySDF(glyphSize, glyphBuffer, thisSpeed); atlasDict[thisSpeed].generate(); atlasDict[thisSpeed].draw(); var x = count%numCols; var y = Math.floor(count/numCols); var imgData = atlasDict[thisSpeed].ctx.getImageData(0, 0, canvasSize, canvasSize); ctx.putImageData(imgData,x*canvasSize,y*canvasSize); for (let i = 0; i < atlasDict[thisSpeed].alphaChannel.length; i++) { imageData.data[4 * i + 3] = atlasDict[thisSpeed].alphaChannel[i]; } ctxAtlas.putImageData(imageData, x*canvasSize,y*canvasSize); atlasDict[thisSpeed].x = x*canvasSize; atlasDict[thisSpeed].y = y*canvasSize; thisSpeed+=5; count++ } return canvas; }36:T453,vsSource = ` attribute vec4 a_position; attribute vec4 a_color; attribute vec2 a_coordinate; attribute float a_rotation; float PI=3.141592654; uniform float sscale; uniform mat4 u_matrix; varying vec2 v_texcoord; varying vec4 u_color; void main() { //c and s for rotation matrix float c = cos(a_rotation*(PI/180.0)); float s = sin(a_rotation*(PI/180.0)); mat3 rotate = mat3(c,-s,0.0,s,c,0.0,0.0,0.0,1.0); //scale matrix, scaled by a half mat3 scale = mat3(1.0/sscale,0.0,0.0,0.0,1.0/sscale,0.0,0.0,0.0,1.0); //translate by half the width and height of the glyph mat3 translate = mat3(1.0,0.0,0.0,0.0,1.0,0.0,-0.05,-0.05,1.0); vec3 rapos=scale*rotate*translate*vec3(a_position.x, a_position.y,1.0); //holds geographic position of wind barb corner vec4 imat = vec4(a_coordinate.x+rapos.x, a_coordinate.y-rapos.y, 0.0, 1.0); //multiply geographic position by Mapbox projection matrix vec4 ptr = u_matrix * imat; //vertex position gl_Position = ptr; // Pass the texcoord to the fragment shader. v_texcoord = vec2(a_position.z, a_position.w); u_color = a_color; } `37:T55b,barbLayer = ( { id: 'barbs', type: 'custom', // method called when the layer is added to the map // https://docs.mapbox.com/mapbox-gl-js/api/#styleimageinterface#onadd onAdd: function (map, gl) { //this.ext = gl.getExtension('ANGLE_instanced_arrays'); //set up some gl settings gl.blendFuncSeparate( gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE); gl.enable(gl.BLEND); // link the two shaders into a WebGL program this.programInfo = programInfo(gl,vsSource,fsSource); this.textBufferInfo = returnTextBufferInfo(gl); var glyphTex = gl.createTexture(); // Tell WebGL we want to affect texture unit 0 gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, glyphTex); // Fill the texture with canvas gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, sdfAtlas); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); },//end onAdd, // method fired on each animation frame // https://docs.mapbox.com/mapbox-gl-js/api/#map.event:render render: renderFunction })38:T15ca,renderFunction=function (gl, matrix) { gl.useProgram(this.programInfo.program); gl.blendFuncSeparate( gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE); gl.enable(gl.BLEND); //bind SDF glyph texture to program var glyphTex = gl.createTexture(); gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, glyphTex); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, sdfAtlas); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); //define uniforms gl.uniform1i(this.programInfo.uniformLocations.textureUniformLocation, 0); gl.uniformMatrix4fv( this.programInfo.uniformLocations.matUniformLocation, false, matrix ); var _this=this; var thisColor; var adStartj = Math.max(Math.round(bounds.startj/bounds.step)*bounds.step - bounds.step,0); var adEndj = Math.min(Math.round(bounds.endj/bounds.step)*bounds.step + bounds.step,imgHeight); var adStarti = Math.max(Math.round(bounds.starti/bounds.step)*bounds.step - bounds.step,0); var adEndi = Math.min(Math.round(bounds.endi/bounds.step)*bounds.step + bounds.step,imgWidth); var dimx = Math.ceil((adEndj-adStartj)/bounds.step); var dimy = Math.ceil((adEndi-adStarti)/bounds.step); var indices = new Float32Array(dimx*dimy*24); var rotationAttributes = new Float32Array(dimx*dimy*6); var colorAttributues = new Float32Array(dimx*dimy*24); var positionAttributes = new Float32Array(dimx*dimy*12); var count = 0; //get data for barbs in map view for (let i=adStartj; id/256)); // Draw the text. thisColor = d3.color(colors(r/30)); var thisVertexArray = vertexArray[speed]; for (let i=0; i<24; i++) { indices[count*24+i] = thisVertexArray[i]; } var rot = (g/255)*360; var col = [thisColor.r/255, thisColor.g/255, thisColor.b/255, 1]; //6 vertices make up each quad for (let i=0; i<6; i++) { rotationAttributes[count*6+i]=rot; colorAttributues[count*24+i*4] = col[0]; colorAttributues[count*24+i*4+1] = col[1]; colorAttributues[count*24+i*4+2] = col[2]; colorAttributues[count*24+i*4+3] = 1; positionAttributes[count*12+i*2] = coords[1]; positionAttributes[count*12+i*2+1] = coords[0]; } //increment barb count count++ } } var zoomLevel = Math.pow(2,map.getZoom()); gl.uniform1f(_this.programInfo.uniformLocations.max0UniformLocation, max0); gl.uniform1f(_this.programInfo.uniformLocations.max1UniformLocation, max1); gl.uniform1f(_this.programInfo.uniformLocations.soft0UniformLocation, soft0); gl.uniform1f(_this.programInfo.uniformLocations.soft1UniformLocation, soft1); gl.uniform1f(_this.programInfo.uniformLocations.sscaleUniformLocation, zoomLevel); //bind texture and pixel coords gl.bindBuffer(gl.ARRAY_BUFFER, _this.textBufferInfo.attribs.a_position.buffer); gl.bufferData(gl.ARRAY_BUFFER, indices, gl.STATIC_DRAW); gl.enableVertexAttribArray( _this.programInfo.attribLocations.positionAttributeLocation); gl.vertexAttribPointer( _this.programInfo.attribLocations.positionAttributeLocation, 4, gl.FLOAT, false, 0, 0); //bind rotation buffer gl.bindBuffer(gl.ARRAY_BUFFER, _this.textBufferInfo.attribs.a_rotation.buffer); gl.bufferData(gl.ARRAY_BUFFER, rotationAttributes, gl.STATIC_DRAW); gl.enableVertexAttribArray( _this.programInfo.attribLocations.rotationAttributeLocation); gl.vertexAttribPointer( _this.programInfo.attribLocations.rotationAttributeLocation, 1, gl.FLOAT, false, 0, 0 ); //bind coordinate buffer gl.bindBuffer(gl.ARRAY_BUFFER, _this.textBufferInfo.attribs.a_coordinate.buffer); gl.bufferData(gl.ARRAY_BUFFER, positionAttributes, gl.STATIC_DRAW); gl.enableVertexAttribArray( _this.programInfo.attribLocations.coordinateAttributeLocation); gl.vertexAttribPointer( _this.programInfo.attribLocations.coordinateAttributeLocation, 2, gl.FLOAT, false, 0, 0 ); //bind color buffer gl.bindBuffer(gl.ARRAY_BUFFER, _this.textBufferInfo.attribs.a_color.buffer); gl.bufferData(gl.ARRAY_BUFFER, colorAttributues, gl.STATIC_DRAW); gl.enableVertexAttribArray( _this.programInfo.attribLocations.colorAttributeLocation); gl.vertexAttribPointer( _this.programInfo.attribLocations.colorAttributeLocation, 4, gl.FLOAT, false, 0, 0 ); gl.drawArrays(gl.TRIANGLES, 0, rotationAttributes.length); } //render 39:T7df,//generate vertices corresponding to sprite table for each barb function makeVerticesForBarb(s) { //how many sprites needed //always 1 because we plot 1 barb at a time var len = 1; // always 6: // v1----v2/v5 // | / | // | / | // | / | // v3/v4---v6 var numVertices = len * 6; //times 4 because x and y for each vertex plus tex coords var positions = new Array(numVertices*4); var offset = 0; var x = 0; //width and height of entire atlas var maxX = sdfAtlas.width; var maxY = sdfAtlas.height; for (var ii = 0; ii < len; ++ii) { var glyphInfo = atlasDict[s]; if (glyphInfo) { //var x2 = x + canvasSize; //don't depend on canvasSize for vertex positions var x2 = 0.1; var u1 = glyphInfo.x / maxX; var v1 = (glyphInfo.y + canvasSize) / maxY; var u2 = (glyphInfo.x + canvasSize) / maxX; var v2 = glyphInfo.y / maxY; // 6 vertices per letter positions[offset + 0] = x; positions[offset + 1] = 0; positions[offset + 2] = u1; positions[offset + 3] = v1; positions[offset + 4] = x2; positions[offset + 5] = 0; positions[offset + 6] = u2; positions[offset + 7] = v1; positions[offset + 8] = x; positions[offset + 9] = x2; positions[offset + 10] = u1; positions[offset + 11] = v2; positions[offset + 12] = x; positions[offset + 13] = x2; positions[offset + 14] = u1; positions[offset + 15] = v2; positions[offset + 16] = x2; positions[offset + 17] = 0; positions[offset + 18] = u2; positions[offset + 19] = v1; positions[offset + 20] = x2; positions[offset + 21] = x2; positions[offset + 22] = u2; positions[offset + 23] = v2; x += sdfAtlas.width; offset += 12; } else { // we don't have this character so just advance x += 12; } } return { arrays: { position: positions }, numVertices: offset / 2, }; }3a:T49c,function programInfo(gl,vsSource,fsSource) { const shaderProgram = initShaderProgram(gl, vsSource, fsSource); const programInfo = { program: shaderProgram, attribLocations: { positionAttributeLocation: gl.getAttribLocation(shaderProgram, "a_position"), colorAttributeLocation: gl.getAttribLocation(shaderProgram, "a_color"), rotationAttributeLocation: gl.getAttribLocation(shaderProgram, "a_rotation"), coordinateAttributeLocation: gl.getAttribLocation(shaderProgram, "a_coordinate") }, uniformLocations: { textureUniformLocation: gl.getUniformLocation(shaderProgram,"u_texture"), matUniformLocation: gl.getUniformLocation(shaderProgram,"u_matrix"), colorUniformLocation:gl.getUniformLocation(shaderProgram,"u_color"), sscaleUniformLocation:gl.getUniformLocation(shaderProgram,"sscale"), max0UniformLocation:gl.getUniformLocation(shaderProgram,"max0"), max1UniformLocation:gl.getUniformLocation(shaderProgram,"max1"), soft0UniformLocation:gl.getUniformLocation(shaderProgram,"soft0"), soft1UniformLocation:gl.getUniformLocation(shaderProgram,"soft1") } }; return programInfo; }3b:Teec,function TinySDF(size, buffer, value, radius, cutoff) { var _this = this var spacing = 25; this.fontSize = size; this.buffer = buffer === undefined ? 3 : buffer; this.cutoff = cutoff || 0.25; this.radius = radius || 20; var size = this.size = this.fontSize + this.buffer * 2; this.speed = value; this.canvas = document.createElement('canvas'); this.canvas.width = this.canvas.height = size; this.ctx = this.canvas.getContext('2d'); this.ctx.fillStyle = 'black'; //center of canvas this.cx = size / 2; this.cy = size / 2; this.ctx.lineWidth = 5; var starty = _this.buffer; //5 kt starts down the main line if (this.speed == 5) { starty = starty + spacing; } var remaining = this.speed; this.generate = function() { //create main line //avoid gap between barb and line on first 10 if (remaining >=10 && remaining < 50) { _this.ctx.beginPath(); _this.ctx.moveTo(_this.cx+30,_this.buffer-20); _this.ctx.lineTo(_this.cx, _this.buffer); _this.ctx.lineTo(_this.cx, _this.canvas.height - _this.buffer); _this.ctx.stroke(); remaining-=10; starty+=spacing/2; } else { _this.ctx.beginPath(); _this.ctx.moveTo(_this.cx, _this.buffer); _this.ctx.lineTo(_this.cx, _this.canvas.height - _this.buffer); _this.ctx.stroke(); } //more to draw while (remaining >= 5) { if (remaining == 5) { _this.ctx.beginPath(); _this.ctx.moveTo(_this.cx, starty); _this.ctx.lineTo(_this.cx+15, starty - 10); _this.ctx.stroke(); remaining-=5; starty+=spacing; } else { //need a pendant if (Math.floor(remaining/50)>=1) { _this.ctx.beginPath(); _this.ctx.moveTo(_this.cx, starty); _this.ctx.lineTo(_this.cx, starty+20); _this.ctx.lineTo(_this.cx+30, starty); _this.ctx.fill(); remaining-=50; starty+=spacing+5; } //need 10 line else { _this.ctx.beginPath(); _this.ctx.moveTo(_this.cx, starty); _this.ctx.lineTo(_this.cx + 30, starty - 20); _this.ctx.stroke(); remaining-=10; starty+=spacing/2; } } } } // temporary arrays for the distance transform this.gridOuter = new Float64Array(size * size); this.gridInner = new Float64Array(size * size); this.f = new Float64Array(size); this.z = new Float64Array(size + 1); this.v = new Uint16Array(size); // hack around https://bugzilla.mozilla.org/show_bug.cgi?id=737852 this.middle = Math.round((size / 2) * (navigator.userAgent.indexOf('Gecko/') >= 0 ? 1.2 : 1)); this.draw = function (char) { var imgData = this.ctx.getImageData(0, 0, this.size, this.size); var alphaChannel = new Uint8ClampedArray(this.size * this.size); for (var i = 0; i < this.size * this.size; i++) { var a = imgData.data[i * 4 + 3] / 255; // alpha value this.gridOuter[i] = a === 1 ? 0 : a === 0 ? INF : Math.pow(Math.max(0, 0.5 - a), 2); this.gridInner[i] = a === 1 ? INF : a === 0 ? 0 : Math.pow(Math.max(0, a - 0.5), 2); } edt(this.gridOuter, this.size, this.size, this.f, this.v, this.z); edt(this.gridInner, this.size, this.size, this.f, this.v, this.z); for (i = 0; i < this.size * this.size; i++) { var d = Math.sqrt(this.gridOuter[i]) - Math.sqrt(this.gridInner[i]); alphaChannel[i] = Math.round(255 - 255 * (d / this.radius + this.cutoff)); } _this.alphaChannel = alphaChannel; return alphaChannel; }; }3c:[{"id":"1f63fab167236ee4b94010103a9da7292902c0903ac3e44150a3dcc8684632abd32372c3ab5687aff73e871d6410ffed81cfcdee6f11e9c06abb82bcfdf09a93","href":"https://static.observableusercontent.com/files/1f63fab167236ee4b94010103a9da7292902c0903ac3e44150a3dcc8684632abd32372c3ab5687aff73e871d6410ffed81cfcdee6f11e9c06abb82bcfdf09a93","name":"out4.png","type":"image/png","lastModified":1602994288070.325,"size":197152},{"id":"024f11ec0d5c611290bf4cfecf51eb5e67b36c302056e4c2029f7ad545cf74b30246aeaebda6b01c2126f130cfff9f9b5c685d1241619f4ab15c479ae09ac4d8","href":"https://static.observableusercontent.com/files/024f11ec0d5c611290bf4cfecf51eb5e67b36c302056e4c2029f7ad545cf74b30246aeaebda6b01c2126f130cfff9f9b5c685d1241619f4ab15c479ae09ac4d8","name":"outcoords4.png","type":"image/png","lastModified":1602721199229.068,"size":2203},{"id":"1ab4aba5bfc6ca43e85a7850e983878bdef7e4d71fbd4b7deacedab65ad24c96cab2650553965c9d6fe316f84addbcaf9d6a920a26f082c09ace3307e2543c3e","href":"https://static.observableusercontent.com/files/1ab4aba5bfc6ca43e85a7850e983878bdef7e4d71fbd4b7deacedab65ad24c96cab2650553965c9d6fe316f84addbcaf9d6a920a26f082c09ace3307e2543c3e","name":"outcoords5.png","type":"image/png","lastModified":1602727232706.451,"size":571097}] 31:{"id":"95bb88f9b332aa76","slug":"signed-distance-fields-wind-barbs-and-webgl","title":"Signed Distance Fields, Wind Barbs, and WebGL","thumbnail":"1fc11d3ffc16d90e2603fba629e6fd7c91db5309dffec444de2b891227a49b75","access_level":"public","create_time":"$D2020-09-28T22:51:15.673Z","update_time":"$D2022-05-31T13:06:37.731Z","view_time":null,"first_public_time":"$D2020-10-20T00:13:17.145Z","has_unpublished_edits":null,"fork":false,"stars":12,"starred":false,"owner":{"type":"team","id":"da36068e9c88f131","login":"cguastini","name":"Corey Guastini","avatar_url":"https://avatars-next.observableusercontent.com/7c6d91c2a664c9f78ab78b1e0bf2b539441aaa1d9430ae24e9886ce825f3c1b0","tier":"starter_2024"},"version":1830,"publish_version":1830,"role":null,"authored":false,"authors":[{"type":"individual","id":"56bb3b86bffb2836","login":"cguastini","name":"Corey Guastini","avatar_url":"https://avatars-next.observableusercontent.com/7c6d91c2a664c9f78ab78b1e0bf2b539441aaa1d9430ae24e9886ce825f3c1b0","tier":null}],"members":[{"type":"individual","id":"56bb3b86bffb2836","login":"cguastini","name":"Corey Guastini","avatar_url":"https://avatars-next.observableusercontent.com/7c6d91c2a664c9f78ab78b1e0bf2b539441aaa1d9430ae24e9886ce825f3c1b0","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":7,"collection":null,"type":"notebook","body":{"title":"Signed Distance Fields, Wind Barbs, and WebGL","cells":[{"id":0,"value":"md`# Signed Distance Fields, Wind Barbs, and WebGL`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1083,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1700,"value":"validTime = {\n let time = parse(init.init);\n let valid = time.getTime() + (imageNum*60*60*1000);\n return format(valid);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":422,"value":"viewof map={\n \n let container = html`

`;\n yield container;\n\n // Create the \\`map\\` object with the mapboxgl.Map constructor, referencing\n // the container div\n let map = new mapboxgl.Map({\n container,\n center: [ -96, 40 ],\n zoom: 3.5,\n style: 'mapbox://styles/quadweather/ckftuk99o0lar1at0siprao95'\n });\n map.dragRotate.disable();\n map.touchZoomRotate.disableRotation();\n //make it so that map is not re-initialized whenever a field is changed\n map.on('load', function() {\n container.value = map;\n container.dispatchEvent(new CustomEvent(\"input\"));\n });\n map.on(\"moveend\",function() { \n setBounds(map.getBounds(), map.getZoom());\n })\n map.on(\"zoomend\",function() {\n setBounds(map.getBounds(), map.getZoom());\n })\n // Be careful to clean up the map's resources using \\`map.remove()\\` whenever\n // this cell is re-evaluated.\n invalidation.then(() => map.remove());\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1069,"value":"viewof imageNum = slider({\n min: 0,\n max: 36,\n step: 1,\n value: 0,\n description:'Forecast hour'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1633,"value":"viewof soft0 = slider({\n min: 0,\n max: 1,\n step: 0.01,\n value: 0.0,\n description:'soft0'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1634,"value":"viewof soft1 = slider({\n min: 0,\n max: 1,\n step: 0.01,\n value: 0.8,\n description:'soft1'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1636,"value":"viewof max0 = slider({\n min: 0,\n max: 1,\n step: 0.01,\n value: 1.0,\n description:'max0'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1641,"value":"viewof max1 = slider({\n min: 0,\n max: 1,\n step: 0.01,\n value: 0.65,\n description:'max1'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1291,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"image = await FileAttachment(\"outcoords5.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"decode = function(array) {\n let y=array[0]+array[1]/256;\n let x=array[2]+array[3]/256;\n x = x*rangeLon + minLon;\n y = y*rangeLat + minLat;\n //The projection matrix passed to the render function in the Mapbox custom layer needs the coordinates \n //in Mercator space at zoom level 0. For debugging purposes, these lines will convert those coordinates\n //into longitude and latitude\n //x=x*360-180;\n //y=(360/Math.PI)*(Math.atan(Math.exp(Math.PI-2*Math.PI*y))-Math.PI/4)\n return [y,x];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1314,"value":"md`A typical way to access the pixel values from a PNG image in the browser is to put the image data into a canvas element then get the values back out. When the image contains alpha values less than 255, however, that process becomes lossy. To get around this, I'm leveraging a javascript library called [pngjs](https://unpkg.com/browse/pngjs@5.0.0/) to read the PNG image from an ArrayBuffer. That way, the decoding will be accurate.\n\nThe wind speed and direction are encoded in another PNG image. The speed in knots is encoded in the R channel and the direction in the G. Because the alpha channel is not involved, the typical method for retrieving pixel values is used.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"windImage=await FileAttachment(\"out4.png\").image();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"md`## WebGL setup\nWith the data and coordinate values decoded from the PNG images, we have all the information we need to render barbs. To render the barbs quickly, I'm leveraging WebGL and Mapbox Custom Layers. With Custom Layers, you're able to incorporate your own WebGL program into the Mapbox GL JS rendering pipeline. The site [webglfundamentals.org](https://www.webglfundamentals.org) has been invaluable in learning how WebGL programs work. For this project, I leveraged its [page on using a texture atlas](https://webglfundamentals.org/webgl/lessons/webgl-text-glyphs.html) heavily. \n\nWind barbs are drawn every 5 kt. I'm using the canvas API to draw each barb from 0 to 100 kt in a texture atlas.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":809,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1112,"value":"md`For the barbs to look good on the map when rendered (e.g., adding a stroke and rotating), they're converted to signed distance fields, which are explained well in [this notebook](https://observablehq.com/@mourner/fast-distance-transform) and this [Mapbox blog post](https://blog.mapbox.com/drawing-text-with-signed-distance-fields-in-mapbox-gl-b0933af6f817). To actually generate the signed distance fields from the wind barb canvas, the [TinySDF](https://mapbox.github.io/tiny-sdf/) library was used. The SDF versions of the wind barbs are what are bound to the WebGL program.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":889,"value":"sdfAtlas = {\n var size = getSize(100);\n var canvas = document.createElement('canvas');\n canvas.width = size.width;\n canvas.height = size.height;\n return canvas;\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1465,"value":"md`The shader source and Custom Layer definition follow.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"fsSource = `\nprecision mediump float;\n\n// Passed in from the vertex shader.\nvarying vec2 v_texcoord;\nvarying vec4 u_color;\nuniform sampler2D u_texture;\nuniform float max0;\nuniform float max1;\nuniform float soft0;\nuniform float soft1;\n\nvoid main() {\n\n vec4 baseColor = u_color;\n float dist = texture2D(u_texture, v_texcoord).a;\n\n float oFactor = smoothstep(max1, max0, dist);\n baseColor = mix(u_color, vec4(1.0,1.0,1.0,1.0), oFactor);\n baseColor.a *= smoothstep(soft0, soft1, dist);\n gl_FragColor = baseColor;\n\n}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":440,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1121,"value":"md`When creating the Mapbox custom layer, a function needs to be defined that will be called whenever the map is rendered. That function is defined as renderFunction.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1011,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1492,"value":"vertexArray = {\n let hash = {};\n let speed = 0;\n while (speed <= 100) {\n let speedVerts = makeVerticesForBarb(speed).arrays.position;\n hash[speed] = speedVerts;\n speed+=5;\n }\n return hash;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1409,"value":"md`## Map Helpers`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"md`The decode function relies on some constants for the HRRR model grid, specifically the minimum x and y values and the difference between the maximum and minimum in both the x and y directions.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"rangeLon=0.20627777777780032","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"rangeLat=0.11510209644297015","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"minLat=0.32621287315201564","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"minLon=0.12638888888888888","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"imgWidth=image.width;\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"imgHeight = image.height","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":419,"value":"token='pk.eyJ1IjoicXVhZHdlYXRoZXIiLCJhIjoiY2tmbnk0a2dsMWo2bzJ5dDQzbjVoOTF2dyJ9.2mkls2VujpeZh5U2hewwuQ'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1232,"value":"mutable bounds = ({\n starti:null,\n endi:null,\n startj:null,\n endj:null,\n step:null\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1231,"value":"setBounds = function(bounds, zoom) {\n let minlat = bounds._sw.lat;\n let minlon = bounds._sw.lng;\n let maxlat = bounds._ne.lat;\n let maxlon = bounds._ne.lng;\n mutable bounds.starti = Math.floor(imgWidth*Math.max((minlon - (-134.5))/74.0,0));\n mutable bounds.endi = Math.ceil(imgWidth*Math.min((maxlon - (-134.5))/74.0,1.0));\n mutable bounds.startj = Math.floor(imgHeight*Math.max((minlat - (21.0))/32.0,0));\n mutable bounds.endj = Math.ceil(imgHeight*Math.min((maxlat - (21.0))/32.0,1.0));\n if (zoom > 3) {\n mutable bounds.step = Math.round(Math.max(750/Math.pow(zoom,3),1));\n } else {\n mutable bounds.step = 20;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":953,"value":"updateLayer = {\n var mapLayer = map.getLayer('barbs');\n if (typeof mapLayer === 'undefined') {\n map.addLayer(barbLayer, 'airport-label');\n setBounds(map.getBounds(), map.getZoom());\n }\n else {\n map.removeLayer('barbs');\n map.addLayer(barbLayer, 'airport-label');\n //I'm removing and re-adding the layer to update the barbs.\n //Just doing triggerRepaint should work, but some Observable\n //quirk I don't understand doesn't update the variables in the\n //render function unless the layer is removed and re-added\n //map.triggerRepaint();\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"//compiles program\nfunction initShaderProgram(gl, vsSource, fsSource) {\n //compile shaders\n const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);\n const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);\n \n const shaderProgram = gl.createProgram();\n gl.attachShader(shaderProgram, vertexShader);\n gl.attachShader(shaderProgram, fragmentShader);\n gl.linkProgram(shaderProgram);\n \n const success = gl.getProgramParameter(shaderProgram, gl.LINK_STATUS);\n if (!success) {\n \n throw new Error(`Couldn't link shader`);\n gl.deleteProgram(shaderProgram);\n }\n \n return shaderProgram;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"//compiles shaders\nfunction loadShader(gl, type, source) {\n const shader = gl.createShader(type);\n gl.shaderSource(shader, source);\n gl.compileShader(shader);\n \n const success = gl.getShaderParameter(shader, gl.COMPILE_STATUS)\n if (!success) {\n console.log(gl.getShaderInfoLog(shader));\n gl.deleteShader(shader);\n throw new Error(`Couldn't compile shader`);\n }\n return shader;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":447,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":382,"value":"colors=d3.interpolatePlasma;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":464,"value":"function returnTextBufferInfo(gl) {\n return {\n attribs: {\n a_position: { buffer: gl.createBuffer() },\n a_coordinate: { buffer: gl.createBuffer() },\n a_color: { buffer: gl.createBuffer() },\n a_rotation: { buffer: gl.createBuffer() },\n index: { buffer: gl.createBuffer() }\n },\n numElements: 0,\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"md`## SDF Cells`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"function edt1d(grid, offset, stride, length, f, v, z) {\n var q, k, s, r;\n v[0] = 0;\n z[0] = -INF;\n z[1] = INF;\n\n for (q = 0; q < length; q++) f[q] = grid[offset + q * stride];\n\n for (q = 1, k = 0, s = 0; q < length; q++) {\n do {\n r = v[k];\n s = (f[q] - f[r] + q * q - r * r) / (q - r) / 2;\n } while (s <= z[k] && --k > -1);\n\n k++;\n v[k] = q;\n z[k] = s;\n z[k + 1] = INF;\n }\n\n for (q = 0, k = 0; q < length; q++) {\n while (z[k + 1] < q) k++;\n r = v[k];\n grid[offset + q * stride] = f[r] + (q - r) * (q - r);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"function edt(data, width, height, f, v, z) {\n for (var x = 0; x < width; x++) edt1d(data, x, width, height, f, v, z);\n for (var y = 0; y < height; y++) edt1d(data, y * width, 1, width, f, v, z);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":810,"value":"glyphBuffer=37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":813,"value":"glyphSize=96","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":832,"value":"canvasSize={\n return glyphSize+2*glyphBuffer;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1680,"value":"translateHalf = -canvasSize/2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":820,"value":"atlasDict={\n return {};\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":885,"value":"getSize = function(kt) {\n var canvas = document.createElement('canvas');\n var numGlyphs = kt/5 + 1;\n\n var numCols = Math.floor(width/(canvasSize));\n var canvasWidth = numCols*canvasSize;\n \n var numRows = Math.ceil(numGlyphs/numCols);\n \n var canvasHeight = numRows*canvasSize;\n return {\n width:canvasWidth,\n height:canvasHeight\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"INF = 1e16","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1394,"value":"md`## Load Images`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1689,"value":"init = d3.json('https://www.quadweather.com/wind/meta.json', function(d) {\n return d});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1704,"value":"parse=d3.utcParse(\"%Y%m%d%H\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1709,"value":"format = d3.timeFormat(\"%-I%p %a %d %b %Y\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1037,"value":"images = {\n const fhours = 36;\n \n let layerImages=[];\n for (let i=0; i<=fhours; i++) {\n layerImages.push('https://www.quadweather.com/wind/out'+(\"0\"+i).slice(-2)+'.png')\n }\n const outputImages = {};\n var out = await Promise.all(layerImages.map((url) => fetch(url))).then(res=>{return Promise.all(res.map(d=>d.blob()))})\n .then(blob=>{\n let outputs = blob.map(d=>URL.createObjectURL(d));\n for (let i = 0; i`);\n }\n return gl;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3c","stdlib":"1","titling":"auto"}} 32:"$31:body"