搜尋部落格文章

2014年1月18日 星期六

[轉] 開始使用Adobe Scout (下)

ACTIONSCRIPT

到現在,你已經看到flash player 不間斷的活動,但你最關心的是可能是你的as 代碼在作什麼。actionscript 面板裡顯示了這些內容。
 開始使用Adobe <wbr> <wbr>Scout(下)
當你初看actionscript 面板,你可能看到一系列的函數的調用,為了得到說明和查看調用的棧,只需要點擊展開所有按鈕,它在自上而下設置的右邊。
 開始使用Adobe <wbr> <wbr>Scout(下)
你可以向下滾動調用棧查找哪個函數最費時間,如下圖,Context3D.present   的調用最費時間
 開始使用Adobe <wbr> <wbr>Scout(下)
默認情況下,actionscript 面板顯示向下而下的棧的調用,也就是入口點在棧的最上面,本地的調用在棧的最下面。反過來來看本地函數上花費了多少時間也非常有用,可以通過選擇自下而上來實現。
你可以得到每個包花費多少時間的高級視圖,通過打開在總結面板的actionscript 分類查看。
Actionscript 面板已經增加了用顏色區分不同的函數。本地用深藍錶示,用戶的as 代碼用淺藍錶示,stage3d用松石綠表示。下圖展示了用顏色標誌的向下而上的視圖。
 開始使用Adobe <wbr> <wbr>Scout(下) 
你也可以使用總結面板過濾你不想看到的包,下圖展示了只關注invawayders 包的效果。
 開始使用Adobe <wbr> <wbr>Scout(下)
在自下而上的視圖裡,父結節是你的函數,有自身時間列指示了在全部選擇的幀裡(not including any calls it might make into other functions) 它花費的時間。當你打開結點時你會看到自下而上的棧調用關係,它顯示了這個函數里調用了哪些其它函數,每個子函數對父函數的貢獻
ActionScript 面板展示了一個在幀和時間軸裡所有選擇的幀的actionscript 代碼的合計。一點要記住,這些數據是基於統計採樣的,也就是意味著你觀測的數據越多,得到的更準確的結果。如果你在右邊上面看到一個悲傷的小臉,意味著你需要選擇更多的幀。
ActionScript 面板的另一個有用的功能是你可以在首要活動和活動序列面板進行數據交互。
在這兩個面板裡,你可以單擊一個具體的活動在actionscript 面板裡實現過濾。例如下圖,展示了當你單擊首要活動的mouseDown 事件時,它僅顯示這個事件處理的內部的處理代碼。
開始使用Adobe <wbr> <wbr>Scout(下)


你可以過濾任何活動,不僅僅是as 事件處理函數。例如,下圖顯示了用垃圾回收活動過濾actionscript 代碼。不像一個事件,垃圾回收可以在你代碼執行的過程中觸發。用垃圾回收過濾讓你看到哪個函數引起了垃圾回收。你可以在調用棧裡看到。如果某個函數引起了過多的垃圾回收,它可能消費太多內存。
 開始使用Adobe <wbr> <wbr>Scout(下)
Trace log
當對actionscript 代碼進行採樣時,scout 收集trace() 的輸出。在幀和時間軸面板的事件面板裡的跟踪事件軌展示了哪一幀執行了trace ,而且如果你點擊了有trace 的幀,在活動序列面板裡同樣會顯示。你也可以選任意數量的幀並在跟踪日誌面板裡查看全部的trace 輸出。
 開始使用Adobe <wbr> <wbr>Scout(下)



會話信息
Scout 使你輕鬆和其它人分享數據。例如,如果你發現一個問題,你可以記錄下scout 會話,保存為flm 文件,並把它發給你的同事幫你debug 錯誤。像你運行在哪種機器上,你用的是哪個版本的flash ,這些信息很容易就會丟失。會話信息面板呈現了這些信息。它被分為幾個部分,提供詳細的讓scout 收集的遙測數據。

