三维网站动态形状及其视觉体验——基于Superformula公式的研究

陈 童，张轩颖

(哈尔滨工业大学 媒体技术与艺术系，哈尔滨 150001)

三维网站动态形状及其视觉体验
——基于Superformula公式的研究

陈 童，张轩颖

(哈尔滨工业大学 媒体技术与艺术系，哈尔滨 150001)

相对于传统二维形式的网站，三维网站提供了更高仿真度的立体影像和更高自由度的交互方式，为用户提供了全新的视觉和交互体验。但同时也要求三维网站中的三维形状要具有比较高的拟真度、传输速度和生成速度。采用基于Superformula公式的建模方法，具有单一公式生成非对称三维动态形状的能力，可以满足受众对于在互联网上浏览三维网站的速度及图像质量的要求，非常适合生成三维网站中的三维形状。基于Superformula公式生成的三维动态形状，将给受众带来前所未有的积极视觉体验。

Superformula;动态形状;三维网站;视觉体验

随着网络技术的发展，网站受众希望能以更真实、更自然的方式获得信息和认知世界，同时网站也希望能够以更全面、更逼真的方式来展示自己的技术和自己的创新。在这样的背景下三维网站技术应运而生。随着Flash平台技术、WebGL技术的不断发展和逐渐成熟，三维网站的视觉效果和功能也不断增强，这其中尤其以2010年上海世界博览会的“网上世博会”为代表。三维网站为用户提供了极具视觉艺术感的三维界面、自然流畅的交互体验以及多种感觉交错的沉浸感，不论从技术上还是艺术效果上都能带给用户新的体验［1］57－60。因此，开发能够高质量生成和显示模型且快速传输文件的技术来创建三维网站中的动态形状，是三维网站设计者们需要探究的现实课题。

一、现有三维网站中三维形状建模技术分析

(一)三维网站对网页内三维模型的要求

随着计算机的发展，用户对图形效果和交互过程的真实感要求不断提高，同时要求实时绘制运动物体的位置和姿态，并随着用户视点的改变而快速刷新画面。这些需求使得三维网站中的三维建模成为重要而又极富挑战性的研究领域。

目前，评价三维场景建模的技术指标主要有［1］57－60:

一是精确度，这是衡量模型表示现实物体精确程度的指标。

二是显示速度，许多应用对显示时间有较大限制，在交互式应用系统中显示速度应该越快越好。

三是运行效率，各种运动以及多物体的实时碰撞检测等都是经常发生的事件，事件的运行效率必须符合真实感的要求。

四是易用性，要在保证模型精确度的同时让建模者更容易地构造优质模型。

(二)现有三维形状建模技术分析

构建三维网站的关键技术主要包含三个部分:三维建模技术、实时渲染技术以及交互技术。其中三维建模技术是构建三维网站的重要技术环节。总结现有应用于三维网站的建模技术方法，可以将其分为三大类:基于图像的三维形状建模技术、基于几何模型的三维形状建模技术和基于编程算法的三维形状建模技术。

1.基于图像的三维形状建模技术分析

以全景图技术为核心，用照相机采集的静态图像或摄像机采集的动态图像作基础数据，经过图像处理生成仿真的三维模型［2］。

此建模方法可以快速地生成真实感很强的立体场景，不需要经过复杂的建模过程，就能实时地显示构建的场景。因而不需要使用额外的硬件加速就可获得具有较强真实感的图像和较为满意的交互速度。但是这种建模方法需要高性能的照相与摄影装备，前期的硬件投入较大。此外，在漫游时可能会导致图像发生畸变或产生裂缝，更重要的是这种建模方法不能实现真正的互动，严格意义上它是属于准三维的虚拟展示技术。

2.基于几何模型的三维形状建模技术分析

以几何实体建构三维模型或者环境，几何实体可采用不同的软件建立模型，之后进行纹理映射、模型的可见消隐和控制参数的设定等步骤之后，设置动画，以统一的格式渲染输出［3］43－44。

由于基于几何模型的建模技术产生的模型立体感强、模型精细度高，而且相应开发得相对比较成熟，使得此类建模技术有相对比较广泛的应用。但是由于各种条件的限制，这种建模方法花费的时间较长，而且为了保证模型的精细度以及高仿真度，模型文件较大，造成传输的速度较低。这使得基于几何模型的三维形状建模技术在普通客户机上实现三维网站的流畅显示相对困难。

3.基于编程算法的三维形状建模技术分析

通过程序来实时绘制三维模型，并实现对模型的控制，例如移动、旋转、缩放等操作。使用编程算法制作的模型具有比几何建模更自由的互动可能性［3］43－44。

