WebGL 在数据可视化中的实践
2020-02-27 576浏览
- 1.WEBGL 在数据可视化中的实践 沈毅
- 2.ABOUT ME WebGL 2011 2013 Canvas ECharts 2014 qtek 2013
- 3.⼤纲 ECharts 简介 为什么选择 Canvas 及 Canvas 的限制 WebGL 与 ECharts 的结合 三维空间的可视化 利⽤ WebGL 加速⼒引导布局 在前端实现⾼品质的渲染
- 4.ECHARTS 是什么 拥有 17k star 的开源前端可视化库 声明式的编程接⼝ 丰富的可视化类型和交互⽅式 ⼤数据量展现的能⼒ 吸引眼球的动画和特效
- 5.为什么选择 CANVAS？ 更灵活的性能优化 像素操作的能⼒ 能够和 WebGL 更好的结合
- 6.越来越复杂的需求 我要三维图表 我要显示⼏⼗万的数据 我要⼀秒内能够完成关系图布局 我要⼤屏上酷炫的特效
- 7.越来越⼒不从⼼的 CANVAS 画路径还是⽮量的⽅式 只能“软渲染”三维图形
- 8.新世界的⼤⻔
- 9.WEBGL 能够带来什么 三维场景的绘制 ⼆维绘制的性能提升 GPU 通⽤计算(GPGPU) 更加酷炫的效果
- 10.能⼒越⼤ 坑越⼤
- 11.WEBGL 的使⽤和坑 三维图表的绘制 利⽤ WebGL 加速⼒引导布局 前端实现⾼品质的渲染
- 12.三维图表
- 13.总结起来就是 点·线·⾯
- 14.画好三维的点线⾯
- 15.点 三维空间的位置 颜⾊ 形状 ⼤⼩
- 16.JAVASCRIPT gl.drawArrays(gl.POINTS, 0, 100); VERTEX attribute float size; gl_PointSize = size; FRAGMENT gl_FragColor = vec4(1.0);
- 17.不同形状的点 把形状⽤⽩⾊填充到 Canvas 上作为纹理 gl_FragColor = color * texture2D(sprite, gl_PointCoord);
- 18.描边？ 画轮廓线 单独再创建⼀张描边的纹理 单纹理中描边和填充⽤颜⾊区分 Signed Distance Field
- 19.SIGNED DISTANCE FIELD（SDF） 存储到最近的图像边缘的距离 Shader 中根据这个距离填⾊ float d = texture2D(sprite, gl_PointCoord).r; // Antialias gl_FragColor.a *= smoothstep(0.5 - smoothing, 0.5 + smoothing, d);
- 20.优势 存储空间⼩，放⼤后也有清晰的边缘 开销⼩ 能实现外发光，投影
- 21.线 折线 ⻜线 轮廓线 ⽹格线
- 22.原⽣态画线 gl.lineWidth(5); gl.drawArrays(gl.LINES, 0, 100); gl.LINES gl.LINE_STRIP gl.LINE_LOOP
- 23.但是
- 24.原⽣画线⽅法的各种坑 不同的显卡驱动下画线的效果会有细微区别 ⽆法控制 lineJoin 和 lineCap 有最⼤线宽的限制，⽽且 Windows 下最⼤只有 1
- 25.三⻆化线段
- 26.实现屏幕空间固定宽度 vec2 dirA = normalize(currScreen - prevScreen); vec2 dirB = normalize(nextScreen - currScreen); vec2 tanget = normalize(dirA + dirB); len *= 1.0 / max(dot(tanget, dirA), 0.5); offset = tanget; offset = vec2(-offset.y, offset.x) * len; currScreen += offset;
- 27.⾯ 三⻆⾯ 程序⽣成
- 28.GEO3D 将 GeoJSON 转成 Mesh Triangulation Extrude
- 29.
- 30.TRIANGULATION - EAR CLIPPING 实现简单 可以利⽤空间哈希优化 使⽤链表存储顶点
- 31.GPU 的通⽤计算 WebGL 中实现⼒引导布局
- 32.⼒引导布局介绍 ⽤于关系图的布局 节点与节点之间模拟斥⼒，边模拟弹簧的引⼒ 每次迭代 O(n2), 需要上百次迭代才能结束
- 33.⼒引导布局的性能优化 Barnes Hut Simulation 多线程？Web Worker SIMD？
- 34.WEBGL 中实现⼒引导布局
- 35.性能对⽐Nodes:22kEdges:48k
- 36.原论⽂ CPU without BarnesHut:'>Hut:
