作者：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. PyQt: eg2

    #coding:utf-8 from __future__ import division import sys from math import * from PyQt4 import QtCore ...

  2. hdu 5914(斐波拉契数列)

    Triangle Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total Su ...

  3. MIAC HW2

    MIAC的第二次作业,翻了一些fashion网站找了点灵感,重新设计了一下UI. 因为给的html里有nav之类的HTML5新特性,所以索性就不管IE的兼容了.chrome下的效果: FF下也差不多. ...

  4. 【PAT】1001. A+B Format (20)

    1001. A+B Format (20) Calculate a + b and output the sum in standard format -- that is, the digits m ...

  5. 安装Caffe时出现的错误

    一.error MSB3073类错误 一般是由于CommonSettings.props配置出现错误. 第一处是你安装CUDA的版本号,第二次是你安装cudnn的路径. 也可参照http://blog ...

  6. Hibernate （开源对象关系映射框架）

    一.基本介绍1.它对JDBC进行了非常轻量级的对象封装,它将POJO与数据库表建立映射关系,是一个全自动的orm(对象关系映射)框架,hibernate可以自动生成SQL语句,自动执行: Hibern ...

  7. 用vue-wechat-title为微信动态设置标题

    1.安装插件 cnpm install vue-wechat-title --save 2.在main.js中引入 Vue.use(require('vue-wechat-title')) 3.在路由 ...

  8. HTTP缓存了解（一）

    引言 HTTP/1.1 200 OK X-Powered-By: Express Content-Type: text/html; charset=utf-8 Content-Length: 3 ET ...

  9. 单纯用JS做的分页插件

    最近公司需要用到分页插件,由于市面上大多都是jQuery的分页插件,而且项目中有自己的工具类,所以说我在工具类中又添加了不依赖jQuery的分页插件,而且分页插件来说对DOM的操作也不是很多,就是用J ...

  10. redis环境搭建和java应用

    安装 连接 Java连接redis 下载 wget http://download.redis.io/releases/redis-4.0.9.tar.gz 解压移动 tar -xvf redis-4 ...