本申請(qǐng)屬于頁(yè)面數(shù)據(jù)處理技術(shù)領(lǐng)域，尤其涉及一種頁(yè)面著色器代碼調(diào)試方法、裝置。

背景技術(shù)：

隨著計(jì)算機(jī)技術(shù)的迅速發(fā)展和用戶(hù)需求的不斷提高，現(xiàn)在web端頁(yè)面3d顯示技術(shù)也越來(lái)越受到開(kāi)發(fā)人員的關(guān)注。

所述的web端通常是指包括pc、手機(jī)、平板等終端設(shè)備上的各種頁(yè)面瀏覽器，可以通過(guò)web端瀏覽網(wǎng)頁(yè)中的頁(yè)面。目前可以在web端實(shí)現(xiàn)各種3d頁(yè)面效果，可以豐富頁(yè)面展示內(nèi)容，提高展示效果。目前現(xiàn)有技術(shù)中在web端上進(jìn)行3d圖形的開(kāi)發(fā)需要使用webgl技術(shù)。webgl是一種3d繪圖標(biāo)準(zhǔn)，webgl可以為html5canvas提供硬件3d加速渲染，這樣web開(kāi)發(fā)人員就可以借助系統(tǒng)顯卡來(lái)在瀏覽器里更流暢地展示3d場(chǎng)景和模型了，還能創(chuàng)建復(fù)雜的導(dǎo)航和數(shù)據(jù)視覺(jué)化。在webgl技術(shù)中，提供了著色器，可以運(yùn)行webgl著色器支持的代碼(在此可以稱(chēng)為webgl著色器代碼)，用于實(shí)現(xiàn)各種3d效果。如使用webgl的開(kāi)發(fā)3d圖形時(shí)，需要編寫(xiě)著色器的代碼示例如下：

而webgl著色器代碼需要用字符串編寫(xiě)，開(kāi)發(fā)過(guò)程中這些代碼會(huì)裝載到gpu中執(zhí)行，所以無(wú)法對(duì)著色器代碼進(jìn)行調(diào)試。

顯然，由于web端頁(yè)面開(kāi)發(fā)過(guò)程中，無(wú)法對(duì)作業(yè)中的webgl著色器代碼進(jìn)行調(diào)試，降低了web端頁(yè)面開(kāi)發(fā)效率。

技術(shù)實(shí)現(xiàn)要素：

本申請(qǐng)目的在于提供一種頁(yè)面著色器代碼調(diào)試方法、裝置，提供了web端調(diào)試著色器的解決方案，可以大大提高著色器調(diào)試效率和3d頁(yè)面開(kāi)發(fā)效果，為3d開(kāi)發(fā)、vr/ar開(kāi)發(fā)提供有力的技術(shù)支持。

本申請(qǐng)?zhí)峁┑囊环N頁(yè)面著色器代碼調(diào)試方法、裝置是這樣實(shí)現(xiàn)的：

一種頁(yè)面著色器代碼調(diào)試方法，所述方法包括：

觸發(fā)頁(yè)面的著色器代碼調(diào)試時(shí)，加載原著色器的模擬著色器，所述模擬著色器被設(shè)置成采用預(yù)設(shè)編程設(shè)計(jì)語(yǔ)言并模擬原著色器的運(yùn)行環(huán)境編譯生成；

在所述模擬著色器中，對(duì)頁(yè)面的著色器代碼進(jìn)行調(diào)試；

將在所述模擬著色器中調(diào)試后的著色器代碼按照預(yù)設(shè)的轉(zhuǎn)換規(guī)則翻譯成所述原著色器對(duì)應(yīng)的字符串，并將所述字符串嵌入到所述原著色器中相應(yīng)的代碼位置。

一種頁(yè)面著色器調(diào)試裝置，所述裝置包括：

調(diào)試加載模塊，用于在觸發(fā)頁(yè)面的著色器代碼調(diào)試時(shí)，加載原著色器的模擬著色器，所述模擬著色器被設(shè)置成采用預(yù)設(shè)編程設(shè)計(jì)語(yǔ)言并模擬原著色器的運(yùn)行環(huán)境編譯生成；

調(diào)試處理模塊，用于在所述模擬著色器中，對(duì)頁(yè)面的著色器代碼進(jìn)行調(diào)試；

代碼轉(zhuǎn)換模塊，用于將在所述模擬著色器中調(diào)試后的著色器代碼按照預(yù)設(shè)的轉(zhuǎn)換規(guī)則翻譯成所述原著色器對(duì)應(yīng)的字符串，并將所述字符串嵌入到所述原著色器中相應(yīng)的代碼位置。