開始使用Adobe <wbr> <wbr>Scout(下) 

顯示列表渲染
你已經摸索了很多面板讓你來診斷flash player as 代碼正在幹什麼。但如果你的問題是關於渲染的呢?scout 的一個亮點之一就是使你發現底層的渲染問題。
如果你在使用傳統的flash 顯示列表渲染,你可以在新會話設置裡打開顯示列表渲染詳細信息選項,然後收集正在進行的詳細信息。當你選擇單幀時,你可以在顯示列表渲染裡看到。
 開始使用Adobe <wbr> <wbr>Scout(下)





如上面,當你選擇幀時,在面板的左邊有一系列正在渲染的傳遞並顯示它花費多長時間。染傳遞並不總是恰好和邊界對齊,因此你可能看到一個渲染的傳遞在一幀裡開始,然後在下一幀結束。在一幀裡,如果你看到多於一個完整的渲染傳遞,就是意味著你渲染過於頻繁,例如你可能在不需要的時候調用updateAfterEvent() 
默認下顯示列表渲染面板在熱圖模式下打開,這個屏幕的代表指示了哪個區域被重新渲染。
最白最亮的區域是最費時間渲染的,你可以在右邊的樹里點選擇一個對象,它會在相應的區域高亮顯示出來。它給你展示了對渲染傳遞和每一步的花費的詳細的分解。
通過切換到區域模式你可以得到渲染傳遞更詳細的視圖。如下圖,屏幕上的區域被分解為四種不同的類別,flash player 將它做為渲染引擎的一部分使用。明白這些分類對大幅度改善渲染的執行非常有用,例如,你不想對每一幀都改變的東西進行緩存。
 開始使用Adobe <wbr> <wbr>Scout(下)
   區域(紅色)框起來的是在屏幕上需要重繪的地方。這些信息和在debug 版的flash player  右鍵顯示重繪區域的內容是一樣的。

   更新的表面(藍色)是在這次渲染傳遞時要被更新的部分,表面是flash player 當使用濾鏡,blend mode,位圖緩存和位圖時不斷創建的位圖。
   緩存的表面(黃色)是被運行時緩存的表面,因此它可能被多幀復用,僅當這個渲染傳遞顯示時緩存被重新渲染
   顯示對象(綠色)是你加在顯示列表裡的矢量內容。再強調一遍,只有顯示對你在顯示時被重繪。
注意右邊的活動和它是相同的顏色系統。你可以點擊顯示的任何一個區域,相應的在樹上會相應相應的結點。如下圖,在有的結節左側會有小點,這表示這個結節會被重繪。
 開始使用Adobe <wbr> <wbr>Scout(下)

