作者：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. 如何提交代码到CEPH Repo。 顺便庆祝下，提交了第一个ceph pull request。实现了从0到1的突破

    庆祝一下!经过社区老司机的带路,昨天提交了第一个ceph pull request.实现了从0到1的突破,希望再接再厉提交更多代码到社区,为社区发展贡献一点自己力量. 提交的第一个被社区fix的bug ...

  2. android4.0 锁屏实现（转）

    转载请表明出处:http://blog.csdn.net/wdaming1986/article/details/8837023 好了,言归正传,说说锁屏了,其实把锁屏做成apk的形式,会引起很多问题 ...

  3. git上了github又要上码云。

    <h1>关联远程仓库:github为例</h1> 1.首先在用户目录下找到.ssh 2.如果.ssh文件夹里没有id_rsa和id_rsa.pub文件,或者也没有.ssh文件夹 ...

  4. C++ 字符串基本操作

    C++ 规定,不能直接进行数组名的赋值,因为数组名是一个常量,而结构类型的变量可以赋值,不同结构体的变量不允许相互赋值,即使这两个变量可能具有相同的成员.在程序中不能同时出现无参构造函数和带有全部默认 ...

  5. 查找无序数组中第K大的数

    思路: 利用快速排序的划分思想 可以找出前k大数,然后不断划分 直到找到第K大元素 代码: #include <iostream> #include <algorithm> # ...

  6. php中var_dump()函数

    var_dump() void var_dump ( mixed expression [, mixed expression [, ...]] ) var_dump()方法是判断一个变量的类型与长度 ...

  7. 洛谷P2408 不同字串个数 [后缀数组]

    题目传送门 不同字串个数 题目背景 因为NOI被虐傻了,蒟蒻的YJQ准备来学习一下字符串,于是它碰到了这样一道题: 题目描述 给你一个长为N的字符串,求不同的子串的个数 我们定义两个子串不同,当且仅当 ...

  8. Python并发编程-一个简单的多进程实例

    import time from multiprocessing import Process import os def func(args,args2): #传递参数到进程 print(args, ...

  9. Java变量和运算符

    1.变量 变量概述 什么是变量?变量是一个内存中的小盒子(小容器),容器是什么?生活中也有很多容器,例如水杯是容器,用来装载水:你家里的大衣柜是容器,用来装载衣裤:饭盒是容器,用来装载饭菜.那么变量是 ...

  10. Java常用工具类之时间转换（注释乱码，全）

    package com.wazn.learn.util; import java.text.ParseException; import java.text.SimpleDateFormat; imp ...