本申請(qǐng)?zhí)峁┑囊环N頁(yè)面著色器代碼調(diào)試方法、裝置，提供一種模擬著色器，編寫(xiě)模擬著色器的代碼可以使用例如可調(diào)試編程的js代碼，調(diào)試運(yùn)行時(shí)可以跟原著色器一起工作，然后在模擬著色器中進(jìn)行原著色器代碼的調(diào)試。在不進(jìn)行調(diào)試時(shí)可以將普通js代碼翻譯成原著色器的字符串，然后嵌入到原著色器對(duì)應(yīng)的代碼中。本申請(qǐng)?jiān)陧?yè)面著色器在web端調(diào)試時(shí)可以提供模擬著色器，作業(yè)人員可以在模擬著色器中行著色器代碼調(diào)試，然后可以將調(diào)試的內(nèi)容轉(zhuǎn)換成真正的webgl著色器字符串，嵌入到真正的webgl著色器代碼中運(yùn)行，實(shí)現(xiàn)原webgl著色器的調(diào)試。本申請(qǐng)解決了web端無(wú)法調(diào)試著色器的問(wèn)題，并且以性能換效果，可以顯著提高著色器調(diào)試效率，對(duì)未來(lái)web端進(jìn)行3d開(kāi)發(fā)、vr/ar開(kāi)發(fā)提供強(qiáng)有力的技術(shù)支持。

附圖說(shuō)明

為了更清楚地說(shuō)明本申請(qǐng)實(shí)施例或現(xiàn)有技術(shù)中的技術(shù)方案，下面將對(duì)實(shí)施例或現(xiàn)有技術(shù)描述中所需要使用的附圖作簡(jiǎn)單地介紹，顯而易見(jiàn)地，下面描述中的附圖僅僅是本申請(qǐng)中記載的一些實(shí)施例，對(duì)于本領(lǐng)域普通技術(shù)人員來(lái)講，在不付出創(chuàng)造性勞動(dòng)性的前提下，還可以根據(jù)這些附圖獲得其他的附圖。

圖1是本申請(qǐng)?zhí)峁┑囊环N頁(yè)面著色器代碼調(diào)試方法一種實(shí)施例的方法流程圖；

圖2是本申請(qǐng)采用js代碼編寫(xiě)模擬著色器時(shí)著色器之間的數(shù)據(jù)流向示意圖；

圖3是本申請(qǐng)?zhí)峁┑囊环N頁(yè)面著色器代碼調(diào)試方法的另一種實(shí)施的方法流程示意圖；

圖4是本申請(qǐng)?zhí)峁┑囊环N頁(yè)面著色器代碼調(diào)試方法另一種實(shí)施例的方法流程示意圖；

圖5是本申請(qǐng)?zhí)峁┑囊环N頁(yè)面著色器調(diào)試裝置一種實(shí)施例的模塊結(jié)構(gòu)示意圖；

圖6是本申請(qǐng)?zhí)峁┑囊环N頁(yè)面著色器調(diào)試裝置另一種實(shí)施例的模塊結(jié)構(gòu)示意圖；

圖7是本申請(qǐng)?zhí)峁┑囊环N頁(yè)面著色器調(diào)試裝置另一種實(shí)施例的模塊結(jié)構(gòu)示意圖；

圖8是利用本申請(qǐng)?zhí)峁┑姆椒ɑ蜓b置方案進(jìn)行頁(yè)面3d圖形繪制的一種實(shí)施框架示意圖。

具體實(shí)施方式

為了使本技術(shù)領(lǐng)域的人員更好地理解本申請(qǐng)中的技術(shù)方案，下面將結(jié)合本申請(qǐng)實(shí)施例中的附圖，對(duì)本申請(qǐng)實(shí)施例中的技術(shù)方案進(jìn)行清楚、完整地描述，顯然，所描述的實(shí)施例僅僅是本申請(qǐng)一部分實(shí)施例，而不是全部的實(shí)施例?；诒旧暾?qǐng)中的實(shí)施例，本領(lǐng)域普通技術(shù)人員在沒(méi)有作出創(chuàng)造性勞動(dòng)前提下所獲得的所有其他實(shí)施例，都應(yīng)當(dāng)屬于本申請(qǐng)保護(hù)的范圍。

圖1是本申請(qǐng)所述一種頁(yè)面著色器代碼調(diào)試方法一種實(shí)施例的方法流程圖。雖然本申請(qǐng)?zhí)峁┝巳缦率鰧?shí)施例或附圖所示的方法操作步驟或裝置結(jié)構(gòu)，但基于常規(guī)或者無(wú)需創(chuàng)造性的勞動(dòng)在所述方法或裝置中可以包括更多或者部分合并后更少的操作步驟或模塊單元。在邏輯性上不存在必要因果關(guān)系的步驟或結(jié)構(gòu)中，這些步驟的執(zhí)行順序或裝置的模塊結(jié)構(gòu)不限于本申請(qǐng)實(shí)施例或附圖所示的執(zhí)行順序或模塊結(jié)構(gòu)。所述的方法或模塊結(jié)構(gòu)的在實(shí)際中的裝置或終端產(chǎn)品應(yīng)用時(shí)，可以按照實(shí)施例或者附圖所示的方法或模塊結(jié)構(gòu)進(jìn)行順序執(zhí)行或者并行執(zhí)行(例如并行處理器或者多線(xiàn)程處理的環(huán)境、甚至包括分布式處理的實(shí)施環(huán)境)。