基于编程算法技术生成的三维模型文件尺寸较小，这是因为在算法作图中为了减少数据的存储量，实际并不会保存模型中所有点的数据。

较小的文件尺寸满足了传输要求，但相应地它对客户端计算机的计算能力也提高了要求。因为越平滑的模型数据量就越大，对计算机处理数据的能力要求就越高，相应显示图形和计算光影效果的能力也要提高。

综上所述，可以看出目前三维网站的建模技术所产生的效果并不理想，首先，三维网站中的三维元素多为基本几何体或构成，仿真度和精细度不能满足用户的视觉要求;其次，较为复杂的三维场景往往文件较大，传输速度慢，从而大大降低了虚拟场景的应用效率;再次，许多客户端计算机缺少高速图形加速设备，或者计算能力不足，使得显示复杂三维场景的速度比较慢，影响了用户的沉浸体验。

以上这些问题都对三维网站沉浸感的形成和审美体验造成比较大的消极影响。相关研究主要集中在模型优化及算法整合方面，而比利时数学家Johan Gielis提出了一种基于Superformula公式的建模方法。这种基于单一公式建模方法的能力已经在SIGGRAPH等会议上获得了肯定。

二、应用Superformula公式创建三维形状的优势

2003年Johan Gielis在美国植物学杂志上发表特约文章，首次提出了Superformula公式。Johan Gielis提出这个公式的目的在于提出一种新的几何方法用来建模和理解不同的、独立的自然形状和人造形状。他在这篇文章中展示了许多使用 Superformula 公式绘制的图形［4］246－251。

Superformula公式是建立在椭圆公式的基础上，对Superellipses公式普遍化得出的结果，其二维公式如下:

使用Superformula公式既可以创建逼真的自然界存在的形状，也可以用来创建各种抽象的艺术造型。Johan Gielis认为Superformula公式可以用来创建“自然的形状，还有抽象形状，如圆管、椭圆管、常规多边形与3D球体、立方体以及任何你可以创建的形状。”［4］246－251

图1 Superformula公式生成的三维模型

(一)Superformula公式创建三维形状的基本思想

“正如公式和数字可以昭示整个世界的和谐，自然哲学的精神，灵魂和诗意皆植根于数学之美”［5］。Johan Gielis让我们拥有了对自然形状进行统一几何描述的方法。

Superformula公式是根据19世纪法国几何学家 Gabriel Lamé定义的 Supercircles和 Superellipses公式普遍化而来的。解决了Superellipses和Supercircles公式的对称问题。现在这种不对称图形，例如五边形和海星、三角形和玫瑰花及花萼、叶片等，都可以用一个简单的公式来表现。

使用Superformula公式创建三维模型，类似于基于编程算法的建模技术，但是由于后者不是使用方程而使用过程来对形状进行建模，所以两者有着本质上的不同。使用Superformula公式进行建模的基本思路比较简单，主要是通过调节公式中的几个参数来创建形状。Superformula公式通过控制参数m对角度进行细分而突破了其他公式在对称性上的局限，从而可以建模更加复杂的图形。当m为零时，便得到一系列的圆;当m=4且n1=n2=n3=2时，便得到了椭圆公式;当m是正数但不是一个整数时，由于只循环一个周期则不会产生封闭的形状;如果m是一个有理数，形状将在许多次循环后封闭。使用无理数则不会生成重复的形状样式［4］246－251。

目前，应用Superformula公式在网页上创建三维动态形状的实验也已经展开。用户可以通过调节滑杆来控制参数大小，进而实时的改变Superformula公式创建的形状。不仅如此，该动态形状还可以根据用户输入音乐文件的频谱自动调整参数，随着音乐的播放自动变换形状。

(二)应用Superformula公式创建三维形状的优势

Johan Gielis在发现Superformula公式之后不久就将其应用于实际应用中，开发了系列软件Supergraphx，展示了Superformula公式在计算机图形学领域的应用潜力，以及在互联网上推进二维和三维图形艺术的潜在优势。Supergraphx系列的所有软件都是基于Superformula公式，该数学算法大幅简化了产生二维和三维形状的计算机代码，提高了工作效率。该系列软件获得2004年的印艺创新技术奖，评委认为该软件除了有助于提高设计师的创造力之外，还通过有效压缩文件大小而显著提高了工作效率，文件大小降幅高达1 000倍，使人们可以更加容易地制作和转移图形文件。

