WebGL本身只是一個(gè)3D接口，并沒有提供任何應(yīng)用層的方法。當(dāng)然這就包括的文字的繪制問題，繪制其它立體圖像我們都是從圖形的數(shù)學(xué)模型中計(jì)算出的頂點(diǎn)數(shù)據(jù)，那文字怎么辦呢？對于文字是無法自己計(jì)算的，我們需要先得到文字的點(diǎn)陣，再來計(jì)算3D頂點(diǎn)坐標(biāo)。 完整實(shí)例：WebGL簡單文本繪制（建議F11全屏查看） 這里為了方便起見使用了SimpleWebGL和它的Matrix插件。這個(gè)效果的重點(diǎn)在于數(shù)據(jù)的處理，使用什么WebGL庫并不重要。這只是個(gè)簡單的效果，所以我使用了簡單的方法。首先要獲取文字的點(diǎn)陣相關(guān)的信息，需要創(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; //對其繪制文字 (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ù)就準(zhǔn)備好了，然后要有一個(gè)頂點(diǎn)模型才能往上面貼圖呀。所以我們還需要生成一個(gè)平面或一個(gè)物體用來貼圖，這里我生成一個(gè)點(diǎn)陣長方體來貼圖，繪制時(shí)使用線條描繪。下面是這個(gè)長方體的生成代碼 //做出一個(gè)點(diǎn)陣型的長方體，用來往上面貼圖 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繪制簡單文本
鏈接URL：http://jinyejixie.com/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)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)