本申請(qǐng)為解決現(xiàn)有技術(shù)web端無(wú)法調(diào)試著色器的問(wèn)題提供的一種實(shí)施方案中，可以預(yù)先采用某種編程設(shè)計(jì)語(yǔ)言編寫(xiě)模擬著色器，該模擬著色器是按照頁(yè)面繪制3d圖像使用的原著色器的運(yùn)行環(huán)境模擬生成。所述的模擬著色器可以在web端著色器調(diào)試的過(guò)程中生成項(xiàng)目的時(shí)候編譯生成，在需要進(jìn)行頁(yè)面著色器代碼調(diào)試時(shí)可以加載運(yùn)行模擬著色器。本申請(qǐng)實(shí)施例的模擬著色器可以采用作業(yè)人員使用的可調(diào)試的頁(yè)面設(shè)計(jì)語(yǔ)言編寫(xiě)生成，因此可以在調(diào)試時(shí)運(yùn)行模擬的著色器，并可以在模擬著色器中對(duì)在原著色器中運(yùn)行的代碼進(jìn)行調(diào)試。具體的一種實(shí)施應(yīng)用場(chǎng)景如圖1所述，本申請(qǐng)?zhí)峁┑囊环N頁(yè)面著色器代碼調(diào)試方法的一種實(shí)施例可以包括：

s1：觸發(fā)頁(yè)面的著色器代碼調(diào)試時(shí)，加載原著色器的模擬著色器，所述模擬著色器被設(shè)置成采用預(yù)設(shè)編程設(shè)計(jì)語(yǔ)言并模擬原著色器的運(yùn)行環(huán)境編譯生成；

s2：在所述模擬著色器中，對(duì)頁(yè)面的著色器代碼進(jìn)行調(diào)試；

s3：將在所述模擬著色器中調(diào)試后的著色器代碼按照預(yù)設(shè)的轉(zhuǎn)換規(guī)則翻譯成所述原著色器對(duì)應(yīng)的字符串，并將所述字符串嵌入到所述原著色器中相應(yīng)的代碼位置。

所述的著色器，是一種在gpu(graphicsprocessingunit，gpu，圖像處理器)上運(yùn)行的程序，可以理解為運(yùn)行在顯卡中的指令和數(shù)據(jù)。一般頁(yè)面3d圖形開(kāi)發(fā)使用的著色器通常包括頂點(diǎn)著色器和片元著色器。頂點(diǎn)著色器主要的任務(wù)是接收三維空間中點(diǎn)的坐標(biāo)，將其處理為頁(yè)面二維空間中的坐標(biāo)并輸出；片元著色器的主要任務(wù)是對(duì)需要處理的屏幕上的每個(gè)像素輸出一個(gè)顏色值。頂點(diǎn)著色器主要是接收attribute變量和uniform變量。attribute變量存儲(chǔ)著關(guān)于點(diǎn)本身的數(shù)據(jù)，其主要是點(diǎn)的位置。uniform變量存儲(chǔ)的數(shù)據(jù)可以用于幫助著色器完成任務(wù)，換言之，著色器是需要uniform變量而通常并不處理他們。頂點(diǎn)著色器需要輸出varying變量給片元著色器。一般的，在在webgl著色器中，所述的attribute、uniform、varying主要是描述該變量在著色器中的作用。

本申請(qǐng)具體的采用webgl著色器進(jìn)行3d圖像開(kāi)發(fā)設(shè)計(jì)的實(shí)施例應(yīng)用場(chǎng)景中，所述的原著色器即為webgl著色器。所述的模擬著色器可以采用多種編程設(shè)計(jì)語(yǔ)言編寫(xiě)生成。由于webgl主要用于為html5canvas提供硬件3d加速渲染，這樣web開(kāi)發(fā)人員就可以借助系統(tǒng)顯卡來(lái)在瀏覽器里更流暢地展示3d場(chǎng)景和模型，并能創(chuàng)建復(fù)雜的導(dǎo)航和數(shù)據(jù)視覺(jué)化。因此，一種實(shí)施方式中所述模擬著色器可以采用js(javascript，js，一種腳本語(yǔ)言)代碼編寫(xiě)而成，主要用于頁(yè)面3d圖像調(diào)試處理。因此，本申請(qǐng)?zhí)峁┑囊环N實(shí)施例中，

s101：所述原著色器為webgl著色器，所述模擬著色器為采用js代碼編寫(xiě)生成。

圖2是本申請(qǐng)采用js代碼編寫(xiě)模擬著色器時(shí)著色器之間的數(shù)據(jù)流向示意圖。如圖2所示，本實(shí)施例應(yīng)用場(chǎng)景中，webgl繪制圖形時(shí)，采用兩種著色器：頂點(diǎn)著色器和片元著色器。如圖中所示，頂點(diǎn)著色器可以從緩存中讀取頂點(diǎn)信息，javascript代碼設(shè)置uniform變量和attribute變量。頂點(diǎn)著色器讀取attribute變量和uniform變量，輸出varying變量，輸出的varying變量可以自動(dòng)根據(jù)頂點(diǎn)進(jìn)行差值計(jì)算；片元著色器可以根據(jù)uniform變量和varying變量計(jì)算得到當(dāng)前點(diǎn)的顏色。

