作者：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. final修饰的变量是引用不能改变还是引用的对象不能改变

    我们都知道final修饰变量时 会变为常量,但是使 用final关键字修饰一个变量时,是引用不能变,还是引用的对象不能变? 下面让我们来看这段代码: /** * 验证final修饰的变量是引用不能变, ...

  2. jquery li a 样式

    jQuery(".CwebtopNavContainer").find("li:last a").css("color","red ...

  3. Lr中脚本的迭代次数和场景运行时间的关系

    Loadrunner中脚本的迭代次数和场景运行时间的关系 LR 的Vugen和controller中迭代是这样的: 当场景的持续时间为“运行至结束”时,以Vugen中设置的迭代次数为准 当场景的持续时 ...

  4. CentOS下Redis安装与配置

    本文详细介绍redis单机单实例安装与配置,服务及开机自启动.如有不对的地方,欢迎大家拍砖o(∩_∩)o (以下配置基于CentOS release 6.5 Final, redis版本3.0.2 [ ...

  5. EOJ 3262 黑心啤酒厂

    最大公约数. 计算$x$与$i$的最小公倍数,就是这些人至少需要喝几杯,最小公倍数除以$x$就是要买几瓶. #include <cstdio> #include <cmath> ...

  6. 洛谷P2704 [NOI2001]炮兵阵地 [状压DP]

    题目传送门 炮兵阵地 题目描述 司令部的将军们打算在N*M的网格地图上部署他们的炮兵部队.一个N*M的地图由N行M列组成,地图的每一格可能是山地(用“H” 表示),也可能是平原(用“P”表示),如下图 ...

  7. java 数组的基本概念

    1.数组的基本概念 数组指的是一组相关变量的集合.例如:如果说现在要定义100个整型变量,如果按照我们以前的思路,我们可能这样定义: public class demo { public static ...

  8. PlayMaker的特殊事件FINISHED

    PlayMaker的特殊事件FINISHED   在PlayMaker中,每个状态机都有一个特殊事件START.当启用状态机,触发START事件.其中,每个状态都可以有一个特殊事件FINISHED.当 ...

  9. django celery(QQ蓝鲸)

    官方:http://www.celeryproject.org 文档:http://docs.jinkan.org/docs/celery/index.html FAQ:http://docs.cel ...

  10. 【十大经典数据挖掘算法】k

    [十大经典数据挖掘算法]系列 C4.5 K-Means SVM Apriori EM PageRank AdaBoost kNN Naïve Bayes CART 1. 引言 k-means与kNN虽 ...