作者：i_dovelemon

来源：CSDN

日期：2015 / 7 / 11

主题：Interpolate,Bezier Curve

引言

在游戏开发中。诸如动画系统。路径计算等等操作，都会遇到对数值进行插值的问题。

从今天開始。将会陆陆续续的向大家介绍什么是插值技术？以及在计算机视频游戏开发中常常使用的插值技术有哪些。

插值技术（Interpolate Technology）。是通过数学计算的方式。将两个值之间的部分进行平滑过渡的一种技术方案。

这种技术能够在诸如动画系统等游戏内容中得到使用。就拿动画系统举例。如今的动画系统大都流行一种

url=-3Fh4jngiJPLBEr1rVZdeI4iDLYUNu8lcYID7S25flxFym68iLVfsMmikE8SwjqYEif3aSM6nKB7xwKdj63o-a">基于关键帧的动画。

美术人员在一些动画制作软件中。如flash。制作好动画的关键帧。然后就将该动画导出成一个文件。

这个文件里仅仅保存了每个动画的关键运动部分。

那么。当我们在游戏中使用的时候，就须要通过程序来补充每两个关键帧之间的帧状态数据。这种通过两个首尾值来构建中间部分值的技术就称之为插值技术。本文就会向大家展示当中一种常常使用的插值技术的数学技术。它的实际应用将在兴许章节向大家展示。



Bezier Curve

Bezier Curve，即为贝塞尔曲线。

它是一些曲线几何的总称。在本文中，将会向大家展示三种Bezier Curve。各自是Linear Bezier Curve, Quadratic Bezier Curve, Cubic Bezier Curv。

这三种Bezier Curve都是经经常使用到的曲线。而且各自是一次曲线。二次曲线和三次曲线。其它更高维度的曲线将不再讲述。关于Bezier Curve的具体解说。大家能够看下这篇Wiki：Bezier
Curve.


Linear Bezier Curve

一次Bezier Curve，被称为Linear Bezier Curve，它实际上指的就是一条直线。并没有不论什么的弯曲度。所以。使用一次Bezier Curve进行插值的技术。又被称为值Linear Interpolating(线性插值)。线性插值技术的应用十分广泛。除了在动画系统中使用到之外。在3D图形的光栅化阶段也用来对顶点数据和纹理数据进行插值计算。以下给出线性插值的公式：
B(t) = p0 + (p1 - p0) * t [0<=t <= 1]            (1)
上面公式中的t。表示了p0和p1之间某个时刻。而B(t)为此时曲线的状态。由于是直线，所以这个非常easy理解。



Quadratic Bezier Curve

二次曲线的公式是在一次曲线的基础上推导来的。数学推导部分相同能够到上面的wiki中找到。这里将直接给出公式：
B(t) = (1 - t) ^2 * p0 + 2 * (1 - t) * t * p1 + t^2 * p2      (2)


Cubic Bezier Curve

三次曲线的公式例如以下所看到的：
B(t) = (1 - t)^3 * p0 + 3 * (1 - t) ^2 * t * p1 + 3 * (1 - t ) * t^2 * p2 + t^3 * p3      (3)


绘制Bezier Curve