本申請(qǐng)實(shí)施例編寫(xiě)著色器使用javascript代碼時(shí)，可以預(yù)先制定一系列的轉(zhuǎn)換規(guī)則實(shí)現(xiàn)javascript代碼向原著色器字符串的轉(zhuǎn)換，可以兼容原先webgl和著色器的變量通信，實(shí)現(xiàn)varying變量的差值計(jì)算。具體的一個(gè)示例如下：

原著色器的代碼：

在本實(shí)施例中利用js編寫(xiě)的模擬著色器中的javascript代碼：

在模擬著色器中調(diào)試處理的著色器代碼可以按照之前預(yù)設(shè)的轉(zhuǎn)換規(guī)則翻譯生成頁(yè)面3d開(kāi)始時(shí)使用的原著色器對(duì)應(yīng)的字符串。具體的模擬著色器和原著色器之間代碼的轉(zhuǎn)換規(guī)則以及通信方式、函數(shù)加載調(diào)用等可以根據(jù)采用的預(yù)設(shè)編程設(shè)計(jì)語(yǔ)言和具體的應(yīng)用環(huán)境設(shè)計(jì)需要設(shè)置。本申請(qǐng)?zhí)峁┑囊环N頁(yè)面著色器代碼調(diào)試方法的一種實(shí)施例中，可以所述預(yù)設(shè)的轉(zhuǎn)換規(guī)則被設(shè)置成，可以包括：

s301：根據(jù)變量的前綴信息將調(diào)試后的著色器代碼翻譯成原著色器的字符串，變量之間的通信執(zhí)行和調(diào)用函數(shù)與原著色器相同。

本實(shí)施例應(yīng)用場(chǎng)景中，將在模擬著色器中調(diào)試的javascript代碼翻譯成webgl著色器代碼時(shí)，可以只需要根據(jù)變量的前綴進(jìn)行翻譯即可。例如：

varvec4_a_position翻譯成：attributevect4a_position

varvec4_v_color翻譯成varyingvec4v_color；

然后，在開(kāi)啟調(diào)試時(shí)，切換到本申請(qǐng)實(shí)施例編寫(xiě)的模擬的webgl環(huán)境(即模擬的著色器)，處理attribute變量和uniform變量的通信，如：

webgl環(huán)境：

vargl＝initcontext('webgl')；

debug環(huán)境：

vargl＝initcontext(‘debug’)；

attribute變量和uniform變量的通信方式和調(diào)用/加載函數(shù)不變：

varu_xformmatrix＝gl.getuniformlocation(gl.program,'u_xformmatrix')；

gl.uniformmatrix4fv(u_matrix,false,projmatrix.elements)；

在實(shí)際作業(yè)中，可以通過(guò)用戶(hù)的調(diào)用參數(shù)實(shí)現(xiàn)切換不同的代碼運(yùn)行環(huán)境，如對(duì)于作業(yè)人員編寫(xiě)完成的著色器代碼，可以將著色器代碼直接在本地編譯成webgl的代碼，在調(diào)試時(shí)根據(jù)傳遞調(diào)用的參數(shù)確定加載的是模擬著色器還是原webgl著色器來(lái)運(yùn)行著色器代碼。而上述所述環(huán)境切換的問(wèn)題，在一些計(jì)算機(jī)設(shè)計(jì)語(yǔ)言中可以一開(kāi)始在代碼中添加相應(yīng)的聲明描述。如本實(shí)施例應(yīng)用場(chǎng)景中，采用js代碼編寫(xiě)模擬著色器，在此可以定義為“debug環(huán)境”(調(diào)試環(huán)境)，如下代碼所示：

//webgl環(huán)境：

vargl＝initcontext('webgl')；

//debug環(huán)境：

vargl＝initcontext(‘debug’)；

在生成頁(yè)面調(diào)試業(yè)務(wù)項(xiàng)目的時(shí)候可以編譯生成2個(gè)文件，一個(gè)是js版本，一個(gè)是webgl版本?？梢愿鶕?jù)用戶(hù)切換的不同模式加載對(duì)應(yīng)的文件。因此，本申請(qǐng)?zhí)峁┑囊环N頁(yè)面著色器代碼調(diào)試方法的另一種實(shí)施中，在在觸發(fā)著色器代碼調(diào)試之前所述方法還可以包括：

s0：編譯生成原著色器的代碼文件和模擬著色器的代碼文件，所述原著色器的代碼文件和模擬著色器的代碼文件設(shè)置有對(duì)應(yīng)的啟動(dòng)調(diào)用參數(shù)；

相應(yīng)的，所述觸發(fā)頁(yè)面的著色器代碼調(diào)試時(shí)加載原著色器的模擬著色器包括根據(jù)傳入的啟動(dòng)調(diào)試參數(shù)確定加載原著色器的模擬著色器。

