一種頁面著色器代碼調試方法、裝置與流程
2023-12-10 15:15:32 1
本申請屬於頁面數據處理技術領域，尤其涉及一種頁面著色器代碼調試方法、裝置。
背景技術：
隨著計算機技術的迅速發展和用戶需求的不斷提高，現在web端頁面3d顯示技術也越來越受到開發人員的關注。
所述的web端通常是指包括pc、手機、平板等終端設備上的各種頁面瀏覽器，可以通過web端瀏覽網頁中的頁面。目前可以在web端實現各種3d頁面效果，可以豐富頁面展示內容，提高展示效果。目前現有技術中在web端上進行3d圖形的開發需要使用webgl技術。webgl是一種3d繪圖標準，webgl可以為html5canvas提供硬體3d加速渲染，這樣web開發人員就可以藉助系統顯卡來在瀏覽器裡更流暢地展示3d場景和模型了，還能創建複雜的導航和數據視覺化。在webgl技術中，提供了著色器，可以運行webgl著色器支持的代碼(在此可以稱為webgl著色器代碼)，用於實現各種3d效果。如使用webgl的開發3d圖形時，需要編寫著色器的代碼示例如下：
而webgl著色器代碼需要用字符串編寫，開發過程中這些代碼會裝載到gpu中執行，所以無法對著色器代碼進行調試。
顯然，由於web端頁面開發過程中，無法對作業中的webgl著色器代碼進行調試，降低了web端頁面開發效率。
技術實現要素：
本申請目的在於提供一種頁面著色器代碼調試方法、裝置，提供了web端調試著色器的解決方案，可以大大提高著色器調試效率和3d頁面開發效果，為3d開發、vr/ar開發提供有力的技術支持。
本申請提供的一種頁面著色器代碼調試方法、裝置是這樣實現的：
一種頁面著色器代碼調試方法，所述方法包括：
觸發頁面的著色器代碼調試時，加載原著色器的模擬著色器，所述模擬著色器被設置成採用預設編程設計語言並模擬原著色器的運行環境編譯生成；
在所述模擬著色器中，對頁面的著色器代碼進行調試；
將在所述模擬著色器中調試後的著色器代碼按照預設的轉換規則翻譯成所述原著色器對應的字符串，並將所述字符串嵌入到所述原著色器中相應的代碼位置。
一種頁面著色器調試裝置，所述裝置包括：
調試加載模塊，用於在觸發頁面的著色器代碼調試時，加載原著色器的模擬著色器，所述模擬著色器被設置成採用預設編程設計語言並模擬原著色器的運行環境編譯生成；
調試處理模塊，用於在所述模擬著色器中，對頁面的著色器代碼進行調試；
代碼轉換模塊，用於將在所述模擬著色器中調試後的著色器代碼按照預設的轉換規則翻譯成所述原著色器對應的字符串，並將所述字符串嵌入到所述原著色器中相應的代碼位置。
本申請提供的一種頁面著色器代碼調試方法、裝置，提供一種模擬著色器，編寫模擬著色器的代碼可以使用例如可調試編程的js代碼，調試運行時可以跟原著色器一起工作，然後在模擬著色器中進行原著色器代碼的調試。在不進行調試時可以將普通js代碼翻譯成原著色器的字符串，然後嵌入到原著色器對應的代碼中。本申請在頁面著色器在web端調試時可以提供模擬著色器，作業人員可以在模擬著色器中行著色器代碼調試，然後可以將調試的內容轉換成真正的webgl著色器字符串，嵌入到真正的webgl著色器代碼中運行，實現原webgl著色器的調試。本申請解決了web端無法調試著色器的問題，並且以性能換效果，可以顯著提高著色器調試效率，對未來web端進行3d開發、vr/ar開發提供強有力的技術支持。
附圖說明
為了更清楚地說明本申請實施例或現有技術中的技術方案，下面將對實施例或現有技術描述中所需要使用的附圖作簡單地介紹，顯而易見地，下面描述中的附圖僅僅是本申請中記載的一些實施例，對於本領域普通技術人員來講，在不付出創造性勞動性的前提下，還可以根據這些附圖獲得其他的附圖。
圖1是本申請提供的一種頁面著色器代碼調試方法一種實施例的方法流程圖；
圖2是本申請採用js代碼編寫模擬著色器時著色器之間的數據流向示意圖；
圖3是本申請提供的一種頁面著色器代碼調試方法的另一種實施的方法流程示意圖；
圖4是本申請提供的一種頁面著色器代碼調試方法另一種實施例的方法流程示意圖；
圖5是本申請提供的一種頁面著色器調試裝置一種實施例的模塊結構示意圖；
圖6是本申請提供的一種頁面著色器調試裝置另一種實施例的模塊結構示意圖；
圖7是本申請提供的一種頁面著色器調試裝置另一種實施例的模塊結構示意圖；
圖8是利用本申請提供的方法或裝置方案進行頁面3d圖形繪製的一種實施框架示意圖。
具體實施方式
為了使本技術領域的人員更好地理解本申請中的技術方案，下面將結合本申請實施例中的附圖，對本申請實施例中的技術方案進行清楚、完整地描述，顯然，所描述的實施例僅僅是本申請一部分實施例，而不是全部的實施例。基於本申請中的實施例，本領域普通技術人員在沒有作出創造性勞動前提下所獲得的所有其他實施例，都應當屬於本申請保護的範圍。
圖1是本申請所述一種頁面著色器代碼調試方法一種實施例的方法流程圖。雖然本申請提供了如下述實施例或附圖所示的方法操作步驟或裝置結構，但基於常規或者無需創造性的勞動在所述方法或裝置中可以包括更多或者部分合併後更少的操作步驟或模塊單元。在邏輯性上不存在必要因果關係的步驟或結構中，這些步驟的執行順序或裝置的模塊結構不限於本申請實施例或附圖所示的執行順序或模塊結構。所述的方法或模塊結構的在實際中的裝置或終端產品應用時，可以按照實施例或者附圖所示的方法或模塊結構進行順序執行或者並行執行(例如並行處理器或者多線程處理的環境、甚至包括分布式處理的實施環境)。
本申請為解決現有技術web端無法調試著色器的問題提供的一種實施方案中，可以預先採用某種編程設計語言編寫模擬著色器，該模擬著色器是按照頁面繪製3d圖像使用的原著色器的運行環境模擬生成。所述的模擬著色器可以在web端著色器調試的過程中生成項目的時候編譯生成，在需要進行頁面著色器代碼調試時可以加載運行模擬著色器。本申請實施例的模擬著色器可以採用作業人員使用的可調試的頁面設計語言編寫生成，因此可以在調試時運行模擬的著色器，並可以在模擬著色器中對在原著色器中運行的代碼進行調試。具體的一種實施應用場景如圖1所述，本申請提供的一種頁面著色器代碼調試方法的一種實施例可以包括：
s1：觸發頁面的著色器代碼調試時，加載原著色器的模擬著色器，所述模擬著色器被設置成採用預設編程設計語言並模擬原著色器的運行環境編譯生成；
s2：在所述模擬著色器中，對頁面的著色器代碼進行調試；
s3：將在所述模擬著色器中調試後的著色器代碼按照預設的轉換規則翻譯成所述原著色器對應的字符串，並將所述字符串嵌入到所述原著色器中相應的代碼位置。
所述的著色器，是一種在gpu(graphicsprocessingunit，gpu，圖像處理器)上運行的程序，可以理解為運行在顯卡中的指令和數據。一般頁面3d圖形開發使用的著色器通常包括頂點著色器和片元著色器。頂點著色器主要的任務是接收三維空間中點的坐標，將其處理為頁面二維空間中的坐標並輸出；片元著色器的主要任務是對需要處理的屏幕上的每個像素輸出一個顏色值。頂點著色器主要是接收attribute變量和uniform變量。attribute變量存儲著關於點本身的數據，其主要是點的位置。uniform變量存儲的數據可以用於幫助著色器完成任務，換言之，著色器是需要uniform變量而通常並不處理他們。頂點著色器需要輸出varying變量給片元著色器。一般的，在在webgl著色器中，所述的attribute、uniform、varying主要是描述該變量在著色器中的作用。
本申請具體的採用webgl著色器進行3d圖像開發設計的實施例應用場景中，所述的原著色器即為webgl著色器。所述的模擬著色器可以採用多種編程設計語言編寫生成。由於webgl主要用於為html5canvas提供硬體3d加速渲染，這樣web開發人員就可以藉助系統顯卡來在瀏覽器裡更流暢地展示3d場景和模型，並能創建複雜的導航和數據視覺化。因此，一種實施方式中所述模擬著色器可以採用js(javascript，js，一種腳本語言)代碼編寫而成，主要用於頁面3d圖像調試處理。因此，本申請提供的一種實施例中，
s101：所述原著色器為webgl著色器，所述模擬著色器為採用js代碼編寫生成。
圖2是本申請採用js代碼編寫模擬著色器時著色器之間的數據流向示意圖。如圖2所示，本實施例應用場景中，webgl繪製圖形時，採用兩種著色器：頂點著色器和片元著色器。如圖中所示，頂點著色器可以從緩存中讀取頂點信息，javascript代碼設置uniform變量和attribute變量。頂點著色器讀取attribute變量和uniform變量，輸出varying變量，輸出的varying變量可以自動根據頂點進行差值計算；片元著色器可以根據uniform變量和varying變量計算得到當前點的顏色。
本申請實施例編寫著色器使用javascript代碼時，可以預先制定一系列的轉換規則實現javascript代碼向原著色器字符串的轉換，可以兼容原先webgl和著色器的變量通信，實現varying變量的差值計算。具體的一個示例如下：
原著色器的代碼：
在本實施例中利用js編寫的模擬著色器中的javascript代碼：
在模擬著色器中調試處理的著色器代碼可以按照之前預設的轉換規則翻譯生成頁面3d開始時使用的原著色器對應的字符串。具體的模擬著色器和原著色器之間代碼的轉換規則以及通信方式、函數加載調用等可以根據採用的預設編程設計語言和具體的應用環境設計需要設置。本申請提供的一種頁面著色器代碼調試方法的一種實施例中，可以所述預設的轉換規則被設置成，可以包括：
s301：根據變量的前綴信息將調試後的著色器代碼翻譯成原著色器的字符串，變量之間的通信執行和調用函數與原著色器相同。
本實施例應用場景中，將在模擬著色器中調試的javascript代碼翻譯成webgl著色器代碼時，可以只需要根據變量的前綴進行翻譯即可。例如：
varvec4_a_position翻譯成：attributevect4a_position
varvec4_v_color翻譯成varyingvec4v_color；
然後，在開啟調試時，切換到本申請實施例編寫的模擬的webgl環境(即模擬的著色器)，處理attribute變量和uniform變量的通信，如：
webgl環境：
vargl＝initcontext('webgl')；
debug環境：
vargl＝initcontext(『debug』)；
attribute變量和uniform變量的通信方式和調用/加載函數不變：
varu_xformmatrix＝gl.getuniformlocation(gl.program,'u_xformmatrix')；
gl.uniformmatrix4fv(u_matrix,false,projmatrix.elements)；
在實際作業中，可以通過用戶的調用參數實現切換不同的代碼運行環境，如對於作業人員編寫完成的著色器代碼，可以將著色器代碼直接在本地編譯成webgl的代碼，在調試時根據傳遞調用的參數確定加載的是模擬著色器還是原webgl著色器來運行著色器代碼。而上述所述環境切換的問題，在一些計算機設計語言中可以一開始在代碼中添加相應的聲明描述。如本實施例應用場景中，採用js代碼編寫模擬著色器，在此可以定義為「debug環境」(調試環境)，如下代碼所示：
//webgl環境：
vargl＝initcontext('webgl')；
//debug環境：
vargl＝initcontext(『debug』)；
在生成頁面調試業務項目的時候可以編譯生成2個文件，一個是js版本，一個是webgl版本。可以根據用戶切換的不同模式加載對應的文件。因此，本申請提供的一種頁面著色器代碼調試方法的另一種實施中，在在觸發著色器代碼調試之前所述方法還可以包括：
s0：編譯生成原著色器的代碼文件和模擬著色器的代碼文件，所述原著色器的代碼文件和模擬著色器的代碼文件設置有對應的啟動調用參數；
相應的，所述觸發頁面的著色器代碼調試時加載原著色器的模擬著色器包括根據傳入的啟動調試參數確定加載原著色器的模擬著色器。
圖3是本申請提供的一種頁面著色器代碼調試方法的另一種實施的方法流程示意圖。具體的實施處理過程中，例如上述定義了「debug環境」(調試環境)的應用場景中，當用戶往initcontext函數內部傳遞『webgl』時調用的是瀏覽器生成wbgl對象。當傳入的是『debug』參數時，返回的是本申請編寫的模擬著色器中的webgl對象。後面的圖像渲染處理過程則可以交給模擬著色器中的js代碼來處理。用戶可以根據模擬著色器的圖像結果調整參數，對頁面的著色器代碼進行調試。當然，利用本申請編寫的模擬著色器中進行webgl對象調試時的js代碼可以由cpu(centralprocessingunit，中央處理器)來處理。cpu調試後的著色器代碼再按照之前預設的轉換規則翻譯成gpu執行所需的原著色器的字符串，並可以將這些調試後的著色器嵌入到所述原著色器相應的代碼位置。具體的代碼位置也可以根據傳入的參數或者設置的調試節點等進行確定。
進一步的，通過在模擬著色器中進行頁面的著色器代碼調試並轉換翻譯成原著色器需要的字符串後，可以將包括所述轉換後的原著色器對應的字符串的著色器代碼加載到gpu中運行。如通過參數調用在debug環境中進行著色器代碼的調試，調試完成後，在webgl環境下可以自動將這段js代碼翻譯成原著色器需要的字符串，然後將包括這些調試後字符串的原著色器代碼加載到gpu進行運行，查看調試後的頁面3d運行效果。圖4是本申請提供的一種頁面著色器代碼調試方法另一種實施例的方法流程示意圖，如圖4所示，所述方法還可以包括：
s4：將所述原著色器中頁面的著色器代碼加載到圖形處理器中。
這樣，本申請實施例可以通過不同的傳入參數確定是啟動編寫的模擬的webgl環境還是原webgl運行環境。當需要調試時，可以在提供的模擬著色器中使用js代碼正常的對著色器代碼進行調試。不進行調試時將這些調試的js代碼翻譯成員著色器需要的字符串，並可以嵌入到真正的webgl代碼中，供gpu運行。利用本申請實施例方案可以有效解決web端無法調試3d頁面處理時的著色器調試問題，有效提高著色器調試效率和頁面開發效果。
本申請在頁面著色器在web端調試時可以提供模擬著色器，作業人員可以在模擬著色器中進行著色器代碼調試，然後可以將調試的內容轉換成真正的webgl著色器字符串，嵌入到真正的webgl著色器代碼中運行，實現原webgl著色器的調試。本申請解決了web端無法調試著色器的問題，並且以性能換效果，可以顯著提高著色器調試效率，對未來web端進行3d開發、vr/ar開發提供強有力的技術支持。
基於本申請所述的一種頁面著色器調試方法，本申請還提供一種頁面著色器調試裝置。所述的裝置可以包括採用在cpu一端可以進行編輯調試的模擬著色器，以實現web上進行3d圖形開發時進行webgl著色器代碼的調試。圖5是本申請提供的一種頁面著色器調試裝置一種實施例的模塊結構示意圖，如圖5所示，所述裝置可以包括：
調試加載模塊101，可以用於在觸發頁面的著色器代碼調試時，加載原著色器的模擬著色器，所述模擬著色器被設置成採用預設編程設計語言並模擬原著色器的運行環境編譯生成；
調試處理模塊102，可以用於在所述模擬著色器中，對頁面的著色器代碼進行調試；
代碼轉換模塊103，可以用於將在所述模擬著色器中調試後的著色器代碼按照預設的轉換規則翻譯成所述原著色器對應的字符串，並將所述字符串嵌入到所述原著色器中相應的代碼位置。
本申請實施例提供一種頁面著色器代碼調試裝置，可以使用例如可調試編程的js代碼編寫模擬著色器，調試運行時可以跟原著色器一起工作，然後在模擬著色器中進行原著色器代碼的調試。然後可可以將普通js代碼翻譯成原著色器的字符串，嵌入到原著色器對應的代碼中，實現原webgl著色器的調試。本申請解決了web端無法調試著色器的問題，並且以性能換效果，可以顯著提高著色器調試效果和調試效率，對未來web端進行3d開發、vr/ar開發提供強有力的技術支持。
本申請中所述的原著色器主要是指在頁面開發運行過程中無法進行代碼調試的著色器，而所述的模擬著色器則可以採用本地cpu可以直接編譯調試的編程設計語言編寫而成。針對目標主流的3d繪圖標識webgl使用的著色器，本申請提供的一種實施例中，所述原著色器為webgl著色器，所述模擬著色器為採用js代碼編寫生成。當然，如前述方法實施例描述所述，本申請所述幢的另一種實施例中，所述預設的轉換規則可以包括：根據變量的前綴信息將調試後的著色器代碼翻譯成原著色器的字符串，變量之間的通信執行和調用函數與原著色器相同。
在實際作業中，可以通過用戶的調用參數實現切換不同的代碼運行環境，如對於作業人員編寫完成的著色器代碼，可以將著色器代碼直接在本地編譯成webgl的代碼，在調試時根據傳遞調用的參數確定加載的是模擬著色器還是原webgl著色器來運行著色器代碼。而上述所述環境切換的問題，在一些計算機設計語言中可以一開始在代碼中添加相應的聲明描述。具體實施過程中，可以編譯生成2個文件，一個是js版本，一個是webgl版本。可以根據用戶切換的不同模式加載對應的文件。圖6是本申請提供的一種頁面著色器調試裝置一種實施例的模塊結構示意圖，如圖6所示，所述裝置還可以包括：
編譯模塊100，可以用於編譯生成原著色器的代碼文件和模擬著色器的代碼文件，所述原著色器的代碼文件和模擬著色器的代碼文件設置有對應的啟動調用參數；
相應的，所述調試加載模塊101在觸發頁面的著色器代碼調試時加載原著色器的模擬著色器包括根據傳入的啟動調試參數確定加載原著色器的模擬著色器。
進一步的，通過在模擬著色器中進行頁面的著色器代碼調試並轉換翻譯成原著色器需要的字符串後，可以將包括所述轉換後的原著色器對應的字符串的著色器代碼加載到gpu中運行。如通過參數調用在debug環境中進行著色器代碼的調試，調試完成後，在webgl環境下可以自動將這段js代碼翻譯成原著色器需要的字符串，然後將包括這些調試後字符串的原著色器代碼加載到gpu進行運行，查看調試後的頁面3d運行效果。圖7是本申請提供的一種頁面著色器調試裝置一種實施例的模塊結構示意圖，如圖7所示，所述裝置還可以包括：
代碼加載模塊104，可以用於將所述原著色器中頁面的著色器代碼加載到圖像處理器中運行。
圖8是利用本申請提供的方法或裝置方案進行頁面3d圖形繪製的一種實施框架示意圖。如圖8所示，本申請實施例提供的頁面著色器代碼調試方法、裝置，可以提供使用例如可調試編程的js代碼的模擬著色器，調試運行時可以跟原著色器一起工作，然後在模擬著色器中進行原著色器代碼的調試。在不進行調試時可以將普通js代碼翻譯成原著色器的字符串，然後嵌入到原著色器對應的代碼中。本申請在頁面著色器在web端調試時可以提供模擬著色器，作業人員可以在模擬著色器中行著色器代碼調試，然後可以將調試的內容轉換成真正的webgl著色器字符串，嵌入到真正的webgl著色器代碼中運行，實現原webgl著色器的調試。本申請解決了web端無法調試著色器的問題，並且以性能換效果，可以顯著提高著色器調試效率，對未來web端進行3d開發、vr/ar開發提供強有力的技術支持。
儘管本申請內容中提到採用js代碼編寫模擬著色器、著色器各個變量之間的通信及數值計算、模擬著色器和原著色器之間代碼的轉換規則、參數調用方式等之類的頁面設計語言、規則定義、消息交互等的描述，但是，本申請並不局限於必須是符合業內標準頁面設計語言、消息傳遞、參數調用或實施例所描述的情況。某些行業標準或者使用自定義方式或實施例描述的實施基礎上略加修改後的實施方案也可以實現上述實施例相同、等同或相近、或變形後可預料的實施效果。應用這些修改或變形後的判斷、處理方式等獲取的實施例，仍然可以屬於本申請的可選實施方案範圍之內。
雖然本申請提供了如實施例或流程圖所述的方法操作步驟，但基於常規或者無創造性的手段可以包括更多或者更少的操作步驟。實施例中列舉的步驟順序僅僅為眾多步驟執行順序中的一種方式，不代表唯一的執行順序。在實際中的裝置或終端產品執行時，可以按照實施例或者附圖所示的方法順序執行或者並行執行(例如並行處理器或者多線程處理的環境，甚至為分布式數據處理環境)。術語「包括」、「包含」或者其任何其他變體意在涵蓋非排他性的包含，從而使得包括一系列要素的過程、方法、產品或者設備不僅包括那些要素，而且還包括沒有明確列出的其他要素，或者是還包括為這種過程、方法、產品或者設備所固有的要素。在沒有更多限制的情況下，並不排除在包括所述要素的過程、方法、產品或者設備中還存在另外的相同或等同要素。
上述實施例闡明的單元、裝置或模塊等，具體可以由計算機晶片或實體實現，或者由具有某種功能的產品來實現。為了描述的方便，描述以上裝置時以功能分為各種模塊分別描述。當然，在實施本申請時可以把各模塊的功能在同一個或多個軟體和/或硬體中實現，也可以將實現同一功能的模塊由多個子模塊或子單元的組合實現等。以上所描述的裝置實施例僅僅是示意性的，例如，所述單元的劃分，僅僅為一種邏輯功能劃分，實際實現時可以有另外的劃分方式，例如多個單元或組件可以結合或者可以集成到另一個系統，或一些特徵可以忽略，或不執行。另一點，所顯示或討論的相互之間通信連接可以是通過一些接口，裝置或單元的間接耦合或通信連接，可以是電性，機械或其它的形式。
本領域技術人員也知道，除了以純計算機可讀程序代碼方式實現控制器以外，完全可以通過將方法步驟進行邏輯編程來使得控制器以邏輯門、開關、專用集成電路、可編程邏輯控制器和嵌入微控制器等的形式來實現相同功能。因此這種控制器可以被認為是一種硬體部件，而對其內部包括的用於實現各種功能的裝置也可以視為硬體部件內的結構。或者甚至，可以將用於實現各種功能的裝置視為既可以是實現方法的軟體模塊又可以是硬體部件內的結構。
本申請可以在由計算機執行的計算機可執行指令的一般上下文中描述，例如程序模塊。一般地，程序模塊包括執行特定任務或實現特定抽象數據類型的例程、程序、對象、組件、數據結構、類等等。也可以在分布式計算環境中實踐本申請，在這些分布式計算環境中，由通過通信網絡而被連接的遠程處理設備來執行任務。在分布式計算環境中，程序模塊可以位於包括存儲設備在內的本地和遠程計算機存儲介質中。
通過以上的實施方式的描述可知，本領域的技術人員可以清楚地了解到本申請可藉助軟體加必需的通用硬體平臺的方式來實現。基於這樣的理解，本申請的技術方案本質上或者說對現有技術做出貢獻的部分可以以軟體產品的形式體現出來，該計算機軟體產品可以存儲在存儲介質中，如rom/ram、磁碟、光碟等，包括若干指令用以使得一臺計算機設備(可以是個人計算機，移動終端，伺服器，或者網絡設備等)執行本申請各個實施例或者實施例的某些部分所述的方法。
本說明書中的各個實施例採用遞進的方式描述，各個實施例之間相同或相似的部分互相參見即可，每個實施例重點說明的都是與其他實施例的不同之處。本申請可用於眾多通用或專用的計算機系統環境或配置中。例如：個人計算機、伺服器計算機、手持設備或可攜式設備、平板型設備、多處理器系統、基於微處理器的系統、置頂盒、可編程的電子設備、網絡pc、小型計算機、大型計算機、包括以上任何系統或設備的分布式計算環境等等。
雖然通過實施例描繪了本申請，本領域普通技術人員知道，本申請有許多變形和變化而不脫離本申請的精神，希望所附的權利要求包括這些變形和變化而不脫離本申請的精神。