加餐二丨spritejs我是如何設(shè)計(jì)一個(gè)可視化圖形渲染引擎的

我們把時(shí)間調(diào)回到2017年下半年，當(dāng)時(shí)我還在360奇舞團(tuán)。奇舞團(tuán)是360技術(shù)中臺(tái)的前端團(tuán)隊(duì)，主要負(fù)責(zé)Web開發(fā)，包括PC端和移動(dòng)端的產(chǎn)品的前端開發(fā)，比較少涉及可視化的內(nèi)容。不過(guò)，雖然團(tuán)隊(duì)以支持傳統(tǒng)Web開發(fā)為主，但是也支持過(guò)一部分可視化項(xiàng)目，比如一些toB系統(tǒng)的圖表展現(xiàn)。那個(gè)時(shí)候，我們團(tuán)隊(duì)正要開始嘗試探索可視化的方向。伴是使用數(shù)據(jù)驅(qū)動(dòng)框架D3.j來(lái)實(shí)現(xiàn)可視化圖表的。對(duì)D3.js來(lái)說(shuō)，D3-selection是其子模塊之一，它可以用來(lái)操作DOM樹，返回選中的DOM元素集合。這個(gè)操作非常有用，因?yàn)樗屛覀兛梢韵袷褂胘Query那樣，快速遍歷DOM元素，并且它通過(guò)data映射將數(shù)據(jù)與DOM元素對(duì)應(yīng)起來(lái)。這樣，我們用iv')，把對(duì)應(yīng)的div元素根據(jù)數(shù)據(jù)的數(shù)量添加到頁(yè)面上的body元素下，然后，我們直接通過(guò).style來(lái)操作對(duì)應(yīng)添加的div元素，修改它的樣式，就能輕松繪制出一個(gè)簡(jiǎn)單效果了代代123456789constdataset=[125,121,127,193,constcolors=['#fe645b','#feb050','#c2af87','#81b848',constchart=.style('left',.style('top',(d,i){return`${200+i*.style('width',d=>.style('height',這是一個(gè)非?？焖偾曳奖愕睦L圖方式，但它也有局限性。D3-selection只能操作具有DOM的圖形系統(tǒng)，也HTMLSVG。而對(duì)于CanvasWebGL，我們就沒有正因?yàn)镈3-selection操作DOM使用起來(lái)特別方便，所以常見的D3例子都是用HTML或者SVG來(lái)寫的，很少使用Canvas和WebGL，即便后兩者的性能要大大優(yōu)于HTML和SVG。因此，當(dāng)時(shí)實(shí)現(xiàn)SpriteJS1.0的初衷非常簡(jiǎn)單，那就是我希望讓團(tuán)隊(duì)的同學(xué)既能使用熟悉的D3.js來(lái)支持可視化圖表的展現(xiàn)，又可以使用Canvas來(lái)代替默認(rèn)的SVG進(jìn)行渲所以，SpriteJS1.0現(xiàn)了DOM層的API，我們可以像操作瀏覽器原生的DOM樣來(lái)操作SpriteJS元素，而我們最終渲染出的圖形是調(diào)用底層Canvas的API繪制到畫布上的。這樣一來(lái)，SpriteJS和HTML或者SVG，就都可以用D3-selection來(lái)操作了，在使用上它們沒有特別大的差別，但SpriteJS的最終渲染還是通過(guò)Canvas繪制性能相比其他兩種有了較大的提升比如說(shuō)，我用D3.js合SpriteJS現(xiàn)的柱狀圖代碼，與HTML制的代碼區(qū)別不大，但是由于是繪制在Canvas上，性能會(huì)提升很多。代代1const{Scene,Sprite}=2constcontainer 3constscene=new45width:6height:789constdataset=[125,121,127,193,constcolors=['#fe645b','#feb050','#c2af87',constfglayer=constchart=.attr('x',.attr('y',(d,i)=>return200+i*.attr('width',d=>.attr('height',.attr('bgcolor',(d,i)=>除了解決API的問(wèn)題，以及讓D3-selection可以使用之外，為了讓使用方式盡可能接近于原生的DOM，我還讓SpriteJS1.0實(shí)現(xiàn)了這4個(gè)特性，分別是標(biāo)準(zhǔn)的DOM元素盒模型、標(biāo)準(zhǔn)的DOM、WebAnimationAPI（動(dòng)畫）以及緩存策略。盒模型、DOM和WebAnimationAPI，你作為前端工程師肯定都知道，所以我多說(shuō)一下緩存策略。還記得在性能篇里我們，要提升Canvas的渲染性能，就要盡Canvas緩存下來(lái)。這樣，在下次繪制的時(shí)候，我們就可以將緩存未失效的元素從緩存中用drawImage的方式直接繪制出來(lái)，而不用重新執(zhí)行繪制元素的繪圖指令，也就大大提升了因此，SpriteJS1.0，我實(shí)現(xiàn)了一套自動(dòng)的緩存策略，它會(huì)根據(jù)代碼運(yùn)行判斷是否對(duì)SpriteJS1.0現(xiàn)的這些特性，基本上滿足了我們當(dāng)時(shí)的需要，讓我們團(tuán)隊(duì)可以用D3.js合SpriteJS來(lái)實(shí)現(xiàn)各種可視化圖表項(xiàng)目需求，而且使用上非常接近于操作原生的DOM，SpriteJSv2.x（2018年~2019年8年底，我開始思考S的下一個(gè)版本。當(dāng)時(shí)我們解決了在PCb上繪制可視化圖表的訴求，不過(guò)外部的使用者和我們自己，在一些使用場(chǎng)景中，逐漸開始有一些跨平臺(tái)的需求，比如在服務(wù)端渲染，或者在小程序中渲染。的繪圖能力都由Canvas底層API提供，與瀏覽器DOM和其他的API無(wú)關(guān)。這樣，SpriteJS就能夠運(yùn)行在任何提供了Canvas運(yùn)行時(shí)環(huán)境的系統(tǒng)中，而不一定是瀏覽器。重構(gòu)后的代碼能夠通 node-canvas運(yùn)行在Node.js環(huán)境中，所以我們就能夠使數(shù)據(jù)，大概有幾十萬(wàn)到上百萬(wàn)條記錄，如果端分別繪制它們，性能一定會(huì)有問(wèn)題。以，它們通過(guò)服務(wù)端繪制并緩存好之后，以圖像的方式發(fā)送給前端，這樣就大大提升了性能。此外，我們還通過(guò)在適配層上提供不同的封裝，讓S0小程序中。上圖是SpriteJS2.0的主體架構(gòu)，它的底層由一些通用模塊組成，Sprite-core是適配層，SpriteJS是支持瀏覽器和Node.js的運(yùn)行時(shí)，Sprite-wxapp是小程序運(yùn)行時(shí)，Sprite-extend-*是一些外部擴(kuò)展。我們通過(guò)外部擴(kuò)展實(shí)現(xiàn)了粒子系統(tǒng)和物理引擎，以及對(duì)主流響應(yīng)式框架的支持，讓SpriteJS2.0可以直接支持 SpriteJS2.0通過(guò)擴(kuò)展實(shí)現(xiàn)物理引除此以外，SpriteJS2.0支持了文字排版和布局系統(tǒng)。其中，文字排版支持了多行文本自動(dòng)換行，實(shí)現(xiàn)了幾乎所有CSS3支持的文字排版屬性，布局系統(tǒng)則支持了完整的彈性布局（Flexlayout)。這兩個(gè)特性被很多用戶喜愛可以說(shuō)，我們對(duì)SpriteJS2.0做了加法，讓它在1.0的基礎(chǔ)上增加了許多強(qiáng)大且有用的特性。到了2019年底，我又開始思考實(shí)現(xiàn)SpriteJS3.0。這次我打算對(duì)特性做一些取舍，將許多特性從SpriteJS3.0中去掉，甚至包括深受使用者喜愛的文字排版和布局系統(tǒng)。這又這是因?yàn)镾priteJS2.0雖好，但是它也有一些明顯的缺只支持Canvas2D，盡管有緩存策略，性能仍然不多平臺(tái)適配采用不同的分支，起來(lái)比較麻煩支持了許多非功能，如文字排版、布局，使得JavaScript文件太大不支持3D繪圖SpriteJSv3.x（2019年~2020年在SpriteJS3.0中，我舍棄了非功能，將SpriteJS定位為純粹的圖形渲染引擎，在適配層上，SpriteJS3.0完全舍棄了2.0設(shè)計(jì)里面較重的sprite-core，采用了更輕量級(jí)的圖形庫(kù)mesh.js作為2D適配層，mesh.js以gl-renderer作為webgl渲染底層庫(kù)，結(jié)合Canvas2D的polyfill做到了優(yōu)雅降級(jí)。當(dāng)運(yùn)行環(huán)境支持WebGL2.0時(shí)，SpriteJS3.0默認(rèn)采用WebGL2.0渲染，否則降級(jí)為WebGL1.0，如果也不支持WebGL1.0，再最終降級(jí)為Canvas2D。在3D適配層方面，SpriteJS3.0采用 OGL庫(kù)。這樣一來(lái)，SpriteJS3.0就完全WebGL渲染，能夠繪制2D3D圖形了SpriteJS3.0繼承了SpriteJS2.0的跨平臺(tái)性，但是不再需要使用分支來(lái)適配多平臺(tái)，而是采用了更輕量級(jí)的polyfill設(shè)計(jì)，同時(shí)支持服務(wù)端渲染、Web瀏覽器渲染和小程序渲染，理論上講還可以移植到其他支持WebGL或Canvas2D的運(yùn)行環(huán)境中去。SpriteJS3.0SpriteJS1.0SpriteJS2.0用緩存機(jī)制優(yōu)化性能不同，SpriteJS3.0認(rèn)采WebGL渲染，因此使用了批量渲染的優(yōu)化策略，我們?cè)谛阅芷兄v過(guò)這種策略，在繪制量幾何圖形時(shí)，它能夠顯著提升WebGL渲染的性能由于發(fā)揮了GPU并行計(jì)算的能力，在大批量圖形繪制的性能上，SpriteJS3.0的性能大約是SpriteJS2.0的100倍。此外，SpriteJS3.0支持了多線程渲染，可避免UI阻塞，從SpriteJS3.0繪制5萬(wàn)個(gè)地理信息點(diǎn)，60fps幀總之，SpriteJS3.0著性能的優(yōu)化，已經(jīng)成為一個(gè)純粹的可視化渲染引擎了，但在我看來(lái)性能優(yōu)化得不夠極致，數(shù)據(jù)壓縮和批量渲染沒有做到JS的矩陣運(yùn)算還是不夠快，計(jì)算性能有提升因?yàn)榭紤]到兼容性的問(wèn)題，所以我采用了Canvas2D級(jí)，這讓JavaScript仍然3D能力不夠強(qiáng)，與ThreeJS等主流3D引擎仍有差距SpriteJS的未來(lái)版本（2020年~2021年今年下半年，我開始設(shè)計(jì)SpriteJS4.0。這一次，我打算把它打造成一個(gè)更純粹的圖形系統(tǒng)，讓它可以做到真正跨平臺(tái)，完全不依賴于Web瀏覽器。下面是SpriteJS4.0的結(jié)構(gòu)圖，它的底層將采用OpenGLES和Skia來(lái)渲染3D和2D圖形，中間層使用JavaScriptCore和JSBindings技術(shù)，將底層Api通過(guò)JavaScript導(dǎo)出，然后在上層適配層實(shí)現(xiàn)WebGL、WebGPU和Canvas2D的API，最上層實(shí)現(xiàn)SpriteJS的API。SpriteJS4.0體系結(jié)根據(jù)這個(gè)設(shè)計(jì)，SpriteJS4.0將對(duì)瀏覽器完全沒有依賴，同時(shí)依然可以通過(guò)WebAssembly式運(yùn)行在瀏覽器上。這樣SpriteJS4.0成為真正跨平臺(tái)的圖形系統(tǒng)，可以以非常小的包集成到其他系統(tǒng)和原生App中，并且達(dá)到原生應(yīng)用的性能。在這一版，我還會(huì)全面優(yōu)化SpriteJS內(nèi)存管理、矩陣運(yùn)算和多線程機(jī)制，力求渲染性能在SpriteJS1.0中，我們追求的是和DOM一致的API，能夠使用D3.js結(jié)合SpriteJS來(lái)繪制可視化圖表到Canvas，從而提升性能。到了SpriteJS2.0，我們追求跨平臺(tái)能力和一些強(qiáng)大的功能擴(kuò)展，比如文字排版和布局系統(tǒng)。而到了SpriteJS3.0，我們決引擎本質(zhì)，追求極致的性能發(fā)揮GPU的能力，并支持3D渲染。再到今年的SpriteJS4.0，主流圖形系統(tǒng)總的來(lái)說(shuō)，在S0到0舍。我希望通過(guò)我今天的，能夠幫助你理解圖形系統(tǒng)和渲染引擎的設(shè)計(jì)，也期待在你設(shè)計(jì)其他系統(tǒng)和平臺(tái)的時(shí)候，它們能給你啟發(fā)。最后，請(qǐng)你試著回想你曾經(jīng)接觸過(guò)的可視化項(xiàng)目，如Spr