📄 水波的特效.htm
字号:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0057)http://mays.soage.com/develop/effect/200111/dx_Ripple.htm -->
<HTML><HEAD><TITLE>水波的特效</TITLE><!-- #BeginTemplate "/Templates/开发技术.dwt" --><!-- #BeginEditable "doctitle" --><!-- #EndEditable -->
<META content="text/html; charset=gb2312" http-equiv=Content-Type><!-- #BeginEditable "link" --><LINK
href="水波的特效.files/main.css" rel=stylesheet><!-- #EndEditable -->
<SCRIPT language=JavaScript>window.screen.width>800 ? document.write('<link href="../../../style/main_1024x768.css" rel=stylesheet>'):document.write('<link href="../../../style/main.css" rel=stylesheet>')</SCRIPT>
<META content="MSHTML 5.00.2614.3500" name=GENERATOR></HEAD>
<BODY><!-- #BeginEditable "%B5%BC%BA%BD%CC%F5" --><A name=7758258></A>
<SCRIPT language=JavaScript src="水波的特效.files/develop.logo.3.js"></SCRIPT>
<TABLE align=center border=0 cellPadding=3 cellSpacing=0 width="99%">
<TBODY>
<TR class=BGRed>
<TD width="74%">
<SCRIPT language=JavaScript src="水波的特效.files/menu.4.js"></SCRIPT>
</TD>
<TD align=middle width="26%">
<SCRIPT language=JavaScript src="水波的特效.files/login.4.js"></SCRIPT>
|
<SCRIPT language=JavaScript src="水波的特效.files/forum.js"></SCRIPT>
</TD></TR></TBODY></TABLE>
<TABLE align=center bgColor=#000000 border=0 cellPadding=0 cellSpacing=0
height=1 width="99%">
<TBODY>
<TR>
<TD width="100%"></TD></TR></TBODY></TABLE><!-- #EndEditable -->
<TABLE align=center bgColor=#000000 border=0 cellPadding=2 cellSpacing=0
width="99%">
<TBODY>
<TR class=BGGray>
<TD width="100%"> <!-- #BeginEditable "%B6%A8%CE%BB" -->
<SCRIPT language=JavaScript src="水波的特效.files/effect.L.js"></SCRIPT>
<!-- #EndEditable --></TD></TR></TBODY></TABLE><BR>
<TABLE align=center border=0 cellPadding=0 cellSpacing=0 width="99%">
<TBODY>
<TR>
<TD class=BGRed width="1%"></TD>
<TD class=BGRed vAlign=top width="17%"><!-- #BeginEditable "%B5%BC%BA%BD" -->
<SCRIPT language=JavaScript src="水波的特效.files/effect.M.js"></SCRIPT>
<!-- #EndEditable --></TD>
<TD class=BGGray width="1%"></TD>
<TD width="1%"></TD>
<TD bgColor=#ff9933 width=0%></TD>
<TD colSpan=3 vAlign=top width="84%">
<TABLE border=0 cellPadding=2 cellSpacing=1 width="100%">
<TBODY>
<TR>
<TD class=BGRed width="100%"><B>>> </B><!-- #BeginEditable "%B1%EA%CC%E2" --><A class=YellowLink
href="http://mays.soage.com/develop/effect/200111/dx_Ripple.htm">水波的特效</A> 2001-12-16
<A class=BlackLink href="http://imagic3d.com/"
target=_blank>Imagic工作室</A> <A class=BlackLink
href="mailto:wangkkk@163.net">王正盛</A> <!-- #EndEditable -->
<TABLE align=center bgColor=#ff9933 border=0 cellPadding=0
cellSpacing=0 width="100%">
<TBODY>
<TR>
<TD width="100%"><IMG height=1
width=1></TD></TR></TBODY></TABLE></TD></TR>
<TR vAlign=top>
<TD class=BGGrayMain width="100%"><!-- #BeginEditable "%C4%DA%C8%DD" --><BR> <B>目
录</B><BR> 1 <A class=BlackLink
href="http://mays.soage.com/develop/effect/200111/dx_Ripple.htm#1.0">引言</A><BR> 2
<A class=BlackLink
href="http://mays.soage.com/develop/effect/200111/dx_Ripple.htm#2.0">推导计算波幅的公式</A><BR> 3
<A class=BlackLink
href="http://mays.soage.com/develop/effect/200111/dx_Ripple.htm#3.0">进行渲染</A><BR> 4
<A class=BlackLink
href="http://mays.soage.com/develop/effect/200111/dx_Ripple.htm#4.0">增加波源</A><BR><BR>
<HR align=center noShade SIZE=1 width="95%">
<A
name=1.0></A><BR><B>1、引言</B><BR> 看到下面这幅动画，你也许不会相信它其实是用电脑做出来的，这就是“水波”特效的魅力所在。这个小动画是从程序的执行画面中抓出来的，如果你想亲自执行一下源程序，看看实际的效果，请先下载程序一看。在介绍编程之前，先让我们来回顾一下在高中的物理课上我们所学的关于水波的知识。水波有如下几个特性：<BR><BR>
<TABLE align=center border=0 cellPadding=2 cellSpacing=0
class=BGRed>
<TBODY>
<TR align=middle>
<TD><IMG height=100 src="水波的特效.files/Ripple-1.gif"
width=132></TD></TR>
<TR align=middle>
<TD><FONT color=#cccccc><B>图1
水波</B></FONT></TD></TR></TBODY></TABLE>
<UL>
<LI><B>扩散</B>：当你投一块石头到水中，你会看到一个以石头入水点为圆心所形成的一圈圈的水波，这里，你可能会被这个现象所误导，以为水波上的每一点都是以石头入水点为中心向外扩散的，这是错误的。实际上，水波上的任何一点在任何时候都是以自己为圆心向四周扩散的，之所以会形成一个环状的水波，是因为水波的内部因为扩散的对称而相互抵消了。
<LI><B>衰减</B>：因为水是有阻尼的，否则，当你在水池中投入石头，水波就会永不停止的震荡下去。
<LI><B>水的折射</B>：因为水波上不同地点的倾斜角度不同，所以，因为水的折射，我们从观察点垂直往下看到的水底并不是在观察点的正下方，而有一定的偏移。如果不考虑水面上部的光线反射，这就是我们能感觉到水波形状的原因。
<LI><B>反射</B>：水波遇到障碍物会反射。
<LI><B>衍射</B>：忽然又想到这一点，但是在程序里却看不到，如果能在水池中央放上一块礁石，或放一个中间有缝的隔板，那么就能看到水波的衍射现象了。
</LI></UL> 好了，有了这几个特性，再运用数学和几何知识，我们就可以模拟出真实的水波了。但是，如果你曾用3D
MAX做过水波的动画，你就会知道要渲染出一幅真实形状的水波画面少说也得好几十秒，而我们现在需要的是实时的渲染，每秒种至少也得渲染20帧才能使得水波得以平滑的显示。考虑到电脑运算的速度，我们不可能按照正弦函数或精确的公式来构造水波，不能用乘除法，更不能用SIN、COS之类的函数，只能用一种取近似值的快速算法，尽管这种算法存在一定误差，但是为了满足实时动画的要求，我们不得不这样做。<BR> 首先我们要建立两个与水池图象一样大小的数组：<BR><BR> <SPAN
class=ColorCode>buf1[PoolWidth*PoolHeight]<BR> buf2[PoolWidth*PoolHeight]</SPAN><BR><BR> 其中PoolWidth是水池图象的象素宽度、PoolHeight是水池图象的象素高度。它们用来保存水面上每一个点的前一时刻和后一时刻波幅数据，因为波幅也就代表了波的能量，所以以后我们称这两个数组为波能缓冲区。水面在初始状态时是一个平面，各点的波幅都为0，所以，这两个数组的初始值都等于0。<BR><A
name=2.0></A><BR><B>2、推导计算波幅的公式</B><BR> 我们假设存在这样一个一次公式，可以在任意时刻根据某一个点周围前、后、左、右四个点以及该点自身的振幅来推算出下一时刻该点的振幅，那么，我们就有可能用归纳法求出任意时刻这个水面上任意一点的振幅。如图2。<BR><BR>
<TABLE align=center border=0 cellPadding=2 cellSpacing=0
class=BGRed>
<TBODY>
<TR align=middle>
<TD><IMG height=114 src="水波的特效.files/Ripple-2.gif"
width=129></TD></TR>
<TR align=middle>
<TD><FONT
color=#cccccc><B>图2</B></FONT></TD></TR></TBODY></TABLE><BR> 你可以看到，某一时刻，X0点的振幅除了受X0点自身振幅的影响外，同时受来自它周围前、后、左、右四个点（X1、X2、X3、X4）的影响（为了简化，我们忽略了其它所有点），而且，这四个点对a0点的影响力可以说是机会均等的。那么我们可以假设这个一次公式为：<BR><BR>
<TABLE align=center border=0 cellPadding=0 cellSpacing=0
class=BGWhite width="100%">
<TBODY>
<TR>
<TD>
<DIV align=center><SPAN class=ColorCode>X0' = a (X1+X2+X3+X4)
+ bX0</SPAN> （<SPAN class=English>Formula -
1</SPAN>）</DIV></TD></TR></TBODY></TABLE><BR> a、b为待定系数，X0'为0点下一时刻的振幅。X0、X1、X2、X3、X4为当前时刻的振幅。下面我们来求解a和b。假设水的阻尼为0。在这种理想条件下，水的总势能将保持不变。也就是说在任何时刻，所有点的振幅的和保持不变。那么可以得到下面这个公式：<BR><BR>
<TABLE align=center border=0 cellPadding=0 cellSpacing=0
class=BGWhite width="100%">
<TBODY>
<TR>
<TD>
<DIV align=center><SPAN class=ColorCode>X0' + X1' + ... + Xn'
= X0 + X1 + ... +
Xn</SPAN></DIV></TD></TR></TBODY></TABLE><BR> 将每一个点都象公式1那样计算，然后代入上式，得到：<BR><BR>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -