基于html5的web3d圖形引擎生成方法
【專利摘要】本發(fā)明涉及一種基于HTML5的WEB3D圖形引擎生成方法，該方法包括以下步驟：1)生成模型對象。2)給全局變量賦值，并初始化程序庫。3)創(chuàng)建場景容器以管理3D模型對象。4)創(chuàng)建渲染圖型并建立透視比例和視野轉(zhuǎn)換。5)創(chuàng)建一個(gè)效果，載入著色信息。6)創(chuàng)建材質(zhì)和形狀，設(shè)置材質(zhì)繪制列表，并且設(shè)置其他材質(zhì)參數(shù)。7)將變換值和形狀值加入到變換圖表中。8)為對象原型創(chuàng)建繪制元素，設(shè)置回調(diào)函數(shù)，在3D場景每次被渲染時(shí)執(zhí)行特定的任務(wù)。該系統(tǒng)包括程序模塊、工具模塊、圖形接口模塊、圖形引擎模塊、Direct3D渲染模塊、OpenGL渲染模塊、GPU圖形處理模塊、顯示模塊。
【專利說明】基于HTML5的WEB3D圖形引擎生成方法
【技術(shù)領(lǐng)域】
[0001]本發(fā)明涉及一種計(jì)算機(jī)圖形學(xué)領(lǐng)域，尤其是涉及一種基于HTML5的WEB3D圖形引擎生成方法
【背景技術(shù)】
[0002]虛擬展示技術(shù)，通常被用于商品網(wǎng)絡(luò)化三維展示，也有部分小場景虛擬仿真項(xiàng)目采用Web3D進(jìn)行制作。3D技術(shù)并不是一個(gè)新話題，它在圖形工作站以至于Pc上的應(yīng)用早已瓜熟蒂落。然而互聯(lián)網(wǎng)的出現(xiàn)，卻給3D圖形技術(shù)注入了新的活力，一些微妙而深刻的變化正在進(jìn)行中。Web3D”這一新詞的出現(xiàn)就反映了這種變化的全貌。沒有人嚴(yán)格定義Web3D，但我們可以把它理解為互聯(lián)網(wǎng)上的3D圖形技術(shù)。
[0003]目前，國內(nèi)外 Web3D 的主流技術(shù)主要有 VRML、X3D、Viewpoint、Shockwave3D、Java3D等，其中又以Java3D結(jié)合vRML的組合方式為主。
[0004]VRMIL是3D圖形和多媒體技術(shù)通用的交換文件的格式，它描述交互式的3D對象和場景的幾何對象的尺寸和形狀、色彩、材質(zhì)、燈光、動畫及其交互性。它不僅應(yīng)用在互聯(lián)網(wǎng)上，也可以用在本地客戶系統(tǒng)中，其應(yīng)用范圍極廣。1996年，VRML1.0發(fā)布，1997年，VRML 97誕生。VRML97的重大革新是:在網(wǎng)絡(luò)上傳輸?shù)氖悄Ｐ臀募?，而不是媒體文件(如圖片等)，故其傳輸量大大減小，可使任何一個(gè)3D開發(fā)者都能制作可在互聯(lián)網(wǎng)上實(shí)時(shí)渲染的3D場景模型。然而VRML自身也有一些局限性，其一是客戶端通過Internet獲取的3D場景其實(shí)可以看到其原代碼，這對商業(yè)化的應(yīng)用可謂致命傷；其二 VRML僅支持通過瀏覽器來進(jìn)行視圖導(dǎo)航、視點(diǎn)轉(zhuǎn)換等，而限制鍵盤輸入.在1997年之后，VRML在3D圖形標(biāo)準(zhǔn)上的進(jìn)展緩慢。2001年8月，Web3D協(xié)會發(fā)布了新一代國際標(biāo)準(zhǔn)一 X3D (其含義是可擴(kuò)展的3D)，并得到了許多軟件廠商的支持。X3b與MPEG-4和)C札兼容，并將集成到MPEG—4的3D內(nèi)容之中，使用捌L語法。它與VP30。97向后兼容，即X3D能提供標(biāo)準(zhǔn)VRML 97Browser的全部功能。其主要任務(wù)是把VRML的功能封裝到一個(gè)輕型、可擴(kuò)展的核心之中.由于其可擴(kuò)展性，任何一個(gè)開發(fā)者都可以根據(jù)自己的需求，擴(kuò)展其功能。
[0005]Sun公司發(fā)布的Java3D，由于其平臺無關(guān)性，使其特別適合編寫基于Web的應(yīng)用程序。Java是一種高效、健壯、安全的編程語言,特別適合Internet開發(fā).作為Java在三維領(lǐng)域的擴(kuò)展，Java3D繼承了其“Write once.Run anywhere”和強(qiáng)大的網(wǎng)絡(luò)功能等特點(diǎn)，即使非常大的三維模型文件也可以從網(wǎng)上下載觀看，并且使用了視錐體消除法處理技術(shù)。同時(shí)采用多線程，實(shí)現(xiàn)了速度的最優(yōu)化。Java3D提供了高層的面向?qū)ο蟮娜S圖形描述方法，開發(fā)者只需要集中精力組建場景圖中的對象而不必設(shè)計(jì)具體的幾何形體和編寫描述代碼。因此Java3D在實(shí)現(xiàn)計(jì)算過程的三維可視化、復(fù)雜的交互功等方面具有其他Web3D技術(shù)無法相比的能力。雖然Java3D擁有著Java的眾多優(yōu)點(diǎn),但同樣也有著Java所面臨的問題，比如程序都要依賴于JVM，并被封死在JW中，占用內(nèi)存大，速度慢等。同時(shí)Java3D在Web中實(shí)現(xiàn)要依賴于Java Applet這種已經(jīng)過時(shí)很久的形式。而Java Applet實(shí)現(xiàn)的簡單交互式三維動畫，不僅需要下載一個(gè)巨大的支持環(huán)境，而且畫面非常粗糙，性能也很差。Java3D只提供了一些簡單的基本形體，對于復(fù)雜的形體則很難直接通過編程實(shí)現(xiàn)，需要調(diào)用其它格式的三維圖形文件獲得復(fù)雜形體。
【發(fā)明內(nèi)容】
[0006]本發(fā)明的目的就是為了克服上述現(xiàn)有技術(shù)存在的缺陷而提供一種基于HTML5的WEB3D圖形引擎生成方法。
[0007]本發(fā)明的目的可以通過以下技術(shù)方案來實(shí)現(xiàn):一種基于HTML5的WEB3D圖形引擎生成方法，其特征在于，該方法包括以下步驟::1)生成模型對象。2)給全局變量賦值，并初始化程序庫。3)創(chuàng)建場景容器以管理3D模型對象。4)創(chuàng)建渲染圖型并建立透視比例和視野轉(zhuǎn)換。5)創(chuàng)建一個(gè)效果，載入著色信息。6)創(chuàng)建材質(zhì)和形狀，設(shè)置材質(zhì)繪制列表，并且設(shè)置其他材質(zhì)參數(shù)。7)將變換值和形狀值加入到變換圖表中。8)為對象原型創(chuàng)建繪制元素，設(shè)置回調(diào)函數(shù)，在3D場景每次被渲染時(shí)執(zhí)行特定的任務(wù)。
[0008]一種基于HTML5的WEB3D圖形引擎生成方法，所述的Web瀏覽器包括Netscape瀏覽器、IE瀏覽器和傲游瀏覽器等。
[0009]所述的步驟I)中的模型包括:HTML代碼和JavaScript代碼。
[0010]一種基于HTML5的WEB3D圖形引擎的方法，其特征在于，該系統(tǒng)包括程序模塊、工具模塊、圖形接口模塊、圖形引擎模塊、Direct3D渲染模塊、OpenGL渲染模塊、GPU圖形處理模塊、顯示模塊。所述的程序模塊、工具模塊與圖形接口模塊相連，所述的圖形接口模塊與圖形引擎模塊相連，所述的圖形引擎模塊與Direct3D渲染模塊、OpenGL渲染模塊相連，所述的Direct3D渲染模塊、O penGL渲染模塊與GPU圖形處理模塊相連，所述的GPU圖形處理模塊與顯示模塊相連。
[0011]與現(xiàn)有技術(shù)相比，本發(fā)明基于HTML5標(biāo)準(zhǔn)及JavaScript開發(fā)，具有無需使用插件便可以實(shí)現(xiàn)效果逼真的Web交互式三維動畫。底層通過OpenGL或DirectX實(shí)現(xiàn)3d軟件、硬件混合加速。很好地解決了網(wǎng)絡(luò)傳輸、平臺無關(guān)性的三維可視化問題。同時(shí)采用，多線程，實(shí)現(xiàn)了速度的最優(yōu)化。并且支持腳本化運(yùn)行。支持Windows、Mac OS x和Linux這三大系統(tǒng)平臺
【專利附圖】
【附圖說明】
[0012]圖1為本發(fā)明的流程圖；
[0013]圖2為本發(fā)明的系統(tǒng)結(jié)構(gòu)圖；
【具體實(shí)施方式】
[0014]下面結(jié)合附圖和具體實(shí)施例對本發(fā)明進(jìn)行詳細(xì)說明。
[0015]實(shí)施例
[0016]1、生成模型對象
[0017]模型對象程序是基于HTML的，主要的功能是HTML文檔的<head>〈\head>標(biāo)簽之間，包含在〈script〉標(biāo)簽元素的代碼實(shí)現(xiàn)的。首先引用的基礎(chǔ)工具函數(shù)庫，當(dāng)Html頁面加載使用Init調(diào)用方法，Init調(diào)用makeClients來創(chuàng)建模型對象，而makeClients在Html中尋找所有id以”model”開頭的div標(biāo)簽，并把創(chuàng)建的模型對象插入到頁面代碼中。關(guān)閉時(shí)會觸發(fā)onunload事件，從而調(diào)用uninit O函數(shù)，完成清理工作如:對象的刪除，內(nèi)存釋放等。如下面代碼
[0018]〈body〉
[0019]〈div id=" bf3d" style=" width:1024px ;height:768px" />
[0020]〈script type=" text/davascript!f >
[0021]model js.require (" bf3djs.util")；
[0022]window, onload = init ；
[0023]window, onunload = uninit ；
[0024]var g—model ；
[0025]vat g—sath ；
[0026]vBIr g—client ；
[0027]var g—pack ；
[0028]vat g cubeTransform ；
[0029]vat g—finished ；
[0030]function initO < model js.util.makeClients (init-Stepl):)
[0031]function uninitO {if (g—client) (g—client, cleanup ();))
[0032]</script)
[0033]2、給全局變量賦值，并初始化程序庫
[0034]3d圖形引擎包含了一系列公用庫，如果要用某個(gè)功能函數(shù)，就需要在程序的開始在〈script〉標(biāo)簽內(nèi)加載該代碼。如下所示，第一個(gè)〈script〉標(biāo)簽內(nèi)的加載的庫中定義了require O函數(shù)，用這個(gè)函數(shù)來加載其他的接口 API庫。如下面代碼
[0035]〈script type=" text/javascript!f src = " bf3djs/base.js" ></script)
[0036]〈script type=" text/javascript!f >
[0037]bf3djs.require C bf3djs.util，)；
[0038]bf3djs.require C bf3djs.math，)；
[0039]bf3djs.require (，bf3djs.rendergraph，)；
[0040]生成接口庫函數(shù)，initO函數(shù)調(diào)用了 3d圖形引擎庫函數(shù)bfdjs.util.makeClients O，以此來產(chǎn)生3d圖形引擎對象。當(dāng)這個(gè)函數(shù)返回時(shí)，它會調(diào)用回調(diào)函數(shù)initStep2()0用戶瀏覽器必須允許腳本執(zhí)行。如下面代碼
[0041]function init () {
[0042]bf3djs.util.makeClients (initStep2)
[0043]}
[0044]設(shè)置用戶區(qū)窗口，用庫函數(shù)bf3djs.util.makeClients ()在HTML中生成的3d圖形引擎對象可以跨平臺使用。這個(gè)函數(shù)查找HTML文檔中所有id以"bf3d"開頭的(例如bf3d，bf3d_element等)<div>標(biāo)簽，并在里面插入一用戶區(qū)，以運(yùn)行3d圖形引擎程序。客戶區(qū)域大小默認(rèn)設(shè)置為100%，因此<div>必須有大小設(shè)置，如下面代碼
[0045]< ! —A div of a specific size—>
[0046]〈div id=" bf3d" style=" width:1024px ;height:768px" />
[0047]< ! —A div that fills its containing element—>[0048]〈div id=" bf3d" style = " width:100% ；height:100% " />
[0049]makeClients ()函數(shù)傳入一個(gè)回調(diào)函數(shù)作為參數(shù)，一旦3d圖形引擎對象被創(chuàng)建，此回調(diào)函數(shù)就會被觸發(fā)。[0050]3、創(chuàng)建場景容器以管理3D模型對象
[0051]創(chuàng)建場景容器給全局變量賦值:bfdElement是3d圖形引擎元素，是DOM的一部分，g_cIient是3d圖形引擎應(yīng)用程序的入口點(diǎn)，g_o3d是3d圖形引擎的命名空間，g_math是3d圖形引擎數(shù)學(xué)庫的命名空間。
[0052]var bfdElement = clientElements [O]；
[0053]g_client = bfdElement.client ；
[0054]g_bf3d = bfdElement.bf3d ；
[0055]g_math = bfdjs.math ；
[0056]產(chǎn)生對象包，對象包容納了 o3d的所有對象，并控制這些對象的生命周期。
[0057]g_pack = g_client.createPack()；
[0058]4、創(chuàng)建渲染圖型并建立透視比例和視野轉(zhuǎn)換
[0059]用庫函數(shù)renderGraph.createBasicViewO產(chǎn)生一個(gè)標(biāo)準(zhǔn)的值染圖。這個(gè)?宣染圖有兩個(gè)繪圖列表，一個(gè)用于繪制非透明材質(zhì)的元素(性能繪圖列表)，另一個(gè)用于繪制透明材質(zhì)元素(透明效果繪圖列表)如下面代碼
[0060]var viewlnfo = bfdjs.renderGraph.createBasicView(
[0061]g_pack,
[0062]g_client.root,
[0063]g_client.renderGraphRoot)；
[0064]繪圖背景，背景指定了視圖投影和虛擬攝像機(jī)的位置。drawContext對象是用庫函數(shù)renderGraph.createBasicView()產(chǎn)生的。下面的例子代碼展示了如何設(shè)置它的參數(shù):
[0065]//建立透視圖
[0066]viewlnf0.drawContext.projection = g_math.matrix4.perspective (
[0067]g_math.degToRad (30), //30 度視場
[0068]g_client.width/g_client.height,
[0069]1，//靠近平面
[0070]5000) ;//遠(yuǎn)離平面
[0071]//建立視圖變換注視模型所在的區(qū)域
[0072]viewlnf0.drawContext.view = g math.matrix4.1ookAt ([0，1，5]，//目艮睛
[0073][0，0，0]，// 目標(biāo)
[0074][0，1，0]) ;// 向上
[0075]5、創(chuàng)建一個(gè)效果，載入著色信息
[0076]頂點(diǎn)和像素著色器定義在HTML文檔的〈textarea〉之間。著色器控制每個(gè)像素的顏色計(jì)算。下面的代碼產(chǎn)生效果(redEffect)并將渲染內(nèi)容讀入著色器。如下面代碼
[0077]var redEffect = g_pack.createObject(，Effect，)；
[0078]Η在HTML文檔中尋找“Effect”的元素
[0079]var shaderString = document.getElementByld (，effect，).value ；[0080]//將元素〈textarea id=" effect" >中的所有內(nèi)容加載到Effect對象中
[0081]redEffect.1oadFromFXString(shaderString)；
[0082]6、創(chuàng)建材質(zhì)和形狀，設(shè)置材質(zhì)繪制列表，并且設(shè)置其他材質(zhì)參數(shù)
[0083]模型的材質(zhì)是在initStep2()中創(chuàng)建的，并被賦給渲染列表，該列表控制非透明材質(zhì)。在下面的代碼將模型的材質(zhì)效果設(shè)置為紅色’redEffect’，這樣圖形硬件可以可以對模型進(jìn)行適當(dāng)?shù)匿秩尽Ｔ谙旅娴拇a中，由于將模型所有像素都設(shè)置為紅色，所以沒有進(jìn)行復(fù)雜的渲染計(jì)算。代碼中的createCube O函數(shù),倉Il建了幾何立方體,并渲染成紅色材質(zhì)?？梢詫⒘⒎襟w替換成SketchUp, 3ds Max或者M(jìn)aya等工具建的模型。如下面代碼
[0084]var redMaterial = g_pack.createOb ject (，Material，)；
[0085]redMaterial.drawList = viewlnf0.performanceDrawList ；
[0086]redMaterial.effect = redEffect ；
[0087]var cubeShape = createCube(redMaterial)；
[0088]7、將變換值和形狀值加入到變換圖表中
[0089]下面的代碼給模型賦予了簡單的動作變換。如下面代碼
[0090]g_cubeTransform = g_pack.createObject(，Transform，)；
[0091]g_cubeTransform.addShape(cubeShape)；
[0092]g_cubeTransform.parent(g_client.root)；
[0093]8、為對象原型創(chuàng)建繪制元素，設(shè)置回調(diào)函數(shù)，在3D場景每次被渲染時(shí)執(zhí)行特定的任務(wù)。
[0094]每個(gè)圖形基元都有一個(gè)用于描述該圖形的材質(zhì)及效果的繪制元素(drawelement)。庫函數(shù)createDrawElements O為每個(gè)圖形基元生成不同的繪制元素(drawelement)并將這些繪制元素添加到與圖形基元材質(zhì)有關(guān)的繪制列表(draw list)中。當(dāng)窗口渲染時(shí)，系統(tǒng)會為每個(gè)繪制列表(draw list)產(chǎn)生一次繪制刷新(draw pass),這樣所有的在繪制列表(draw list)中的繪制元素(draw element)就會被渲染。如下面代碼
[0095]cubeShape.createDrawElements(g_pack，null)；
[0096]每次硬件刷新屏幕時(shí)，場景都會被自動渲染。下面的例子代碼中setRenderCalIback O函數(shù)設(shè)置了一個(gè)回調(diào),用于每次場景渲染時(shí)更新模型的動作及形狀。如下面代碼
[0097]g_client.setRenderCal lback (renderCallback)。
【權(quán)利要求】
1.基于HTML5的WEB3D圖形引擎生成方法:采其特征在于，該方法包括以下步驟: 1)生成模型對象。 2)給全局變量賦值,并初始化程序庫。 3)創(chuàng)建場景容器以管理3D模型對象。 4)創(chuàng)建渲染圖型并建立透視比例和視野轉(zhuǎn)換。 5)創(chuàng)建一個(gè)效果，載入著色信息。 6)創(chuàng)建材質(zhì)和形狀，設(shè)置材質(zhì)繪制列表，并且設(shè)置其他材質(zhì)參數(shù)。 7)將變換值和形狀值加入到變換圖表中。 8)為對象原型創(chuàng)建繪制元素，設(shè)置回調(diào)函數(shù)，在3D場景每次被渲染時(shí)執(zhí)行特定的任務(wù)。
2.根據(jù)權(quán)利要求1所述的基于HTML5的WEB3D圖形引擎生成方法，其特征在于，所述的Web瀏覽器包括Netscape瀏覽器、基于HTML5的IE瀏覽器和傲游瀏覽器等。
3.根據(jù)權(quán)利要求1所述的基于HTML5的WEB3D圖形引擎生成方法，其特征在于，所述的步驟I)中的模型包括=HTML代碼和JavaScript代碼。
4.一種基于HTML5的WEB3D圖形引擎的系統(tǒng)，其特征在于，該系統(tǒng)包括程序模塊、工具模塊、圖形接口模塊、圖形引擎模塊、Direct3D渲染模塊、OpenGL渲染模塊、GPU圖形處理模塊、顯示模塊。所述的程序模塊、工具模塊與圖形接口模塊相連，所述的圖形接口模塊與圖形引擎模塊相連，所述的圖形引擎模塊與Direct3D渲染模塊、OpenGL渲染模塊相連，所述的Direct3D渲染模塊、OpenGL渲染模塊與GPU圖形處理模塊相連，所述的GPU圖形處理模塊與顯示模塊相連。
【文檔編號】G06F9/44GK103543998SQ201210247554
【公開日】2014年1月29日 申請日期:2012年7月17日 優(yōu)先權(quán)日:2012年7月17日
【發(fā)明者】胡春陽, 袁樺 申請人:上海互基信息科技有限公司