以下的代码演示了怎样绘制Linear Bezier，Quadratic Bezier以及Cubic Bezier。代码使用的是javascript来编写：
<span style="font-family:Microsoft YaHei;"><html>

	<script>

		var _2dContext = 0;

		/*Begin Solve Bezier Curve method*/

		function LinearBezierCurve(p0,p1,t)

		{

			return p0 + (p1 - p0) * t;

		}

		function QuadBezierCurve(p0,p1,p2,t)

		{

			var current = 0;

			var InvT = 1 - t;

			var InvT_2 = InvT * InvT;

			var T2 = t * t;

			current = InvT_2 * p0;

			current += 2 * InvT * t * p1;

			current += T2* p2;

			return current;

		}

		function CubicBezierCurve(p0,p1,p2,p3,t)

		{

			var current = 0;

			var InvT = 1 - t;

			var InvT_2 = InvT * InvT;

			var InvT_3 = InvT_2 * InvT;

			var T2 = t * t;

			var T3 = T2 * t;

			current += InvT_3 * p0;

			current += 3 * InvT_2 *t * p1;

			current += 3 * InvT * T2 * p2;

			current += T3 * p3;

			return current;

		}

		/*End Solve Bezier Curve*/

		//Draw a point in the cavans

		function DrawPoint(context,x,y,color)

		{

			context.beginPath();

			context.moveTo(x,y);

			context.lineTo(x + 1,y);

			context.closePath();

			context.strokeStyle = color;

			context.stroke();

		}

		/*Begin Draw Bezier Curve*/

		function DrawLinearBezierCurve(context,p0_x,p0_y,p1_x,p1_y,step,color)

		{

			var t = 0;

			for(;t<=1;t+=step)

			{

				//Calculate the new position

				var current_x = LinearBezierCurve(p0_x,p1_x,t);

				var current_y = LinearBezierCurve(p0_y,p1_y,t);

				//Draw the point

				DrawPoint(context,current_x,current_y,color);

			}

		}

		function DrawQuadBezierCurve(context, p0_x,p0_y,p1_x,p1_y,p2_x,p2_y,step,color)

		{

			var t = 0;

			for(;t<=1;t+=step)

			{

				//Calculate the new position

				var current_x = QuadBezierCurve(p0_x,p1_x,p2_x,t);

				var current_y = QuadBezierCurve(p0_y,p1_y,p2_y,t);

				//Draw the point

				DrawPoint(context,current_x,current_y,color);

			}

		}

		function DrawCubicBezierCurve(context,p0_x,p0_y,p1_x,p1_y,p2_x,p2_y,p3_x,p3_y,step,color)

		{

			var t = 0;

			for(;t<=1;t+=step)

			{

				//Calculate the new position

				var current_x = CubicBezierCurve(p0_x,p1_x,p2_x,p3_x,t);

				var current_y = CubicBezierCurve(p0_y,p1_y,p2_y,p3_y,t);

				//Draw the point

				DrawPoint(context,current_x,current_y,color);

			}

		}

		/*End Draw Bezier Curve*/

		function gameInit()

		{

			//Get the canvas context

			_2dContext = document.getElementById("canvas").getContext("2d");

			//enable game loop

			setInterval(gameLoop,100.0);

		}

		function gameLoop()

		{

			//Clear the canvas

			_2dContext.clearRect(0,0,1024,768);

			//Draw the linear bezier curve

			DrawLinearBezierCurve(_2dContext,100,100,1000,100,0.001,"rgb(255,0,0)");

			//Draw the Quadratic bezier curve

			var qp1_x = Math.random() * 1024;

			var qp1_y = Math.random() * 768;

			DrawQuadBezierCurve(_2dContext,100,400,qp1_x,qp1_y,1000,400,0.001,"rgb(0,255,0)");

			//Draw the Cubic bezier curve

			var cp1_x = Math.random() * 1024;

			var cp1_y = Math.random() * 768;

			var cp2_x = Math.random() * 1024;

			var cp2_y = Math.random() * 768;

			DrawCubicBezierCurve(_2dContext,100,600,cp1_x,cp1_y,cp2_x,cp2_y,1000,600,0.001,"rgb(0,0,255)");

		}

	</script>

	<body>

	<body onLoad="gameInit();">

		<canvas id="canvas" width="1024" height="768">

			您的浏览器不支持Canvas特性！！。请使用Chrome,Firefox!!

		</canvas>

	</body>

</html></span>


