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

在審

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

1.一種基于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)景樹中進(jìn)行繪制。

2.根據(jù)權(quán)利要求1所述基于WebGL的大批量三維文字高效顯示的方法，其特征在于步驟(1)具體為：

(1-1)將字體按正常、加粗、斜體、斜體加粗分為四種，每種對(duì)應(yīng)一張hash表；

(1-2)遍歷獲取模型里的每一個(gè)字符串對(duì)象及其對(duì)應(yīng)的字體信息，找到這個(gè)字符串對(duì)應(yīng)的hash表；

(1-3)遍歷每一個(gè)字符，以“字體名+字符”作為鍵值，判斷是否在hash表已存在，沒有則加入hash表。

3.根據(jù)權(quán)利要求2所述基于WebGL的大批量三維文字高效顯示的方法，其特征在于步驟(2)具體為：

(2-1)根據(jù)hash表中字符的個(gè)數(shù)計(jì)算SDF圖片的大小，并創(chuàng)建一張圖片；

(2-2)遍歷每個(gè)字符：

(i)根據(jù)hash表類型和字符字體，設(shè)置canvas畫筆樣式，繪制字符到canvas；

(ii)從canvas獲取字符位圖像素值，采用Felzenszwalb等提出的歐式距離轉(zhuǎn)換算法計(jì)算每個(gè)像素的SDF值；

(iii)計(jì)算當(dāng)前字符在SDF圖片中的位置，拷貝字符每個(gè)像素的SDF值到SDF圖片中，SDF值只保存在圖片的alpha分量中；

(iv)記錄字符矩形四個(gè)角點(diǎn)在SDF圖片中的紋理坐標(biāo)值，作為字符對(duì)應(yīng)的hash值存到hash表中；

(2-3)每個(gè)hash表對(duì)應(yīng)生成一張SDF圖片，最多生成四張SDF圖片，分別對(duì)應(yīng)正常、加粗、斜體、斜體加粗四種字符表，如果某個(gè)hash表的大小為0則不生成SDF圖片。

4.根據(jù)權(quán)利要求3所述基于WebGL的大批量三維文字高效顯示的方法，其特征在于步驟(3)具體為：

(3-1)根據(jù)SDF圖片的數(shù)量創(chuàng)建相應(yīng)數(shù)量的著色器材質(zhì)對(duì)象，每個(gè)材質(zhì)綁定相應(yīng)的SDF圖片，作為輸入紋理對(duì)象；

(3-2)在片元著色器里對(duì)每個(gè)像素獲取距離值，通過光滑插值在邊緣處做平滑處理，消除字體邊緣處的鋸齒問題。

5.根據(jù)權(quán)利要求4所述基于WebGL的大批量三維文字高效顯示的方法，其特征在于步驟(4)具體為：

(4-1)根據(jù)字體大小來(lái)決定字符矩形的高度，對(duì)于非中文字符，由字符本身的像素寬度來(lái)計(jì)算寬高比例，從而來(lái)決定字符矩形的寬度；中文字符是等寬字符，字符矩形的寬高相等；

(4-2)根據(jù)文字的位置、寬高信息計(jì)算字符矩形四個(gè)頂點(diǎn)的position值；

(4-3)根據(jù)文字的顏色設(shè)置字符矩形頂點(diǎn)的color值；

(4-4)從字符hash表中獲取字符對(duì)應(yīng)的紋理坐標(biāo)值設(shè)置字符矩形頂點(diǎn)的uv值；

(4-5)如果設(shè)置為雙面渲染，從反面看過來(lái)也能看見和正面一樣的內(nèi)容，就要在相同的位置再反過來(lái)構(gòu)建一個(gè)geometry對(duì)象。

6.根據(jù)權(quán)利要求5所述基于WebGL的大批量三維文字高效顯示的方法，其特征在于步驟(5)具體為：

(5-1)創(chuàng)建文字geometry對(duì)象的時(shí)候，以材質(zhì)為區(qū)分，分別放入不同的數(shù)組里面；

(5-2)進(jìn)一步合并材質(zhì)相同的多個(gè)geometry對(duì)象的position、uv、color元素值生成一個(gè)新的geometry，并創(chuàng)建一個(gè)顯示mesh對(duì)象加入到場(chǎng)景中,減少渲染的批次，提高渲染效率。