从Superformula公式的简练程度和生成能力可以看出，使用Superformula公式创建的形状非常适合于在互联网上进行传播。首先，生成三维模型的仿真度较高。从现有的例子来看，使用该公式可以逼真地模仿各种自然形状，而且Supergraphx软件对纹理的处理也令人满意，生成的模型基本可以满足用户对三维网站内模型的视觉要求;第二，结果文件的轻量化。使用该公式创建形状的文件非常小，只需要几KB的存储空间，这已经达到了纯文本文件的级别，从而非常便于在互联网上传播;第三，生成三维模型的计算密度较小。由于使用单一公式进行计算，即便是复杂模型也只是对同一公式的不同参数进行调整，使得它不同于编程算法的过程建模，使用Superformula公式创建形状的方法对客户计算机的计算能力要求相对较低;第四，运行效率高。由于具有结果文件轻量化和计算密度较小的优势使得模型可以快速在客户端上显示，用户与其进行交互时也能迅速做出反应，从而满足了用户对于交互体验的要求;第五，创建模型的灵活性非常强。对使用Superformula创建的图形进行调整时，只需调整现有的参数，而不需要重新编码或者重建模型，使得后期对网站进行维护变得相对更加容易。

三、Superformula公式生成的动态形状产生积极视觉体验

人类思维是从直接的经验出发，也可以说是从审美出发进一步来抽象化现实存在，并通过这种抽象化来认识和把握世界。这种抽象化的功能是具有普遍性。数学作为一种哲学，它无疑也是一种抽象化方法，它可以游走于自然哲学与艺术之间，人的审美世界和认识世界通过数学中的几何方法而相互连通［6］。几何学作为数学的一部分，其所研究的对象之一的形状即是人们视觉中的一种符号。在生活中，人们往往依靠一些形状符号去观察世界，这种视觉过程就是一种积极的活动。

(一)三维网站中立体形状产生积极视觉过程

阿恩海姆认为，一个纯粹平面的、二维的图像是根本不存在的，“一个所谓单一维度的视觉过程似乎是不能被正常人的大脑察觉到的。……即便仅仅是一个光点在一片黑暗中左右晃动，或者某个点在空白屏幕上不断活跃着，都会被知觉为在一个完整的空间里的运动，或与这个空间有着某种关系的运动”［7］。可以得知，三维立体形状的形式与空间是相互联系的，当人们在认识空间时就有了对立体的感觉。从形态的解析规律可以看出，人们对立体形体的认知不是依靠视觉对轮廓的感应，而是靠立体的量感、体积以及空间感得来的。主体通过透视形变、明暗变化、空间位置和向背等因素引导我们的视线在空间中游移，由于主要是眼睛肌肉参与了视觉审美运动，所以在审美过程中，动觉方式是主要方式［8］。

网站要抓住浏览者的眼球就需要创造出更符合视觉思维的网页形式。从视觉表现上来说，三维空间从根本的视觉空间入手，既具有二维平面的基本审美规律，同时相对二维空间的网页又具有层次感丰富较强的真实感和模拟感等优点，所以，三维网站引起的积极视觉过程是吸引浏览者的重要方法［9］。

(二)Superformula公式构建的动态形状产生积极视觉体验

欧几里德几何把自然界的图形高度抽象，归纳为点、线、面等几何元素以及规则的几何形体，强调和表现的是人的力量和对自然的征服。但是，人类生活的世界极其复杂，难以用传统几何要素或几何图形来再现，企图用规则的几何形态近似的模拟这些复杂形态是不切实际的［10］。随着科技的不断进步与发展，人们对于自然界的理解和认识越来越深入，也越来越希望能真实的还原自然。复杂性科学理论、分形几何的知识和计算机技术的发展，使传统的基于线性的、简单的欧几里德几何逐渐被新的表现形式所代替。同样，在三维网站中的几何形态开始表现出动态、连续、不规则、不确定等特征。这些非线性的几何形态超越了欧几里德几何学所规定的数学基础，打破了传统的美的法则，营造了一种充满生机、充满创造了的复杂几何形式［11］。

2000多年前，数学家和科学家们似乎都认为欧几里德几何是描述世界最自然和最直接的方法。但是现在Superformula公式的出现表明了，另一个方法可能更加有力。它提供了一种描述复杂的不规则现象中的秩序和结构的新方法，它表现的是与自然的和谐相处。

关注生命变化，这是生物与生俱来的本能。美学家宗白华先生曾说过:“大自然中有一种不可思议的活力，推动无生界以入于有机界，从有机界以至最高的生命、理性、情绪、感觉，这个活力是一切生命的源泉，也是一切美的源泉。自然无往而不美。何以故?以其处处表现这种不可思议的活力”［12］。充满旺盛生命力的自然界中蕴藏着美的形式与秩序，无论在微观世界的自然状态中，还是在宏观世界的自然形态中都包含了很多奇妙的、极强秩序化的形态。

