WebGL本身只是一個(gè)3D接口,并沒有提供任何應(yīng)用層的方法。當(dāng)然這就包括的文字的繪制問題,繪制其它立體圖像我們都是從圖形的數(shù)學(xué)模型中計(jì)算出的頂點(diǎn)數(shù)據(jù),那文字怎么辦呢?對(duì)于文字是無法自己計(jì)算的,我們需要先得到文字的點(diǎn)陣,再來計(jì)算3D頂點(diǎn)坐標(biāo)。
完整實(shí)例:WebGL簡(jiǎn)單文本繪制(建議F11全屏查看)
這里為了方便起見使用了SimpleWebGL和它的Matrix插件。這個(gè)效果的重點(diǎn)在于數(shù)據(jù)的處理,使用什么WebGL庫并不重要。這只是個(gè)簡(jiǎn)單的效果,所以我使用了簡(jiǎn)單的方法。首先要獲取文字的點(diǎn)陣相關(guān)的信息,需要?jiǎng)?chuàng)建一個(gè)額外的Canvas在上面繪制文字。這個(gè)例子中我是直接使用貼圖的方式來做的,如果有必要也可以在JS中自己分析頂點(diǎn)數(shù)據(jù)做成其它模型。下面是構(gòu)造貼圖部分的代碼
//創(chuàng)建Canvas,并設(shè)置大小
var text=document.createElement("canvas");
text.width=512,text.height=256;
//對(duì)其繪制文字
(function(g){
//設(shè)置文字屬性
g.textBaseline="middle",g.textAlign="center";
g.font="128px 楷體",g.fontStyle="rgba(0,0,0,0.3)";
//設(shè)置文字漸變
g.fillStyle=g.createLinearGradient(0,0,text.width,0);
g.fillStyle.addColorStop(0,"rgba(255,255,0,0.5)");
g.fillStyle.addColorStop(0.5,"rgba(0,255,255,0.5)");
g.fillStyle.addColorStop(1,"rgba(255,0,255,0.5)");
//繪制文字
g.fillText("次碳酸鈷",256,128);
})(text.getContext("2d"));
//放入Texture2D對(duì)象
new Texture2D(text,"RGBA").bind(1);
這樣貼圖數(shù)據(jù)就準(zhǔn)備好了,然后要有一個(gè)頂點(diǎn)模型才能往上面貼圖呀。所以我們還需要生成一個(gè)平面或一個(gè)物體用來貼圖,這里我生成一個(gè)點(diǎn)陣長(zhǎng)方體來貼圖,繪制時(shí)使用線條描繪。下面是這個(gè)長(zhǎng)方體的生成代碼
//做出一個(gè)點(diǎn)陣型的長(zhǎng)方體,用來往上面貼圖
var position=[];
(function(){
var i,j,w=1<<7,h=1<<6,k=Math.max(w,h);
for(i=-w;i<=w;i++)for(j=-h;j<=h;j++)
position.push(i/k,j/k,0.1, i/k,j/k,-0.1);
})();
著色器的代碼也需要看看,不過我就不介紹了。只是基本的貼圖代碼而已,在片段著色器中把頂點(diǎn)的坐標(biāo)映射到貼圖的坐標(biāo)上取顏色就行了。
網(wǎng)頁題目:用WebGL繪制簡(jiǎn)單文本
鏈接URL:http://m.rwnh.cn/news24/319024.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供定制開發(fā)、標(biāo)簽優(yōu)化、建站公司、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站改版、網(wǎng)站導(dǎo)航
廣告
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源:
創(chuàng)新互聯(lián)