webgl在前端可视化中的实践.pptxVIP

webgl在前端可视化中的实践汇报人：

?纲ECharts简介为什么选择Canvas及Canvas的限制WebGL与ECharts的结合三维空间的可视化利?WebGL加速?引导布局在前端实现?品质的渲染

ECHARTS是什么拥有17kstar的开源前端可视化库声明式的编程接?丰富的可视化类型和交互?式?数据量展现的能?吸引眼球的动画和特效

为什么选择CANVAS？更灵活的性能优化像素操作的能?能够和WebGL更好的结合

越来越复杂的需求我要三维图表我要显示??万的数据我要?秒内能够完成关系图布局我要?屏上酷炫的特效

越来越?不从?的CANVAS画路径还是?量的?式只能“软渲染”三维图形

新世界的??

WEBGL能够带来什么三维场景的绘制?维绘制的性能提升GPU通?计算(GPGPU)更加酷炫的效果

能?越?坑越?

WEBGL的使?和坑三维图表的绘制利?WebGL加速?引导布局前端实现?品质的渲染

三维图表

总结起来就是点·线·?

画好三维的点线?

点三维空间的位置颜?形状??

JAVASCRIPTVERTEXFRAGMENTgl.drawArrays(gl.POINTS,0,100);attributefloatsize;gl_PointSize=size;gl_FragColor=vec4(1.0);

不同形状的点把形状???填充到Canvas上作为纹理gl_FragColor=color*texture2D(sprite,gl_PointCoord);

描边？画轮廓线单独再创建?张描边的纹理单纹理中描边和填充?颜?区分SignedDistanceField

SIGNEDDISTANCEFIELD（SDF）存储到最近的图像边缘的距离Shader中根据这个距离填?floatd=texture2D(sprite,gl_PointCoord).r;//Antialiasgl_FragColor.a*=smoothstep(0.5-smoothing,0.5+smoothing,d);

优势存储空间?，放?后也有清晰的边缘开销?能实现外发光，投影

线折线?线轮廓线?格线

原?态画线gl.LINESgl.LINE_STRIPgl.LINE_LOOPgl.lineWidth(5);gl.drawArrays(gl.LINES,0,100);

但是

原?画线?法的各种坑不同的显卡驱动下画线的效果会有细微区别?法控制lineJoin和lineCap有最?线宽的限制，?且Windows下最?只有1

三?化线段

实现屏幕空间固定宽度vec2vec2vec2dirAdirB=normalize(currScreen-prevScreen);=normalize(nextScreen-currScreen);tanget=normalize(dirA+dirB);len*=1.0/max(dot(tanget,dirA),0.5);offset=tanget;offset=vec2(-offset.y,offset.x)*len;currScreen+=offset;

?三??程序?成

GEO3D*GeoJSON转成MeshTriangulationExtrude

)

TRIANGULATION-EARCLIPPING实现简单可以利?空间哈希优化使?链表存储顶点

GPU的通?计算WebGL中实现?引导布局

?引导布局介绍?于关系图的布局节点与节点之间模拟斥?，边模拟弹簧的引?每次迭代O(n2),需要上百次迭代才能结束

?引导布局的性能优化BarnesHutSimulation多线程？WebWorkerSIMD？

WEBGL中实现?引导布局

性能对?Nodes:22kEdges:48k

原论?CPUwithoutBarnesHut:~41000msCPUwithBarnesHut:~400ms

Macbook132012CPUwithoutBarnesHut:~28000msCPUwithBarnesHut:~1000msGPU:~260ms

GTX1070,i7CPUwithoutBarnesHut:~12000msCPUwithBarnesHut:~300msGPU:~2ms

GPU加速在?端显卡中的性能提升?分显著

限制需要浏览器?持WebGL需要浮点纹理扩展数据量特别?的时候容易造成整个