圖3是本申請(qǐng)?zhí)峁┑囊环N頁(yè)面著色器代碼調(diào)試方法的另一種實(shí)施的方法流程示意圖。具體的實(shí)施處理過(guò)程中，例如上述定義了“debug環(huán)境”(調(diào)試環(huán)境)的應(yīng)用場(chǎng)景中，當(dāng)用戶(hù)往initcontext函數(shù)內(nèi)部傳遞‘webgl’時(shí)調(diào)用的是瀏覽器生成wbgl對(duì)象。當(dāng)傳入的是‘debug’參數(shù)時(shí)，返回的是本申請(qǐng)編寫(xiě)的模擬著色器中的webgl對(duì)象。后面的圖像渲染處理過(guò)程則可以交給模擬著色器中的js代碼來(lái)處理。用戶(hù)可以根據(jù)模擬著色器的圖像結(jié)果調(diào)整參數(shù)，對(duì)頁(yè)面的著色器代碼進(jìn)行調(diào)試。當(dāng)然，利用本申請(qǐng)編寫(xiě)的模擬著色器中進(jìn)行webgl對(duì)象調(diào)試時(shí)的js代碼可以由cpu(centralprocessingunit，中央處理器)來(lái)處理。cpu調(diào)試后的著色器代碼再按照之前預(yù)設(shè)的轉(zhuǎn)換規(guī)則翻譯成gpu執(zhí)行所需的原著色器的字符串，并可以將這些調(diào)試后的著色器嵌入到所述原著色器相應(yīng)的代碼位置。具體的代碼位置也可以根據(jù)傳入的參數(shù)或者設(shè)置的調(diào)試節(jié)點(diǎn)等進(jìn)行確定。

進(jìn)一步的，通過(guò)在模擬著色器中進(jìn)行頁(yè)面的著色器代碼調(diào)試并轉(zhuǎn)換翻譯成原著色器需要的字符串后，可以將包括所述轉(zhuǎn)換后的原著色器對(duì)應(yīng)的字符串的著色器代碼加載到gpu中運(yùn)行。如通過(guò)參數(shù)調(diào)用在debug環(huán)境中進(jìn)行著色器代碼的調(diào)試，調(diào)試完成后，在webgl環(huán)境下可以自動(dòng)將這段js代碼翻譯成原著色器需要的字符串，然后將包括這些調(diào)試后字符串的原著色器代碼加載到gpu進(jìn)行運(yùn)行，查看調(diào)試后的頁(yè)面3d運(yùn)行效果。圖4是本申請(qǐng)?zhí)峁┑囊环N頁(yè)面著色器代碼調(diào)試方法另一種實(shí)施例的方法流程示意圖，如圖4所示，所述方法還可以包括：

s4：將所述原著色器中頁(yè)面的著色器代碼加載到圖形處理器中。

這樣，本申請(qǐng)實(shí)施例可以通過(guò)不同的傳入?yún)?shù)確定是啟動(dòng)編寫(xiě)的模擬的webgl環(huán)境還是原webgl運(yùn)行環(huán)境。當(dāng)需要調(diào)試時(shí)，可以在提供的模擬著色器中使用js代碼正常的對(duì)著色器代碼進(jìn)行調(diào)試。不進(jìn)行調(diào)試時(shí)將這些調(diào)試的js代碼翻譯成員著色器需要的字符串，并可以嵌入到真正的webgl代碼中，供gpu運(yùn)行。利用本申請(qǐng)實(shí)施例方案可以有效解決web端無(wú)法調(diào)試3d頁(yè)面處理時(shí)的著色器調(diào)試問(wèn)題，有效提高著色器調(diào)試效率和頁(yè)面開(kāi)發(fā)效果。

本申請(qǐng)?jiān)陧?yè)面著色器在web端調(diào)試時(shí)可以提供模擬著色器，作業(yè)人員可以在模擬著色器中進(jìn)行著色器代碼調(diào)試，然后可以將調(diào)試的內(nèi)容轉(zhuǎn)換成真正的webgl著色器字符串，嵌入到真正的webgl著色器代碼中運(yùn)行，實(shí)現(xiàn)原webgl著色器的調(diào)試。本申請(qǐng)解決了web端無(wú)法調(diào)試著色器的問(wèn)題，并且以性能換效果，可以顯著提高著色器調(diào)試效率，對(duì)未來(lái)web端進(jìn)行3d開(kāi)發(fā)、vr/ar開(kāi)發(fā)提供強(qiáng)有力的技術(shù)支持。

基于本申請(qǐng)所述的一種頁(yè)面著色器調(diào)試方法，本申請(qǐng)還提供一種頁(yè)面著色器調(diào)試裝置。所述的裝置可以包括采用在cpu一端可以進(jìn)行編輯調(diào)試的模擬著色器，以實(shí)現(xiàn)web上進(jìn)行3d圖形開(kāi)發(fā)時(shí)進(jìn)行webgl著色器代碼的調(diào)試。圖5是本申請(qǐng)?zhí)峁┑囊环N頁(yè)面著色器調(diào)試裝置一種實(shí)施例的模塊結(jié)構(gòu)示意圖，如圖5所示，所述裝置可以包括：

調(diào)試加載模塊101，可以用于在觸發(fā)頁(yè)面的著色器代碼調(diào)試時(shí)，加載原著色器的模擬著色器，所述模擬著色器被設(shè)置成采用預(yù)設(shè)編程設(shè)計(jì)語(yǔ)言并模擬原著色器的運(yùn)行環(huán)境編譯生成；

調(diào)試處理模塊102，可以用于在所述模擬著色器中，對(duì)頁(yè)面的著色器代碼進(jìn)行調(diào)試；

代碼轉(zhuǎn)換模塊103，可以用于將在所述模擬著色器中調(diào)試后的著色器代碼按照預(yù)設(shè)的轉(zhuǎn)換規(guī)則翻譯成所述原著色器對(duì)應(yīng)的字符串，并將所述字符串嵌入到所述原著色器中相應(yīng)的代碼位置。

本申請(qǐng)實(shí)施例提供一種頁(yè)面著色器代碼調(diào)試裝置，可以使用例如可調(diào)試編程的js代碼編寫(xiě)模擬著色器，調(diào)試運(yùn)行時(shí)可以跟原著色器一起工作，然后在模擬著色器中進(jìn)行原著色器代碼的調(diào)試。然后可可以將普通js代碼翻譯成原著色器的字符串，嵌入到原著色器對(duì)應(yīng)的代碼中，實(shí)現(xiàn)原webgl著色器的調(diào)試。本申請(qǐng)解決了web端無(wú)法調(diào)試著色器的問(wèn)題，并且以性能換效果，可以顯著提高著色器調(diào)試效果和調(diào)試效率，對(duì)未來(lái)web端進(jìn)行3d開(kāi)發(fā)、vr/ar開(kāi)發(fā)提供強(qiáng)有力的技術(shù)支持。

本申請(qǐng)中所述的原著色器主要是指在頁(yè)面開(kāi)發(fā)運(yùn)行過(guò)程中無(wú)法進(jìn)行代碼調(diào)試的著色器，而所述的模擬著色器則可以采用本地cpu可以直接編譯調(diào)試的編程設(shè)計(jì)語(yǔ)言編寫(xiě)而成。針對(duì)目標(biāo)主流的3d繪圖標(biāo)識(shí)webgl使用的著色器，本申請(qǐng)?zhí)峁┑囊环N實(shí)施例中，所述原著色器為webgl著色器，所述模擬著色器為采用js代碼編寫(xiě)生成。當(dāng)然，如前述方法實(shí)施例描述所述，本申請(qǐng)所述幢的另一種實(shí)施例中，所述預(yù)設(shè)的轉(zhuǎn)換規(guī)則可以包括：根據(jù)變量的前綴信息將調(diào)試后的著色器代碼翻譯成原著色器的字符串，變量之間的通信執(zhí)行和調(diào)用函數(shù)與原著色器相同。

在實(shí)際作業(yè)中，可以通過(guò)用戶(hù)的調(diào)用參數(shù)實(shí)現(xiàn)切換不同的代碼運(yùn)行環(huán)境，如對(duì)于作業(yè)人員編寫(xiě)完成的著色器代碼，可以將著色器代碼直接在本地編譯成webgl的代碼，在調(diào)試時(shí)根據(jù)傳遞調(diào)用的參數(shù)確定加載的是模擬著色器還是原webgl著色器來(lái)運(yùn)行著色器代碼。而上述所述環(huán)境切換的問(wèn)題，在一些計(jì)算機(jī)設(shè)計(jì)語(yǔ)言中可以一開(kāi)始在代碼中添加相應(yīng)的聲明描述。具體實(shí)施過(guò)程中，可以編譯生成2個(gè)文件，一個(gè)是js版本，一個(gè)是webgl版本?？梢愿鶕?jù)用戶(hù)切換的不同模式加載對(duì)應(yīng)的文件。圖6是本申請(qǐng)?zhí)峁┑囊环N頁(yè)面著色器調(diào)試裝置一種實(shí)施例的模塊結(jié)構(gòu)示意圖，如圖6所示，所述裝置還可以包括：

編譯模塊100，可以用于編譯生成原著色器的代碼文件和模擬著色器的代碼文件，所述原著色器的代碼文件和模擬著色器的代碼文件設(shè)置有對(duì)應(yīng)的啟動(dòng)調(diào)用參數(shù)；

相應(yīng)的，所述調(diào)試加載模塊101在觸發(fā)頁(yè)面的著色器代碼調(diào)試時(shí)加載原著色器的模擬著色器包括根據(jù)傳入的啟動(dòng)調(diào)試參數(shù)確定加載原著色器的模擬著色器。

進(jìn)一步的，通過(guò)在模擬著色器中進(jìn)行頁(yè)面的著色器代碼調(diào)試并轉(zhuǎn)換翻譯成原著色器需要的字符串后，可以將包括所述轉(zhuǎn)換后的原著色器對(duì)應(yīng)的字符串的著色器代碼加載到gpu中運(yùn)行。如通過(guò)參數(shù)調(diào)用在debug環(huán)境中進(jìn)行著色器代碼的調(diào)試，調(diào)試完成后，在webgl環(huán)境下可以自動(dòng)將這段js代碼翻譯成原著色器需要的字符串，然后將包括這些調(diào)試后字符串的原著色器代碼加載到gpu進(jìn)行運(yùn)行，查看調(diào)試后的頁(yè)面3d運(yùn)行效果。圖7是本申請(qǐng)?zhí)峁┑囊环N頁(yè)面著色器調(diào)試裝置一種實(shí)施例的模塊結(jié)構(gòu)示意圖，如圖7所示，所述裝置還可以包括：