Superformula公式最初用于研究植物和其他生物体的形式。有生命的物体，受外部环境力及内部生命力的影响，其形态总在不断发生着变化。而在科学的意义上，三维网站形态表征着自然界有机体与无机体在电子信息能量层面上的同一与融合，那么在三维网站中的三维形状也是受到外部环境力影响而不断变化的。当用户与网站中的三维动态形状进行交互时，由于用户自身的生命力注入了网站内，引起了三维动态形状的改变。

Superformula公式所生成的形态是基于非欧几里德几何学的更平滑更接近自然的形态，这种新形态更接近现实的反映了自然界，反映了自然界多种多样运动形式和空间构成。而自然界是充满生机、充满变化的动态空间。动态的图像作用于人眼时，会持续的引起神经系统的动作。而一般的静态形状在被人们分辨出来之后便不会再做进一步观察，导致很多信息未被人们接受。所以，动态形状可以持续吸引人们的注意，让观者在变化中深入了解动态形状的美，进而参与到变化中。以往的视觉经验会使观者的眼睛运动具有一定的预见性，而当形态的变化与之产生差异时，这种心理和视觉上的落差就把积极视觉体验提升到一个全新的境界。

三维动态形状作为三维网站的重要组成部分，而由Superformula公式生成的三维动态形状体现的是视觉元素在空间中的不断运动变化。与传统网页中的静态画面相比，Superformula公式构造的三维动态形状不仅仅具有色彩、光影及构图等要素，同时还具有时间、空间、运动等数字媒体所特有的视觉艺术特点运动中的元素通过空间、时间、运动的变化构成了一种动态的秩序，三维网站中的视觉元素赋予了一种动态美。这种存在形式引导用户不仅仅是观看，而是更加主动地去发现、探索各种可能。这是一种更符合现代生活的数字化新型审美体验。

［1］张禹.基于Web3D技术的3D网页发展现状分析［J］.阜阳师范学院学报:自然科学版，2008，(9).

［2］鄢志武，马祥山，吴丽.旅游景区三维全景虚拟展示研究［J］.理论月刊，2009，(4):114 －116.

［3］李统乾，刘凤荣.网络三维交互技术概述［J］.科技信息，2010，(1).

［4］JOHAN GIELIS.A Generic Geometric Transformation that Unifies a Wide Range of Natural and Abstract Shapes［J］.American Journal of Botany.2003，(3).

［5］［英］达西·汤普森.生长与形态［M］.上海:上海科学技术出版社，2003:244.

［6］ATIYEH B S，HAYEK S N.Numeric Expression of Aesthetics and Beauty［J］.Aesthetic Plastic Surgery，2008，32:217－219.

［7］［德］鲁道夫·阿恩海姆.艺术与视知觉［M］.孟沛欣，译.长沙:湖南美术出版社，2008:422.

［8］谢涛.3D视觉元素在网页设计中的应用与分析［J］.艺术与设计(理论)，2011，(6):118 －119.

［9］董小龙，路照林.动势研究［J］.美术大观，2008，(10):159－161.

［10］孟祥海.几何世界:认知与审美［D］.上海:同济大学硕士学位论文，2008:34.

［11］王丹.非欧几里德倾向［D］.厦门:厦门大学硕士学位论文，2007:54.

［12］张泽鸿.论宗白华的艺术史观［J］.东南大学学报:社会科学版，2011，(2):81 －88.

［责任编辑 郑红翠］

Dynamic Shape Based on Superformula in Three－dimensional Websites and Its Visual Experience

CHEN Tong，ZHANG Xuan-ying

(Department New Media and Arts，Harbin Institute of Technology，Harbin 150001，China)

Compared with the traditional 2D form of websites，the 3D websites can provide the higher degree of simulation of stereo images and greater freedom of the interaction，and provide the users with a brand－new visual experience and interactive experience.And the 3D shapes in the 3D websites ask for high simulation of stereo images，speed of transport and production rate at the same time.The modeling method based on Super－formula can create 3D non－symmetrical dynamic shape only with a single formula，and these shapes can meet the audience for the browsing speed and image quality.These 3D models are very suitable for constructing three－dimensional website.The dynamic 3D shapes created by Super－formula can bring the audience unprecedented positive visual experiences.

super－formula;dynamic shape;three－dimensional website;visual experience

G202

A

1009-1971(2011)05－0104－05

2011－07－28

哈尔滨工业大学2010年度985人文社科专项建设项目

陈童(1972－)，男，黑龙江哈尔滨人，讲师，博士研究生，从事网络与数字媒体设计研究;张轩颖(1986－)，女，河北唐山人，硕士研究生，从事广播电视艺术学研究。