[發(fā)明專(zhuān)利]基于WebGL的大批量三維文字高效顯示的方法

在審

• 申請(qǐng)?zhí)枺?/td>: 202110453472.2
• 申請(qǐng)日: 2021-04-26
• 公開(kāi)（公告）號(hào): CN113177172A
• 公開(kāi)（公告）日: 2021-07-27
• 發(fā)明（設(shè)計(jì)）人: 葉修梓;蔣躍華;程力偉
• 申請(qǐng)（專(zhuān)利權(quán)）人: 杭州新迪數(shù)字工程系統(tǒng)有限公司
• 主分類(lèi)號(hào): G06F16/957
• 分類(lèi)號(hào): G06F16/957;G06F40/109;G06T15/04
• 代理公司: 杭州君度專(zhuān)利代理事務(wù)所(特殊普通合伙) 33240
• 代理人: 鄭芳

本發(fā)明涉及一種基于WebGL的大批量三維文字高效顯示的方法，包括下述步驟：(1)遍歷模型中的所有文字對(duì)象，構(gòu)建字符hash表；(2)采用Canvas繪制hash表中每個(gè)字符，并計(jì)算SDF信息，生成SDF紋理圖片，記錄每個(gè)字符的紋理坐標(biāo)值；(3)創(chuàng)建著色器材質(zhì)對(duì)象，在片元著色器里實(shí)現(xiàn)基于SDF的著色，SDF圖片作為輸入紋理；(4)依據(jù)文字的幾何位置、大小和顏色構(gòu)建geometry對(duì)象，每個(gè)字符用兩個(gè)三角面片構(gòu)成的矩形表示；(5)合并材質(zhì)相同的geometry對(duì)象創(chuàng)建顯示mesh對(duì)象，加入到場(chǎng)景樹(shù)中進(jìn)行繪制。本發(fā)明不僅能高效繪制大批量文字，在縮放時(shí)保持清晰的文字效果，而且可以滿足各種字體顯示需求。

技術(shù)領(lǐng)域

本發(fā)明屬于計(jì)算機(jī)圖形Web顯示技術(shù)領(lǐng)域，具體地說(shuō)是涉及一種基于WebGL的大批量三維文字高效顯示的方法。

背景技術(shù)

隨著HTML5/WebGL技術(shù)的發(fā)展和成熟，為我們?cè)赪eb和移動(dòng)端顯示CAD模型和圖紙?zhí)峁┝诵碌倪x擇。WebGL將OpenGL ES與JavaScript結(jié)合，可以為HTML5 Canvas提供硬件3D加速渲染，提供了基于瀏覽器的無(wú)插件三維渲染跨平臺(tái)方案，越來(lái)越廣泛的用于在Web上進(jìn)行三維模型和二維圖紙的輕量化展示和交互。三維CAD模型的產(chǎn)品制造信息(PMI)、二維工程圖紙中常含有大量的文字信息，如何對(duì)這些字體、樣式、大小都有可能不同的大批量文字進(jìn)行高效渲染，并支持縮放操作是一個(gè)難點(diǎn)。WebGL本身沒(méi)有提供直接進(jìn)行文字繪制的接口，而且不能直接訪問(wèn)系統(tǒng)字體，目前在網(wǎng)頁(yè)三維場(chǎng)景里渲染文字的方式有下面幾種：

(1)使用DOM API添加HTML元素來(lái)表示文字，將三維坐標(biāo)點(diǎn)投影到屏幕坐標(biāo)作為文字的位置，每次相機(jī)或坐標(biāo)變化時(shí)需要重新計(jì)算文字元素的屏幕坐標(biāo)。這種方式適用于數(shù)量不大、大小固定的靜態(tài)文本的展示，當(dāng)文本數(shù)量變多時(shí)交互性能會(huì)很差，不適合CAD模型和圖紙里大批量文字的顯示。

(2)從字體文件中獲取文字的矢量幾何表示，創(chuàng)建文字的三維顯示網(wǎng)格。這種方式文字直接成為三維場(chǎng)景里的幾何對(duì)象，能很好的適應(yīng)縮放、平移、旋轉(zhuǎn)等視圖交互操作，但每個(gè)文字都包含很多的三角面，場(chǎng)景里文字?jǐn)?shù)量很多時(shí)，三角面的數(shù)量會(huì)急劇增加，從而加大渲染的負(fù)擔(dān),引起卡頓現(xiàn)象。

(3)使用文字位圖貼圖，將字符集預(yù)渲染到一張或多張圖片上，記錄每個(gè)字符的位置，場(chǎng)景中的每個(gè)文字用一個(gè)矩形表示，將文字圖片作為紋理貼到文字對(duì)象上。這種方式在繪制大批量文字時(shí)有很高的性能，但只適合固定大小的文字顯示，位圖字體不適合縮放，放大時(shí)會(huì)產(chǎn)生明顯的鋸齒效果。

(4)使用基于Signed Distance Field(有向距離場(chǎng)，以下簡(jiǎn)稱SDF)的矢量信息保存和渲染方法，可以很好的解決位圖字體縮放時(shí)產(chǎn)生的模糊問(wèn)題。SDF方法通過(guò)將字體位圖中每個(gè)像素存儲(chǔ)的顏色值換成距離文字邊緣的最短距離，當(dāng)像素在文字內(nèi)，則用正數(shù)距離，在文字外則用負(fù)數(shù)距離，文字邊緣距離則是零，這樣就通過(guò)矢量距離描述了字符中的邊緣，在著色器中，通過(guò)光滑插值對(duì)邊緣處做平滑處理，就可以輕易化解邊緣問(wèn)題。SDF的計(jì)算是個(gè)耗時(shí)的過(guò)程，該方法一般需要事先對(duì)字符集生成SDF圖，如果只是英文還好，字母加字符也就幾十的數(shù)量，便于提前生成一張SDF紋理圖片，但是中文漢字常用就有6000多個(gè)，提前生成SDF圖片會(huì)很大，而且對(duì)不同字體要生成不同的圖片，加大網(wǎng)頁(yè)端顯示時(shí)的加載開(kāi)銷(xiāo)和內(nèi)存顯存開(kāi)銷(xiāo)。

發(fā)明內(nèi)容

為了克服現(xiàn)有技術(shù)存在的不足，本發(fā)明提供了一種基于WebGL的大批量三維文字高效顯示的方法，解決了使用WebGL技術(shù)在網(wǎng)頁(yè)端查看CAD模型和圖紙時(shí)因存在大量文字而導(dǎo)致模型在顯示、移動(dòng)、縮放等交互瀏覽時(shí)出現(xiàn)的明顯卡頓問(wèn)題。

本發(fā)明基于活字印刷思想，在加載模型時(shí)采用HTML5 canvas渲染和快速歐氏距離計(jì)算方法實(shí)時(shí)生成包含當(dāng)前模型使用字符的SDF紋理圖片，以紋理貼圖方式基于SDF信息繪制文字，不僅能高效繪制大批量文字，并在縮放時(shí)保持清晰的文字效果，而且HTML5 canvas能直接使用系統(tǒng)字體，不需額外加載龐大的字體文件，滿足各種字體顯示需求。

為了實(shí)現(xiàn)上述目的，本發(fā)明采用的技術(shù)方案為：