代碼加載模塊104，可以用于將所述原著色器中頁(yè)面的著色器代碼加載到圖像處理器中運(yùn)行。

圖8是利用本申請(qǐng)?zhí)峁┑姆椒ɑ蜓b置方案進(jìn)行頁(yè)面3d圖形繪制的一種實(shí)施框架示意圖。如圖8所示，本申請(qǐng)實(shí)施例提供的頁(yè)面著色器代碼調(diào)試方法、裝置，可以提供使用例如可調(diào)試編程的js代碼的模擬著色器，調(diào)試運(yùn)行時(shí)可以跟原著色器一起工作，然后在模擬著色器中進(jìn)行原著色器代碼的調(diào)試。在不進(jìn)行調(diào)試時(shí)可以將普通js代碼翻譯成原著色器的字符串，然后嵌入到原著色器對(duì)應(yīng)的代碼中。本申請(qǐng)?jiān)陧?yè)面著色器在web端調(diào)試時(shí)可以提供模擬著色器，作業(yè)人員可以在模擬著色器中行著色器代碼調(diào)試，然后可以將調(diào)試的內(nèi)容轉(zhuǎn)換成真正的webgl著色器字符串，嵌入到真正的webgl著色器代碼中運(yùn)行，實(shí)現(xiàn)原webgl著色器的調(diào)試。本申請(qǐng)解決了web端無(wú)法調(diào)試著色器的問(wèn)題，并且以性能換效果，可以顯著提高著色器調(diào)試效率，對(duì)未來(lái)web端進(jìn)行3d開(kāi)發(fā)、vr/ar開(kāi)發(fā)提供強(qiáng)有力的技術(shù)支持。

盡管本申請(qǐng)內(nèi)容中提到采用js代碼編寫(xiě)模擬著色器、著色器各個(gè)變量之間的通信及數(shù)值計(jì)算、模擬著色器和原著色器之間代碼的轉(zhuǎn)換規(guī)則、參數(shù)調(diào)用方式等之類(lèi)的頁(yè)面設(shè)計(jì)語(yǔ)言、規(guī)則定義、消息交互等的描述，但是，本申請(qǐng)并不局限于必須是符合業(yè)內(nèi)標(biāo)準(zhǔn)頁(yè)面設(shè)計(jì)語(yǔ)言、消息傳遞、參數(shù)調(diào)用或?qū)嵤├枋龅那闆r。某些行業(yè)標(biāo)準(zhǔn)或者使用自定義方式或?qū)嵤├枋龅膶?shí)施基礎(chǔ)上略加修改后的實(shí)施方案也可以實(shí)現(xiàn)上述實(shí)施例相同、等同或相近、或變形后可預(yù)料的實(shí)施效果。應(yīng)用這些修改或變形后的判斷、處理方式等獲取的實(shí)施例，仍然可以屬于本申請(qǐng)的可選實(shí)施方案范圍之內(nèi)。

雖然本申請(qǐng)?zhí)峁┝巳鐚?shí)施例或流程圖所述的方法操作步驟，但基于常規(guī)或者無(wú)創(chuàng)造性的手段可以包括更多或者更少的操作步驟。實(shí)施例中列舉的步驟順序僅僅為眾多步驟執(zhí)行順序中的一種方式，不代表唯一的執(zhí)行順序。在實(shí)際中的裝置或終端產(chǎn)品執(zhí)行時(shí)，可以按照實(shí)施例或者附圖所示的方法順序執(zhí)行或者并行執(zhí)行(例如并行處理器或者多線(xiàn)程處理的環(huán)境，甚至為分布式數(shù)據(jù)處理環(huán)境)。術(shù)語(yǔ)“包括”、“包含”或者其任何其他變體意在涵蓋非排他性的包含，從而使得包括一系列要素的過(guò)程、方法、產(chǎn)品或者設(shè)備不僅包括那些要素，而且還包括沒(méi)有明確列出的其他要素，或者是還包括為這種過(guò)程、方法、產(chǎn)品或者設(shè)備所固有的要素。在沒(méi)有更多限制的情況下，并不排除在包括所述要素的過(guò)程、方法、產(chǎn)品或者設(shè)備中還存在另外的相同或等同要素。

