作者：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. Spring Cloud Feign 在调用接口类上，配置熔断 fallback后，输出异常

    Spring Cloud Feign 在调用接口类上,配置熔断 fallback后,出现请求异常时,会进入熔断处理,但是不会抛出异常信息. 经过以下配置,可以抛出异常: 将原有ErrorEncoder ...

  2. Charles----- 4.2.7 版本 破解方法

    打开Charles,点击help,选择registered........ 输入信息: Registered Name: https://zhile.io License Key: 48891cf20 ...

  3. 0ra-12170 tns 连接超时

    https://blog.csdn.net/zhaoxiangchong/article/details/8296980

  4. 【C#日期系列（三）】--C#获取某个月的第一个星期几的年月日

    需要获取某个月的第一个星期几的年月日 简单写了一个算法 #region 计算每月第一个星期1-7是各是几号 /// <summary> /// 计算每月第一个星期1-7是各是几号 /// ...

  5. 移动端禁止图片长按和vivo手机点击img标签放大图片,禁止长按识别二维码或保存图片【转载】

    移动端禁止图片长按和vivo手机点击img标签放大图片,禁止长按识别二维码或保存图片 img{ pointer-events: none; } 源文地址:https://www.cnblogs.com ...

  6. RSA私钥和公钥文件格式 (pkcs#1, pkcs#8, pkcs#12, pem)

    RSA私钥和公钥文件格式 (pkcs#1, pkcs#8, pkcs#12, pem) 2018年03月07日 11:57:22 阅读数:674 Format Name Description PKC ...

  7. 计算机网络应用层之cookie

    一.生活中的cookie 无论你知不知道Cookie是什么,在你的生活中,肯定有使用过它.还记得你使用浏览器浏览网页时,当你要登陆时,网页上有一个记住密码或自动登陆的选项,当你选择时,你就使用了Coo ...

  8. BZOJ1102 [POI2007]GRZ山峰和山谷 [BFS]

    题目传送门 GRZ山峰和山谷 Description FGD小朋友特别喜欢爬山,在爬山的时候他就在研究山峰和山谷.为了能够让他对他的旅程有一个安排,他想知道山峰和山谷的数量.给定一个地图,为FGD想要 ...

  9. 阿里云下Linux服务器安装JDK、Tomcat

    阿里云服务器相信大家越来越熟悉,刚开始接触,将基本的java软件安装做点记录: 1.配置阿里云的yum仓库: 获取仓库配置 wget http://mirrors.aliyun.com/repo/Ce ...

  10. 【51Nod 1238】最小公倍数之和 V3

    http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1238 设\(A(n)=\sum\limits_{i=1}^n\frac{ ...