用WebGL繪制簡單文本

WebGL本身只是一個3D接口，并沒有提供任何應(yīng)用層的方法。當然這就包括的文字的繪制問題，繪制其它立體圖像我們都是從圖形的數(shù)學(xué)模型中計算出的頂點數(shù)據(jù)，那文字怎么辦呢？對于文字是無法自己計算的，我們需要先得到文字的點陣，再來計算3D頂點坐標。 完整實例：WebGL簡單文本繪制（建議F11全屏查看） 這里為了方便起見使用了SimpleWebGL和它的Matrix插件。這個效果的重點在于數(shù)據(jù)的處理，使用什么WebGL庫并不重要。這只是個簡單的效果，所以我使用了簡單的方法。首先要獲取文字的點陣相關(guān)的信息，需要創(chuàng)建一個額外的Canvas在上面繪制文字。這個例子中我是直接使用貼圖的方式來做的，如果有必要也可以在JS中自己分析頂點數(shù)據(jù)做成其它模型。下面是構(gòu)造貼圖部分的代碼 //創(chuàng)建Canvas，并設(shè)置大小 var text=document.createElement("canvas"); text.width=512,text.height=256; //對其繪制文字 (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對象 new Texture2D(text,"RGBA").bind(1); 這樣貼圖數(shù)據(jù)就準備好了，然后要有一個頂點模型才能往上面貼圖呀。所以我們還需要生成一個平面或一個物體用來貼圖，這里我生成一個點陣長方體來貼圖，繪制時使用線條描繪。下面是這個長方體的生成代碼 //做出一個點陣型的長方體，用來往上面貼圖 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); })(); 著色器的代碼也需要看看，不過我就不介紹了。只是基本的貼圖代碼而已，在片段著色器中把頂點的坐標映射到貼圖的坐標上取顏色就行了。

網(wǎng)頁題目：用WebGL繪制簡單文本
鏈接URL：http://www.bm7419.com/news24/319024.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、標簽優(yōu)化、建站公司、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站改版、網(wǎng)站導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)