上述實(shí)施例闡明的單元、裝置或模塊等，具體可以由計(jì)算機(jī)芯片或?qū)嶓w實(shí)現(xiàn)，或者由具有某種功能的產(chǎn)品來(lái)實(shí)現(xiàn)。為了描述的方便，描述以上裝置時(shí)以功能分為各種模塊分別描述。當(dāng)然，在實(shí)施本申請(qǐng)時(shí)可以把各模塊的功能在同一個(gè)或多個(gè)軟件和/或硬件中實(shí)現(xiàn)，也可以將實(shí)現(xiàn)同一功能的模塊由多個(gè)子模塊或子單元的組合實(shí)現(xiàn)等。以上所描述的裝置實(shí)施例僅僅是示意性的，例如，所述單元的劃分，僅僅為一種邏輯功能劃分，實(shí)際實(shí)現(xiàn)時(shí)可以有另外的劃分方式，例如多個(gè)單元或組件可以結(jié)合或者可以集成到另一個(gè)系統(tǒng)，或一些特征可以忽略，或不執(zhí)行。另一點(diǎn)，所顯示或討論的相互之間通信連接可以是通過(guò)一些接口，裝置或單元的間接耦合或通信連接，可以是電性，機(jī)械或其它的形式。

本領(lǐng)域技術(shù)人員也知道，除了以純計(jì)算機(jī)可讀程序代碼方式實(shí)現(xiàn)控制器以外，完全可以通過(guò)將方法步驟進(jìn)行邏輯編程來(lái)使得控制器以邏輯門(mén)、開(kāi)關(guān)、專(zhuān)用集成電路、可編程邏輯控制器和嵌入微控制器等的形式來(lái)實(shí)現(xiàn)相同功能。因此這種控制器可以被認(rèn)為是一種硬件部件，而對(duì)其內(nèi)部包括的用于實(shí)現(xiàn)各種功能的裝置也可以視為硬件部件內(nèi)的結(jié)構(gòu)?；蛘呱踔?，可以將用于實(shí)現(xiàn)各種功能的裝置視為既可以是實(shí)現(xiàn)方法的軟件模塊又可以是硬件部件內(nèi)的結(jié)構(gòu)。

本申請(qǐng)可以在由計(jì)算機(jī)執(zhí)行的計(jì)算機(jī)可執(zhí)行指令的一般上下文中描述，例如程序模塊。一般地，程序模塊包括執(zhí)行特定任務(wù)或?qū)崿F(xiàn)特定抽象數(shù)據(jù)類(lèi)型的例程、程序、對(duì)象、組件、數(shù)據(jù)結(jié)構(gòu)、類(lèi)等等。也可以在分布式計(jì)算環(huán)境中實(shí)踐本申請(qǐng)，在這些分布式計(jì)算環(huán)境中，由通過(guò)通信網(wǎng)絡(luò)而被連接的遠(yuǎn)程處理設(shè)備來(lái)執(zhí)行任務(wù)。在分布式計(jì)算環(huán)境中，程序模塊可以位于包括存儲(chǔ)設(shè)備在內(nèi)的本地和遠(yuǎn)程計(jì)算機(jī)存儲(chǔ)介質(zhì)中。

通過(guò)以上的實(shí)施方式的描述可知，本領(lǐng)域的技術(shù)人員可以清楚地了解到本申請(qǐng)可借助軟件加必需的通用硬件平臺(tái)的方式來(lái)實(shí)現(xiàn)?；谶@樣的理解，本申請(qǐng)的技術(shù)方案本質(zhì)上或者說(shuō)對(duì)現(xiàn)有技術(shù)做出貢獻(xiàn)的部分可以以軟件產(chǎn)品的形式體現(xiàn)出來(lái)，該計(jì)算機(jī)軟件產(chǎn)品可以存儲(chǔ)在存儲(chǔ)介質(zhì)中，如rom/ram、磁碟、光盤(pán)等，包括若干指令用以使得一臺(tái)計(jì)算機(jī)設(shè)備(可以是個(gè)人計(jì)算機(jī)，移動(dòng)終端，服務(wù)器，或者網(wǎng)絡(luò)設(shè)備等)執(zhí)行本申請(qǐng)各個(gè)實(shí)施例或者實(shí)施例的某些部分所述的方法。

本說(shuō)明書(shū)中的各個(gè)實(shí)施例采用遞進(jìn)的方式描述，各個(gè)實(shí)施例之間相同或相似的部分互相參見(jiàn)即可，每個(gè)實(shí)施例重點(diǎn)說(shuō)明的都是與其他實(shí)施例的不同之處。本申請(qǐng)可用于眾多通用或?qū)Ｓ玫挠?jì)算機(jī)系統(tǒng)環(huán)境或配置中。例如：個(gè)人計(jì)算機(jī)、服務(wù)器計(jì)算機(jī)、手持設(shè)備或便攜式設(shè)備、平板型設(shè)備、多處理器系統(tǒng)、基于微處理器的系統(tǒng)、置頂盒、可編程的電子設(shè)備、網(wǎng)絡(luò)pc、小型計(jì)算機(jī)、大型計(jì)算機(jī)、包括以上任何系統(tǒng)或設(shè)備的分布式計(jì)算環(huán)境等等。

雖然通過(guò)實(shí)施例描繪了本申請(qǐng)，本領(lǐng)域普通技術(shù)人員知道，本申請(qǐng)有許多變形和變化而不脫離本申請(qǐng)的精神，希望所附的權(quán)利要求包括這些變形和變化而不脫離本申請(qǐng)的精神。