插值技术之Bezier插值(1) -- Bezier Curve的更多相关文章

  1. 多项式函数插值：全域多项式插值（一）单项式基插值、拉格朗日插值、牛顿插值 [MATLAB]

    全域多项式插值指的是在整个插值区域内形成一个多项式函数作为插值函数.关于多项式插值的基本知识,见“计算基本理论”. 在单项式基插值和牛顿插值形成的表达式中,求该表达式在某一点处的值使用的Horner嵌 ...

  2. 空间插值文献阅读（Geostatistical approaches for incorporating elevation into the spatial interpolation of rainfall）

    空间插值技术应用必读论文---P. Goovaerts, Geostatistical approaches for incorporating elevation into the spatial ...

  3. 从零开始一起学习SLAM | 用四元数插值来对齐IMU和图像帧

    视觉 Vs. IMU 小白:师兄,好久没见到你了啊,我最近在看IMU(Inertial Measurement Unit,惯性导航单元)相关的东西,正好有问题求助啊 师兄:又遇到啥问题啦? 小白:是这 ...

  4. angularjs——插值字符串

    一.何为插值字符串? 其实插值字符串的意思就是:拥有字符插值标记的字符串.如: hello,{{ to }}....字符插值标记:相当于我们平时在字符串替换中使用到的占位符.上面的例子中的{{to}} ...

  5. 建模算法（八）——插值

    插值:求过已知有限个数据点的近似函数 拟合:已知有限个数据点,求近似函数,不要求过已知数据点,只要求在某种意义下在这些点的误差最小 (一)插值方法 一.拉格朗日多项式插值 1.插值多项式 就是做出一个 ...

  6. 对Vector3.Lerp 插值的理解

    有时,我们在做游戏时会发现有些跟随动作不够圆滑或者需要一个缓冲的效果,这时,一般会考虑到插值.所以对插值的理解是必需的.(比如摄像机跟随主角) 插值是数学上的一个概念,在这里用公式表示就是:from  ...

  7. h.264 fast,1/2,1/4像素运动估计与插值处理

    Hadamard Transform 在1/2,1/4像素运动估计这一阶段中,对于像素残差,可以选择采用哈达玛变换来代替离散余弦变换进行高低频的分离. 优点:哈达玛矩阵全是+1,-1,因此只需要进行加 ...

  8. (转)Unity3D 之插值计算

    在unity3D中经常用线性插值函数Lerp()来在两者之间插值,两者之间可以是两个材质之间.两个向量之间.两个浮点数之间.两个颜色之间,其函数原型如下: Material.Lerp 插值 funct ...

  9. arcgis api for js实现克里金插值渲染图--不依赖GP服务

    本篇的亮点是利用kriging.js结合arcgis api for js,实现克里金插值渲染图,截图如下: 具体实现的思路如下: 1.kriging.js开源js,可以实现针对容器canvas克里金 ...

随机推荐

  1. pip安装模块时：error: command 'gcc' failed with exit status 1

    用安装python模块出现error: command 'gcc' failed with exit status 1 问题: gcc编译缺少模块 解决方法: yum install gcc libf ...

  2. go语言入门(二)

    Go 语言变量 Go 语言变量名由字母.数字.下划线组成,其中首个字母不能为数字. 声明变量的一般形式是使用 var 关键字: var identifier type 变量声明 第一种,指定变量类型, ...

  3. 苹果容器超出内容overflow滑动卡顿问题

    -webkit-overflow-scrolling:touch; 就这么一段代码,加载需要滚动的容器css样式中.因为苹果的硬件加速产生的后果....

  4. HDU 17111 Number Sequence（KMP裸题）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1711 题目大意:给你两个数字数组a和b,若b是a的子序列则输出b在a中第一次出现的位置,否则输出-1. ...

  5. C++ 静多态与动多态

    多态是指通过单一的标识支持不同的特定行为的能力. C++中有两种多态,称为动多态(运行期多态)和静多态(编译期多态),而静多态主要通过模板来实现,宏也是实现静多态的一种途径. 动多态在C++中是通过虚 ...

  6. 【LOJ】#2174. 「FJOI2016」神秘数

    题解 这道题的结论很显然= = 就是暴力求的话,把一个区间的数排一下序,如果当前这个数大于前面所有数的前缀和+1,那么前缀和+1即我们所求的答案 那么我们设置一个当前答案(初始为1),在主席树上求出来 ...

  7. QT在windows平台安装使用MInGW编译

    首先,Qt 5.9 的安装包与之前相比,不再区分 VS 版本和 MinGW 版本,而是全都整合到了一个安装包中.因此,与之前的安装包相比,体积也是大了不少,以前是 1G 多,现在是 2G 多. 双击启 ...

  8. REST API 支持方式

    1.JSONPlaceholder 是一个提供免费的在线 REST API 的网站,我们在开发时可以使用它提供的 url 地址测试下网络请求以及请求参数.或者当我们程序需要获取一些假数据.假图片时也可 ...

  9. powershell 性能测试小脚本

    powershell 性能测试: 转载请注明: 仰望高端玩家的小清新 http://www.cnblogs.com/luruiyuan/ 1. 将待测试的脚本封装在代码块中 2. 使用  Get-Ch ...

  10. Python内置函数__slots__

    ''' 1.__slots__是什么:是一个类变量,变量值可以是列表,元祖,或者可迭代对象,也可以是一个字符串(意味着所有实例只有一个数据属性) 2.引子:使用点来访问属性本质就是在访问类或者对象的_ ...