Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

WebGL简单文本绘制

  WebGL本身只是一个3D接口,并没有提供任何应用层的方法。当然这就包括的文字的绘制问题,绘制其它立体图像我们都是从图形的数学模型中计算出的顶点数据,那文字怎么办呢?对于文字是无法自己计算的,我们需要先得到文字的点阵,再来计算3D顶点坐标。
  完整实例:WebGL简单文本绘制(建议F11全屏查看)
  这里为了方便起见使用了SimpleWebGL和它的Matrix插件。这个效果的重点在于数据的处理,使用什么WebGL库并不重要。这只是个简单的效果,所以我使用了简单的方法。首先要获取文字的点阵相关的信息,需要创建一个额外的Canvas在上面绘制文字。这个例子中我是直接使用贴图的方式来做的,如果有必要也可以在JS中自己分析顶点数据做成其它模型。下面是构造贴图部分的代码 //创建Canvas,并设置大小
var text=document.createElement("canvas");
text.width=512,text.height=256;
//对其绘制文字
(function(g){
  //设置文字属性
  g.textBaseline="middle",g.textAlign="center";
  g.font="128px 楷体",g.fontStyle="rgba(0,0,0,0.3)";
  //设置文字渐变
  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);
  这样贴图数据就准备好了,然后要有一个顶点模型才能往上面贴图呀。所以我们还需要生成一个平面或一个物体用来贴图,这里我生成一个点阵长方体来贴图,绘制时使用线条描绘。下面是这个长方体的生成代码 //做出一个点阵型的长方体,用来往上面贴图
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);
})();
  着色器的代码也需要看看,不过我就不介绍了。只是基本的贴图代码而已,在片段着色器中把顶点的坐标映射到贴图的坐标上取颜色就行了。
网名:
3.84.186.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^