Stage3D 渲染
如果你在開發基於gup 加速的內容,你會使用新的stage3d api 使用GPU 加速渲染內容在桌面方面(Adobe AIR 3.0 以上和Flash Player 11 以上和移動方面(Adobe AIR 3.2 以上)是與平台無關的。你可能在開發3d 內容或使用如starling 這樣的將gpu 用於2d 內容渲染2d 框架,如果你在scout 中正好打開了stage3d 記錄,flashplayer 就會把每條執行到的stage3d 命令傳到scout 裡。也就是說,所有context3d 對象的調用會被記錄下來。Stage3d 渲染面板可以一步步的重新執行這些命令
 
開始使用Adobe <wbr> <wbr>Scout(下)



在這個面板裡,你會看到所有你所選擇幀裡執行的stage3d 命令。你可以點擊任何有關draw 的函數(Context3D.drawTriangles ),左邊的面板會立即更新顯示調用這個函數後後台緩衝區的狀態。按空格鍵會跳到下一個draw 函數調用的地方,按backspace 鍵會跳到前一個draw 函數調用的地方,這使得單步調試渲染的場景非常簡單。
 開始使用Adobe <wbr> <wbr>Scout(下)

如果你使用的是渲染到紋理(render-to-texture ),然後scout 會自動在後台緩衝區裡顯示你當前選擇的渲染目標對象。
每條stage3d 命令以簡潔的格式顯示,它帶有傳給命令的參數值。如果你不記得每個參數的含義,你可以右鍵命令選擇顯示參數名稱。
Stage3d 渲染面板可以單步調試draw 函數是因為scout 有在它內部正在運行的stage3d 擎的備份。Flash player 運行時並沒有把位圖傳給scout; 它只是傳每一條stage3d 命令和程序裡提供的參數,諸如程序,紋理,緩 ​​衝區這樣你就可以用你的方式研究探索你的場景,調試你的內容。
線框模式,在該面板上方的工具條裡打開,它僅使用重繪的三角形邊顯示場景的預覽,這樣回顧每一個對象並得知繪了什麼。
 開始使用Adobe <wbr> <wbr>Scout(下)

要使用stage3d 面板必須把允許stage3d 記錄選項打開,關於gpu 有用信息會記錄下來。
對任何stage3d 內容,你可以參考在總結面板裡得到gpu 內存會話,它也會在會話概況和幀和時間軸上打開相應的圖表。
 開始使用Adobe <wbr> <wbr>Scout(下)
你可以看到每個場景里數量的draw 方法的調用數量,並且能看到你上傳的主要的gpu 內存資源的分解。


Stage3d 程序編輯器
因為scout 有你執行的stage3d 命令的全部信息,你可以交互地修改每一條命令,然後看渲染的結果。每一次你調用Context3D.drawTriangles ,你就告訴gpu 運行兩個程序:在屏幕上定位若干位置的vertex program ,和在每一個三角形內容進行著色的fragment program stage3d 程序編輯器的幫助下,scout 讓你可以交互的查看和編輯這些程序。
Stage3D 渲染面板裡,點擊draw 函數調用的地方,然後看stage3d 程序編輯器,如下圖,stage3d 程序編輯器可以在窗口菜單裡選擇打開。它會顯示在調用draw 時供vertex   fragment 程序使用的AGAL 代碼。
 開始使用Adobe <wbr> <wbr>Scout(下)

開始使用Adobe <wbr> <wbr>Scout(下)
你可以交互的編輯這些代碼,然後點上傳讓scout 重繪場景。下圖展示了這個過程。
 //fragment program (agal 1) 
tex ft0, v0, fs1 <2d linear="" miplinear="" repeat=""> 
tex ft1, v1, fs2 <2d linear="" miplinear="" repeat=""> 
mul oc, ft0, ft1
上面頭兩行程序讀入兩個不同的紋理,最後一行將兩紋理相乘來決定最後輸出的像素顏色。
第一個紋理(fs1 )是建築牆的磚塊形,第二個紋理(fs2 )是陰影。
 開始使用Adobe <wbr> <wbr>Scout(下)
要看程序的改變如果起作用,改變最後一行,如下,它讓顏色基於第一個紋理(只顯示第一個紋理)。
 //fragment program (agal 1) 
tex ft0, v0, fs1 <2d linear="" miplinear="" repeat=""> 
tex ft1, v1, fs2 <2d linear="" miplinear="" repeat=""> 
mov oc, ft0
 

當你點擊上傳後,你會看到場景重新渲染了。你同時會看到一些命令變成purple 色了,表示這些命令使用了你的修改你也可以點擊重置,還原原始的狀態。

你也可以這樣修改,只顯示第二個紋理。
 //fragment program (agal 1) 
tex ft0, v0, fs1 <2d linear="" miplinear="" repeat=""> 
tex ft1, v1, fs2 <2d linear="" miplinear="" repeat=""> 
mov oc, ft1
 開始使用Adobe <wbr> <wbr>Scout(下)
這種交互能力對debug 來說非常有用,你也可以使用它學習如何使用AGAL 

常見問題
下面是一系列常見問題對你開始使用scout 可能有幫助。

1. Flash player   不能連接到scout
   確保你的scout 是最新的版本
   確保你的flash player 足夠新
   對於移動項目來說,確保你使用的是最新版的sdk 或者flash builder
   對於移動項目,確保companion app 是連著的
   同時確保.telemetry.cfg 文件內容正確並且位置正確
   核實scout 服務正在監聽。在瀏覽器裡輸入localhost:7934 ,如果有諸如“未收到數據”,“連接丟失”或其它類似的提示(因為scout 不是http 服務器),scout 應該會顯示“無法新建會話,因為telemetry數據無效” 。而如果瀏覽器等了很長時間然後跳出“服務器未發現”之類的提示,說明scout socket 服務沒在工作。
檢測你的防火牆設置。你也可以改變scout 的端口在首先項  > 監聽新會話的端口。
然後scout 會自動更新.telemetry.cfg 文件。
2.   如果IOS 或者Android Scout companion app 不能連接,試試如下方法。
   確保你的scout companion app 是最新的。
   如果 companion app 不能找到你的機器,看看輸入ip 地址能不能連接上。
   查看選擇其它的應用能不能連接到你的機器。你可能想在你的機器上建一個web
服務器連接試試。
   mac 系統,在系統首先項  > 共享,啟用web 共享
   windows ,啟用iis
   在你本機上試試能不能訪問本地的網站
   再試試從其它設備訪問
3.   如果是從chrome 里遠程分析
如果在chrome 裡你使用的是Flash Pepper plugin (默認的是),.telemetry.cfg 件在一個不是很好找的位置
MAC OS   
~/Library/Application Support/Google/Chrome/Default/ Pepper Data /Shockwave Flash/UserHome/.telemetry.cfg 

  Windows:  
%HOMEDRIVE%%HOMEPATH%\AppData\Local\Google\Chrome\User Data\Default\Pepper Data\ShockwaveFlash\UserHome\.telemetry.cfg 
4.   等待GPU 的意思
stage3d 的應用裡,你的cpu gpu 必須同步才能得到你想要的幀頻。如果一個負載了那個幀頻就會掉下來,有如下幾個可能。
 GPU  不能超過60fps 如果你想更新的比這快,他們就會成塊。如果你在構建60fps 的,對等待gpu 時間不要著急
   如果你的幀頻一持續很低,那麼就是你給gpu 的負荷太大了。你需要優化的3d 碼(或者在配置更好的設備上運行)。例如,試著渲染更少的三角形,使用AGAL 程序,或者使用更小的紋理。這時scout 不能直接顯示GPU 裡的什麼慢,因為它不能測算GPU 的時間。然而,如果你打開stage3d 記錄並查看stage3d 記錄面板,

你可以準備的看到哪個stage3d 命令在執行,對它進行單步調試,看看他們是如果影響屏幕的。你可能能發現更有效的方式。
   如果你的幀率抖動,擺動,或鋸齒圖案,你可能遇到關於cpu gpu 同步的問題,ADOBE 正在展開這項工作。
5. Scout  崩潰或者顯示錯誤,怎麼辦如果在你保存之前崩潰了,你可以從以下的路徑裡恢復數據,在這裡你可能發現很多的FLM 文件。
Mac OS: /var/folders/… …/Adobe Performance Data 
Windows: %HOMEDRIVE%%HOMEPATH%\AppData\Local\Temp\Adobe Performance Data 

注意  MAC OS ,實際的位置可以變的,所以最好的方式就是在/var/folders 搜索 "Adobe Performance Data" 如果在試著打開FLM 文件時Scout 再次崩潰,那麼你就是發現了一個bug 如果你提交你的FLM ADOBE,我們會解決這個BUG 並且會非常感激你的。
如果發生錯誤了,在scout log 裡有更多的信息。
Mac OS: ~/Library/Preferences/Adobe/Scout/1.0/logs 
  Windows: %HOMEDRIVE%%HOMEPATH%\AppData\Roaming\Adobe\Scout\1.0\logs 

沒有留言:

張貼留言