基于flash的5技術的集成開發(fā)

基于flash的5技術的集成開發(fā)

0抗bb的應用自1996年以來，flash經(jīng)歷了10個版本，并發(fā)展成為一個成熟的擴展多媒體平臺，為web應用程序提供了豐富的多媒體、視頻和互動功能?，F(xiàn)在大多數(shù)在線計算機都配備了flashplayer，但使用瀏覽器插件的flash操作時的安全性和性能一直受到討論，因此某些設備（如androidiphone）上的flash也被禁止使用。HTML5作為下一代互聯(lián)網(wǎng)技術標準,為Web應用提供了豐富的API和特性,例如Canvas繪圖、音頻和視頻播放、離線存儲等等。這些新增的API和特性可以代替大部分Flash的功能,又不需要安裝額外的瀏覽器插件,開放的HTML5標準社區(qū),以及依賴于更加安全的JavaScript沙盒和同源規(guī)則,使得HTML5可以看作是Flash潛在的替代者。盡管HTML5標準非常優(yōu)秀,但是相對Flash,HTML5缺乏有經(jīng)驗的開發(fā)者和易用的集成開發(fā)環(huán)境,從Flash立刻轉(zhuǎn)向HTML5會極大地增加開發(fā)成本。為了解決這個問題,我們使用HTML5的技術實現(xiàn)Flash運行時來代替原來的瀏覽器插件。這樣既可以讓原來的Flash的開發(fā)者繼續(xù)使用Flash集成開發(fā)環(huán)境,又可以避免在瀏覽器上運行不安全的私有插件,只要瀏覽器支持HTML5就可以運行Flash動畫。Gordon是TobiasSchneider在Github上一個開源項目,它實現(xiàn)了對編譯后的Flash文件(SWF)的解析以及一個基于SVG的渲染器,能夠運行Flash的基本的功能,例如渲染形狀、文本構(gòu)成的動畫。但是SVG作為一個獨立的標準不僅本身非常復雜,而且還擁有多種擴展標準,瀏覽器對SVG的兼容性差別很大。而Canvas作為HTML5標準的一部分,只需要最基本的接口即可完成幾乎任何2D渲染,兼容性較好,在網(wǎng)頁游戲引擎、網(wǎng)頁動畫和傳統(tǒng)桌面應用中被廣泛地采用,因此用Canvas實現(xiàn)Flash的渲染引擎更有實用價值。本文研究了基于HTML5的Flash的運行時架構(gòu),稱為H5-Flash運行時,在Gordon開源項目的基礎上,用HTML5Canvas重新實現(xiàn)了渲染器,并分析了Canvas和SVG兩種渲染器對H5-Flash運行時性能的影響。本文相關的代碼已全部開源放在GitHub上。1flash操作期間的研究1.1傳統(tǒng)運行時的架構(gòu)定義和角色是Flash中的兩個基本概念。定義用于描述一個形狀、位圖、字體等,有一個唯一的ID。角色由一個定義和場景中的深度、顏色變換、坐標表變換等屬性組成。從Flash的源代碼到在目標平臺上運行,主要經(jīng)過三個階段:編譯、解析和渲染。分別由編譯器(Compiler)、解析器(Parser)和渲染器(Renderer)完成,其中編譯器一般在開發(fā)工具中集成,解析器和渲染器構(gòu)成了傳統(tǒng)的Flash運行時。圖1顯示了傳統(tǒng)運行時的架構(gòu),解析器首先讀入一個編譯后的Flash文件(SWF),解析得到文件中的定義和角色,把所有定義保存在字典中,把當前場景中的角色保存在顯示列表中。顯示列表在渲染過程中會動態(tài)地增加、替換或刪除其中的角色,這些行為由解析得到的Place/Remove類型的控制標簽決定。當解析到另一種ShowFrame控制標簽時,則意味著顯示列表中已經(jīng)包含了當前幀的全部角色,可以立刻進行渲染。1.2本地代碼與傳統(tǒng)程序的對比H5-Flash運行時需要使用JavaScript和HTML5Canvas實現(xiàn)解析器和渲染器,性能與使用本地代碼實現(xiàn)的傳統(tǒng)運行時本身就有一定的差距,而且傳統(tǒng)運行時可以方便地為解析器和渲染器創(chuàng)建獨立的線程,使解析和渲染并行化,在渲染當前幀的同時解析下一幀。H5-Flash需要在傳統(tǒng)架構(gòu)的基礎上進行一些調(diào)整,例如選擇是否采用解析器以及解析和渲染并行化的問題,使H5-Flash運行時在性能與可用性之間達到平衡。1.2.1有解析器的解析方案H5-Flash運行時在架構(gòu)上可以選擇無解析器或有解析器兩種方案。在無解析器的方案中,不存在圖1中的解析器,因此不能直接支持現(xiàn)有的SWF文件,而是修改編譯器使其直接生成JavaScript代碼用于表示顯示列表和字典,運行時跳過解析階段,只需簡單地控制渲染器渲染即可。這種方案的優(yōu)點是省去了解析的時間,但缺點是要重寫Flash編譯器,還要把Flash源代碼重新編譯后才能使用,對于大量已經(jīng)編譯好的Flash則無法直接支持。Adobe官方提供的FLA到HTML5的轉(zhuǎn)換工具Wallaby就采用了這一種方案。在有解析器的方案中,架構(gòu)與傳統(tǒng)運行時完全相同,解析器需要花費一定時間下載和解析編譯后的SWF文件。而這種方案的優(yōu)點是可以兼容已有的大量Flash應用。其中,Smokescreen.us和Gordon開源項目使用的是這一種方案。是否需要采用解析器主要取決于解析時間與總運行時間的比例,若比例過高則采用解析器會影響運行時的性能。實際上,我們在實驗中發(fā)現(xiàn),幀數(shù)超過60幀(2秒～3秒)的動畫,其解析時間遠小于渲染時間(見第3節(jié)性能和分析),而一般的Flash動畫都要比我們的測試用例更加復雜,故使用解析器更具有實用性上的優(yōu)勢。因此,H5-Flash運行時保留解析器,并直接使用Gordon解析器的實現(xiàn),而將重點放在渲染引擎的實現(xiàn)上。1.2.2并行化的webearth在使用解析器的方案中,解析和渲染的并行化可以減少由于解析帶來的性能損失。在HTML5標準出現(xiàn)之前,JavaScript的執(zhí)行是單線程的,用來實現(xiàn)Flash運行時的話,解析和渲染只能串行執(zhí)行。而HTML5標準中的WebWorker提供了一種并行化的能力,使解析和渲染分別在獨立的線程內(nèi)并行執(zhí)行。但是WebWorker線程不能訪問瀏覽器原來線程內(nèi)的任何對象,例如DOM樹,而只能通過互相發(fā)送消息的機制與之通信。由于渲染器需要頻繁訪問瀏覽器的DOM樹,出于性能考慮,渲染器應運行在瀏覽器原來的線程內(nèi),解析器則運行在WebWorker內(nèi),解析后的內(nèi)容通過消息發(fā)送給渲染器渲染,這樣可以做到解析和渲染的并行化執(zhí)行。2角色的渲染和繪制在渲染Flash時,每一幀上所有的角色都儲存在數(shù)組形式的顯示列表中,每個角色一般由一個定義、一個深度值和一個變換矩陣組成。角色的定義描述了角色種類和渲染方法,一般的角色定義都是普通的形狀或一段文字。角色的深度值(depth)在顯示列表中是唯一的,深度值高的角色覆蓋在深度值低的角色上面。另外,某些角色可以設置成“遮罩”,這些遮罩角色不被渲染,只計算它的輪廓,但遮罩所處深度之上的若干角色將被裁減,只有輪廓內(nèi)的部分會渲染出來。角色的變換矩陣決定了在根據(jù)角色定義渲染時采用什么樣的2D變換矩陣,變換矩陣由三組參數(shù)組成,分別表示對X和Y坐標的縮放、旋轉(zhuǎn)和位移。用Canvas渲染Flash的基本流程(如圖2所示)就是按照深度從低到高的順序繪制顯示列表中的角色。Canvas把當前的變換矩陣、剪裁區(qū)域、填充樣式等稱為繪制狀態(tài),繪圖時根據(jù)當前的繪制狀態(tài)進行計算和渲染。為了避免角色的變換矩陣、填充樣式等受到其他角色的影響,在渲染角色前必須保存當前的繪制狀態(tài),在渲染結(jié)束再恢復上次保存的繪制狀態(tài)。對于遮罩,可以通過設置Canvas的剪裁區(qū)域來實現(xiàn),與渲染角色相似,在繪制遮罩前先保存當前的繪制狀態(tài),但不同的是遮罩層結(jié)束后不會立刻恢復繪制狀態(tài),而是等受到遮罩層影響的那幾個深度的對象渲染完成,才恢復以前的繪制狀態(tài)。角色的渲染主要解決兩個問題:繪制角色的輪廓和實現(xiàn)各種填充方式。由于大多數(shù)角色定義都是形狀和文字,為了便于研究,我們只實現(xiàn)了形狀和文字的渲染。另外,對多媒體和用戶交互的支持,會在將來的工作中實現(xiàn),不在本文的討論范圍內(nèi)。2.1圖紙和文本的形狀2.1.1起止點、線條、充填樣式形狀是Flash定義中最基本的一種元素,由一系列的邊(Edge)、線條樣式(LineStyle)和填充樣式(FillStyle)組成。邊分為兩種:一種是線段,用起止點的坐標描述,另一種是弧線,是一種二次貝塞爾曲線,使用兩個端點和一個線外的錨點描述。線條樣式用來表示線段的顏色和寬度。填充樣式描述形狀使用的填充方式。在Canvas中可以使用路徑(Path)實現(xiàn)邊,Canvas的路徑由一系列的線段和曲線組成,用moveTo控制路徑繪制點的移動,用lineTo繪制線段,用quadraticCurveTo繪制二次貝塞爾曲線。用Canvas的lineWidth和strokeStyle的屬性控制邊的寬度和顏色。用Canvas的fillStyle控制填充樣式。2.1.2文化型sql建模Flash的文本由兩個定義組成:文本定義和字體定義。文本定義表示字符內(nèi)容,而字體定義表明使用何種方式和字體渲染文本。Flash的字體分為設備字體(DeviceFont)和字形字體(GlyphFont),前者直接使用Flash運行平臺的字體渲染,在不同平臺上得到的渲染效果可能不同,后者是將字形定義嵌入SWF文件中,使用Flash標準的渲染圖形的方法渲染,在不同平臺上得到相同的渲染效果。字形字體的定義與形狀相似,但只包含邊的定義,每個字都定義在一個1024×1024的EM方格內(nèi),渲染時需要根據(jù)字體大小進行適當?shù)目s放。使用設備字體的文本,可以通過直接設置Canvas的font屬性為字體名稱,然后調(diào)用fillText渲染。字形字體的渲染則可以使用兩種方式:WebFont和直接渲染。使用WebFont渲染首先要把字體定義先轉(zhuǎn)換成對應的SVG字體定義,通過CSS添加一個@font-face的規(guī)則,然后把font屬性賦值為新的字體,最后調(diào)用fillText渲染文本。另一種方法就是直接渲染,渲染方法與渲染普通形狀相似,字體大小通過修改變換矩陣來實現(xiàn)。WebFont方法需要瀏覽器對SVG格式的WebFont的支持,而且必須在字體加載成功后才能渲染,實現(xiàn)起來難以控制,因此我們采用直接渲染的方式。2.1.3基于約束的圖像填充Flash有兩種填充方式:漸變色填充和圖像填充。其中漸變色分為線性漸變和放射性漸變,漸變色的坐標定義在一個方形的漸變空間上(如圖3所示),填充時,用一個變換矩陣把漸變空間映射到被填充的對象的坐標上,再進行填充。Canvas也支持這兩種漸變形式,坐標系的映射可以通過改變Canvas的變換矩陣來實現(xiàn)。另一種填充方式是用圖像填充,Flash有兩種圖像格式:一種是直接使用標準圖像格式的二進制表示(比如JPEG、PNG),另一種是用圖像的像素點顏色的數(shù)組表示。Canvas可以使用填充模式(Pattern)把一個Image或Canvas對象作為圖片填充到封閉區(qū)域內(nèi),因此實現(xiàn)填充的主要的問題是把Flash的圖像表示轉(zhuǎn)換成Canvas可以用來填充的對象。我們根據(jù)不同的圖像格式,可以有效地把這兩種格式的圖像分別轉(zhuǎn)換成Image或Canvas,轉(zhuǎn)換方法如下:?標準格式表示的圖像把二進制表示直接轉(zhuǎn)換成base64編碼的DataURI,賦值給Image對象的src屬性;?像素信息表示圖像逐個像素繪制到空白的Canvas上,最終使用這個Canvas對象填充。3兩組測試用例結(jié)果比較性能測試平臺是IntelCore2DuoE6750,4GB內(nèi)存,Ubuntu10.10(Linux2.6.32-22),Chrome瀏覽器穩(wěn)定版(版本9.0.597.98),測試用例來自Gordon項目,測試用例的基本信息如表1所示。我們針對實現(xiàn)的HTML5的Flash運行時做了兩個性能測試,分別用于比較Canvas和SVG的渲染效率和場景大小對渲染效率的影響。測試一中,我們把每個測試用例在512×512的場景中重復運行20秒,統(tǒng)計使用Canvas和SVG渲染器各自的平均渲染和解析時間。結(jié)果顯示(表1),Canvas和SVG都能在測試平臺均能以高于規(guī)定幀率的速度正確渲染完成,因此完全可以代替Flash插件渲染基本的Flash動畫。在相同分辨率下,Canvas實現(xiàn)的引擎的實際幀率都低于SVG的實現(xiàn),在我們的測試用例中,這個差距可以達到約13倍。分別統(tǒng)計解析時間和渲染時間(如圖4、圖5所示),我們發(fā)現(xiàn)對于幀數(shù)都比較多的Flash動畫,無論Canvas還是SVG作為渲染器,解析時間占全部運行時間的比例都不高。例如Blue,有109幀,其解析時間占總運行時間的17.0%(Canvas)到27.6%(SVG),而且由于渲染器要保持固定的幀率,渲染時幀與幀之間總有些空閑時間,因此解析時間實際所占的比率更小,而大多數(shù)的Flash動畫都要在幾十幀以上,因此H5-Flash運行時的性能瓶頸主要在于渲染器。在測試二中,把測試用例依次縮放到不同大小的場景中運行20秒,記錄Canvas和SVG做渲染器的平均幀率的變化。結(jié)果顯示,在我們測試用例中,Canvas的渲染性能還受到場景的大小影響,相同的動畫,場景的面積越大,渲染性能越低(如圖6所示),例如,Gradient測試用例的幀率變化達到17.8倍,而相同情況下SVG測試的幀率的變化只有1.0到1.3倍(如圖7所示),SVG渲染器的引擎幾乎沒有受到場景大小的影響。4“沖突+兼容”的支持我們研究了基于HTML5的Flash運行時的架構(gòu),在Gordon的基礎上實現(xiàn)了一個使用Canvas的渲染器,并測試了Canvas和SV