canvas曲线面片2

写前面

此篇的妹妹篇 是canvas曲面面片1 如果你没看 可以去了解下

在前面那篇 我们用了 双线性面片 还记得不？

大部分的人可能觉得之前那篇没软用吧  但有小部分人群肯定是受益匪浅的

在这篇博文中 我相信那些“大部分人群”也会觉得有软用了。。gif效果如下

这就是曲线面片的威力！  让这只萌萌の生物动起来了  视线跟随着小球 晃动着脑袋~

用到的是贝塞尔面片 准确的说是二次贝塞尔面片（下面说的都是二次） 当然有高次的 不过一般来说三次就够用了

先讲解下什么是贝塞尔面片 在这之前你得知道啥是贝塞尔曲线 （不懂的先自己找资料了解下）

上篇用到的是线性面片 只要4个控制点就够了 而贝塞尔面片 至少需要用到9个控制点   如图

但如何表示出曲面呢？这9个点 其实就可以表示出无线多个贝塞尔曲线了 也就形成了面片

跟上篇一样 可以先黄方向插值 随后蓝方向插值  当然反过处理也是ok的 然后拼接成三角图元就行了

现在是可以表示出曲面了 但是没有贴图 ！ 还记得上篇我们是怎么处理贴图的不？

因为我们上次用的是canvas2d api  所以在处理的时候 对一个三角图元就一个drawImage 然后解线性方程组 算出transform中的矩阵

这篇我用的是webgl 不需要结出矩阵的值了 只要给出纹理坐标就行 但是要注意 webgl坐标系和图片坐标是相反的 ！

直接看那部分关键代码吧 如下

可以看到 处理循环中的逻辑和上一篇是差不多的 只是把获取插值坐标函数分离了出来

这里有个maps数组 这个就是存储的纹理坐标了  因为坐标系的原因（相反的） 所以 1-

贝塞尔面片原理大致就是这样了~

但那个萌萌の生物是怎么形成的呢？ 这个生物需要很多个面片  看我的img包你就能猜到大概了

我这里用了5张纹理  工厂生成了5个面片对象

光是这样萌萌の生物是不会动的！

你还得根据某个坐标（这里是那个小球） 给那些需要偏移的控制点计算位置  如图

这里的微调工作繁琐到爆炸！如下 各种微调！

这里花费了我大量的精力 为了就是使面部动作生动 对各个控制点给参数。。各种微调

还有一开始把各个面片合成原始图像的位置 也是各种微调！

--------------------------------------------------------------------

这玩意儿还是要有个编辑器才行  设定各种终止 初始值 做各种动画插值变换

再对人物细分 如 对眉毛 腮红也单独来个面片  一定会非常nice

不过 现阶段是不打算考虑做编辑器这种事的  这个优先级很后 。。

再说了 市面上应该有这种编辑器的吧（我也不清楚）

最重要的还是实现的思想

demo源码  用chrome打开

时间： 2024-12-06 01:31:35

canvas曲线面片2的相关文章

canvas 二 canvas绘制表盘，及canvas曲线的绘制

/** * 绘制圆 * arc(x,y,半径,起始弧度,结束弧度,旋转方向) * x,y起始位置 * 弧度与角度的关系 : 弧度 = 角度*Math.PI/180 * 旋转方向:顺时针(默认false).逆时针(true) */ var oc = document.getElementById('canvas'); var ogc = oc.getContext('2d'); //实例1绘制扇形 ogc.moveTo(200,200); ogc.arc(200,200,150,0,90*Math

canvas曲线

var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); context.beginPath(); context.moveTo(188, 150); context.quadraticCurveTo(288, 0, 388, 150); context.lineWidth = 10; // line color context.strokeStyle = 'orange';

javascript canvas 曲线片面（上）

写前面: 这东西是有用武之地的 也许就明天 你就会用到其中的部分思想 (被某人吐槽研究的东西没用 我就醉了~) ------------------------------------ 什么是曲线片面 看下面! 上面这个就是相对简单的双线性片面 可通过4个点来控制  左上角 A点  顺时针依次就是 ABCD 这个东西 其实就是 BA方向 和 DA 方向的线性插值组合 下图 先沿着DA CB 方向插值 再继续对 BA 方向插值 生成三角坐标的代码: 1 //初始点 2 var dot_ar = [

webgl圈中物体

这篇的标题非常不符合我的气质! 但是 如果带上那种 “不可能 姐姐 妹妹 君 套套 不要”等关键字标题的话 其他小伙伴就很难通过搜索引擎到这个地方来了! 所以还是使用这种简短大众的标题得了.. 注意标题中有个“圏” 字 我们讨论的并不是“选” 下面的圈中物体解决方案 其实已经把如何选中一个物体的问题一并搞定了 圈中物体 首先要有一条封闭曲线吧 那条曲线是由n个线段拼接起来的 我们要找到相交的那两条线段和那两条线段之间的所有线段 如图 相交的线段就是这两了 封闭曲线的起始和结束线段就是它们 不过还

[ html canvas 绘制曲线三种方法 ] canvas绘图 绘制曲线三种方法属性实例演示

1 <!DOCTYPE html> 2 <html lang='zh-cn'> 3 <head> 4 <title>Insert you title</title> 5 <meta name='description' content='this is my page'> 6 <meta name='keywords' content='keyword1,keyword2,keyword3'> 7 <meta htt

贝塞尔曲线与CSS3动画、SVG和canvas的应用

简介 贝塞尔曲线是可以做出很多复杂的效果来的,比如弹跳球的复杂动画效果,首先加速下降,停止,然后弹起时逐渐减速的效果. 使用贝塞尔曲线常用的两个网址如下: 缓动函数:http://www.xuanfengge.com/easeing/easeing/ cubic-bezier:http://cubic-bezier.com/ 如何用贝塞尔曲线画曲线 一个标准的3次贝塞尔曲线需要4个点:起始点.终止点(也称锚点)以及两个相互分离的中间点. 无论SVG, Canvas还是CSS3动画,都牵扯到这4个

HTML5 Canvas ( 贝塞尔曲线, 一片星空加绿地 ) quadraticCurveTo, bezierCurveTo

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>canvas</title> <script type="text/javascript" src="../js/jQuery.js"></script> <style type="text/css">

canvas绘制二次贝塞尔曲线----演示二次贝塞尔四个参数的作用

canvas中绘制二次贝塞尔曲线的方法为ctx.quadraticCurveTo(x1,y1,x2,y2); 四个参数分别为两个控制点的坐标.开始点即当前canvas中目前的点,如果想从指定的点开始,需要使用ctx.moveTo(x,y)方法 演示效果如下图 上代码: html <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title

Android利用canvas画各种图形(点、直线、弧、圆、椭圆、文字、矩形、多边形、曲线、圆角矩形)

1.首先说一下canvas类: Class OverviewThe Canvas class holds the "draw" calls. To draw something, you need 4 basic components: A Bitmap to hold the pixels, a Canvas to host the draw calls (writing into the bitmap), a drawing primitive (e.g. Rect, Path,