叶落为重生每片落下的叶子都是为了下一次的涅槃...^_^

context2D上的texture mapping

[来自:]http://www.alloyteam.com/2012/08/texture-mapping-on-context2d/

我们在做一些图像变换或者3D建模时,骨架或者网格的“蒙皮”是少不了的。

在webGL中,也就是“experimental-webgl”的context中,webGL跟openGL一样,提供了一个非常方便的

JavaScript
1
gl.bindTexture

接口,可以很容易的对某一个指定的面或者网格蒙上指定的素材。并且,被蒙皮的区域做矢量变换,3d rotate之类的,texture会自动随着变换。不用额外的做处理。所以在webGL中,textureMapping是十分容易和方便的。

这里有个简单的demo,支持webGL的浏览器可以尝试围观下。

当然,从文章的标题可以看出,我们今天要讨论的内容并不是webGL下的bindTexture。而是在2D的context下怎么对素材进行TextureMapping?

 

【Texture Mapping】

其实只要对canvas 2d context 的api有一定了解,找来找去就会发现,唯一能让图片变形的api应该只有

JavaScript
1
CanvasRenderingContext2D.transform

了,但是实际上,仅仅折腾这个api,参数改来改去试来试去会发现transform只能完成平行四边形的变换。如下demo:

假如我想要做到不规则四边形的texture变换,就需要重新考虑一条路子。比如下面这个例子:

ok,看起来基本已经达到目的了。可以适应任意不规则四边形的变换。

那么是怎么实现的呢?

【实现】 

从上面那个演示demo应该就可以看出来了,还是利用“三角拼凑法”来实现。三角切分法有个维度,切分的越细,得到最终的模拟的结果会越逼真。相应的计算量也会越大。

假设我们切分的阀值为n,那么代表把每条边先n等分,然后n*n个四边形格子,然后每个格子再沿对角一分为二,这样得到n*n*2个三角形,每个三角形都可以根据它所在的四边形格子进行transfrom的变换,最终拼接起来得到近似的结果。

具体的实现和demo都可以从这里获取:
https://github.com/hongru/TextureMapping

【扩展】

说了这么多,那么这样的功能在什么地方能用起来呢?更多的情景是在一些2D模拟3D场景并且需要texture做支撑的时候。

于是,我们在Context 2D中也可以做到图片的3D翻转变换了。当然,如果只是图片的翻转的话,css3的transform-3d也可以做到,我们这里只讨论canvas中context 2d中的实现。

当然,继续下去,完成一个图片展示的应用也未尝不可,并不需要webGL。如下一个简单的Demo

posted on 2012-08-22 15:18 岑安 阅读(...) 评论(...) 编辑 收藏

导航

统计信息

News