地球を作り上げる：世界天気のアニメーション地図（Building Earth: An Animated Map Of Global Weather）

2017年12月26日にIndeed Tokyo 目黒オフィスで開催されたData Visualization meetup 2017( https://data-visualization-japan.conn... )にて、Cameron Beccario さんのプレゼンテーションです。

Transcript

1. earth cameron beccario @cambecc data visualization japan 2017-12-26
2. what is “earth”?
3. tonight motivations construction reactions lessons flickr: arbyreed
4. intro Cedar Rapids, Iowa Computer Eng BSc, Iowa State University Microsoft, Seattle TradingScreen, Tokyo Indeed, Tokyo
5. motivations construction reactions lessons flickr: Adam & Tess
6. no job collected stamps. STAMPS. needed a new project! summer 2013
7. new project, new skills html5 javascript node.js data visualization ...but what to build?
8. inspirations hint.fm/wind flickr: Håkan Dahlström
9. weather is awesome
10. @AstroSamantha
11. project: wind map
12. investigations D3 map tutorial
13. weather data Global Forecast System (GFS) repository flickr: Ryan Keene
14. motivations construction reactions lessons flickr: Andreas Levers
20. demo earth
21. composition svg svg canvas webgl
22. particle animation in-depth
23. in-depth distortion
24. in-depth webgl
25. original implementation
26. fragment shader “pixel color program” each pixel runs the same program written in GLSL: OpenGL Shading Language void main() { // R G B A gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); }
27. fragment shader (pixel x, pixel y) ↓ (longitude, latitude) ↓ (wind speed) ↓ (color)
28. orthographic projection
29. uniform float u_R2; // scale R, squared uniform float u_lon0; // origin longitude uniform float u_sinlat0; // sin(lat0) uniform float u_Rcoslat0; // R * cos(lat0) uniform float u_coslat0dR; // cos(lat0) / R vec2 invert(in vec2 p) { float d = 1.0 - dot(p, p) / u_R2; float cosc = sqrt(d); float lon = u_lon0 + atan(p.x, cosc * u_Rcoslat0 - p.y * u_sinlat0); float lat = asin(cosc * u_sinlat0 + p.y * u_coslat0dR); return vec2(lon, lat); }
30. new implementation
31. but there was a bug...
34. uniform float u_R2; // scale R, squared uniform float u_lon0; // origin longitude uniform float u_sinlat0; // sin(lat0) uniform float u_Rcoslat0; // R * cos(lat0) uniform float u_coslat0dR; // cos(lat0) / R vec2 invert(in vec2 p) { float d = 1.0 - dot(p, p) / u_R2; float cosc = sqrt(d); float lon = u_lon0 + atan(p.x, cosc * u_Rcoslat0 - p.y * u_sinlat0); float lat = asin(cosc * u_sinlat0 + p.y * u_coslat0dR); return vec2(lon, lat); }
35. uniform float u_R2; // scale R, squared uniform float u_lon0; // origin longitude uniform float u_sinlat0; // sin(lat0) uniform float u_Rcoslat0; // R * cos(lat0) uniform float u_coslat0dR; // cos(lat0) / R vec2 invert(in vec2 p) { float d = 1.0 - dot(p, p) / u_R2; float cosc = sqrt(d); float lon = u_lon0 + atan(p.x, cosc * u_Rcoslat0 - p.y * u_sinlat0); float lat = asin(cosc * u_sinlat0 + p.y * u_coslat0dR); return vec2(lon, lat); }
36. uniform float u_R2; // scale R, squared uniform float u_lon0; // origin longitude uniform float u_sinlat0; // sin(lat0) uniform float u_Rcoslat0; // R * cos(lat0) uniform float u_coslat0dR; // cos(lat0) / R vec2 invert(in vec2 p) { float d = 1.0 - dot(p, p) / u_R2; float cosc = sqrt(d); float lon = u_lon0 + atan(p.x, cosc * u_Rcoslat0 - p.y * u_sinlat0); float lat = asin(cosc * u_sinlat0 + p.y * u_coslat0dR); return vec2(lon, lat); }
37. js (cpu) webgl (gpu)
38. js (cpu) webgl (gpu)
39. approximate asin function
40. uniform float u_R2; // scale R, squared uniform float u_lon0; // origin longitude uniform float u_sinlat0; // sin(lat0) uniform float u_Rcoslat0; // R * cos(lat0) uniform float u_coslat0dR; // cos(lat0) / R vec2 invert(in vec2 p) { float d = 1.0 - dot(p, p) / u_R2; float cosc = sqrt(d); float lon = u_lon0 + atan(p.x, cosc * u_Rcoslat0 - p.y * u_sinlat0); float lat = asin(cosc * u_sinlat0 + p.y * u_coslat0dR); float asin(in float v) { float x = abs(v); float ret = -0.0187293; ret *= x; ret += 0.0742610; ret *= x; ret -= 0.2121144; ret *= x; ret += 1.5707288; ret = PI / 2.0 - sqrt(1.0 - x) * ret; return sign(v) * ret; }
42. GPUs are designed for game perf, not generic computation
43. GAIA CloudFlare GRIB .epak netCDF-Java node.js Amazon S3 Browser NOMADS architecture
44. scalable... ...but will anyone visit? flickr: Antonio Cinotti
45. motivations construction reactions lessons flickr: Ray Muzyka
46. launch twitter facebook friends
47. live
48. live
55. motivations construction reactions lessons flickr: Duane Schoon
56. lesson: usability “what menu?”
57. streamlines vs. pathlines lesson: misperceptions
59. lesson: free geo data frameworks bandwidth help
60. weather data $billions
61. earth.nullschool.net @cambecc github.com/cambecc/earth
65. compression scale filter encode gzip flickr: Trey Ratcliff
66. filter 50 54 48 48 50 50 49 50 51 49 47 52 52 51 53 50
67. °Lon °Lat filter 47 49 49 50 48 50 50 52 48 50 51 52 51 54 53 50
68. °Lon °Lat filter 49 49 50 50 52 52 47 48 50 48 50 51 51 54 53 50
69. °Lon °Lat A B C filter
70. °Lon °Lat A B C filter P?
71. °Lon °Lat A B C filter
72. °Lon °Lat A B C P P = A + B - C filter
73. °Lon °Lat A B C P X P = A + B - C filter
74. °Lon °Lat A B C P X Δ = P - X P = A + B - C filter
75. °Lon °Lat 72 68 Δ = 4 76 78 74 P = 72 filter
76. °Lon °Lat filter
77. °Lon °Lat filter
78. °Lon °Lat filter
79. °Lon °Lat filter
80. °Lon °Lat filter
81. °Lon °Lat filter
82. °Lon °Lat filter
83. 50 54 48 48 50 50 49 50 51 49 47 52 52 51 53 50 -1 -1 -1 -0 -0 -0 -0 -0 -2 47 -1 -1 -3 -2 -4 -1 filter