矛盾空间的三维交互教学演示系统设计

栾建霞

(北京工业大学艺术设计学院,北京 100124)

矛盾空间的三维交互教学演示系统设计

栾建霞

(北京工业大学艺术设计学院,北京 100124)

矛盾空间是艺术设计基础课教学内容,是创造新奇作品的特殊创意手段。要应用好它,对其原理的理解是关键。传统教学演示方式落后,不利于学生理解。文章阐述了矛盾空间教学演示方式改进的必要性,探讨了矛盾空间演示的最佳方式。认为利用Unity3D虚拟现实技术打造矛盾空间的数字化三维交互教学系统,能最大程度地解决问题,并以实际案例,说明该系统的结构设计、技术实现等。对矛盾空间演示方式的巨大改进,对相关教学颇具积极意义。

矛盾空间；数字化；Unity3D

“矛盾空间”属于视错觉,是在透视法基础上表现出矛盾的空间状态,这种视错觉图形单看局部时是成立的,整体观察时却呈现出或前后颠倒或上下错位等矛盾的空间状态。这些反常状态在真实的三维世界里是不可能存在的,因此又被称为“不可能图形”。矛盾空间是艺术设计基础课中的知识点,学好它对于学生将来利用其形成规律创造独具魅力的新奇视觉作品具有相当积极的意义。荷兰的埃舍尔、日本的福田繁雄等都是善于利用矛盾空间进行创作而享誉国际的视觉艺术大师[1]。传统的包括矛盾空间在内的视错觉教学法以静态图片展示加讲解为主,形式单一、枯燥,教学效果有限。矛盾空间受空间、角度等多方因素影响,要让学生全面地掌握并运用好它,最好在教学中以三维形式全方位地演示现象、解析原理、扩展应用等。随着科技的发展,利用计算机三维交互、虚拟现实等技术对教学演示形式进行改进,打造矛盾空间交互教学系统,使得教学效果大幅提升成为可能[2]。

一、开发的必要性

就所处维度来说,视错觉现象基本可被归为二维平面空间的和三维立体空间两大类,矛盾空间属于后者。要理解矛盾空间的形成原理,能动态观察是最好不过的,即在同一个空间里,将形成视错觉效果前和形成视错觉效果后的结构在连续变化中进行比对,以直观体会矛盾空间形成的原因。而传统教学法使用的是静态图片,无法做到动态观察。使用动态的平面图演示也无法准确表达体现在空间透视关系上的矛盾空间的内部结构关系,需要三维模型展示才行。这似乎可以实物模型作为教学手段,但是,实物模型也有其不理想之处,一是制作麻烦,二是会损坏,三是不利于传播,四是在教室展示时,还存在同一时间学生观察角度不统一的问题。前文提到“矛盾空间”在真实的三维世界里是不可能存在的,又被称为“不可能图形”。既然不可能存在,理论上就一定做不出三维模型。但有摄影图片显示确实有人做出了实物模型,可是要知道这种模型一旦转换角度就会穿帮,也就是说这些模型被做好后,摄影师选择了能够产生视错觉的最佳也是唯一的视角进行拍摄,实际上也只有静态图片才能骗过人们的眼睛。矛盾空间并没有真正全方位地在三维空间里不留破绽地存在,而只能依赖于某个特殊的视角实现效果。因此,要做出这样的模型在课堂上使用是有问题的,试想在同一时刻,坐在不同位置的学生不可能在同一个视角观察模型,也就是某些学生看到了特定角度下矛盾空间的效果,而同时另一些学生却在别的角度看到了“穿帮”的效果。这样不利于教师根据模型状态进行同步讲解。在如今计算机技术发展到能逼真模拟现实的前提下,利用计算机三维交互技术就能解决以上问题。使用这样的数字虚拟教学工具,教师演示时可以使所有学生统一看到同样的画面,便于讲解；而学生自学时也可以方便地自由选择模型角度进行观察,以体会在三维空间中矛盾空间的形成过程、发现产生视错觉的秘密(如图1所示)。利用计算机技术实现三维效果的视错觉原理演示法比起传统教学演示法有着明显的优势。因此,有必要开发一款矛盾空间的数字化交互教学系统。

二、系统的功能结构及美术设计

埃舍尔是世界著名的视错觉大师,他的矛盾空间作品可谓领域之经典[3]。其中“瀑布”和“上与下”这2个作品又是经典中的经典,具有代表性。“瀑布”是20世纪80年代视错觉被引入国内的第1张图；“上与下”中永远循环的阶梯是著名的“彭罗斯阶梯”。在此以这2个经典矛盾空间图作为依据设计矛盾空间解析案例(如图2所示)。

(一)功能结构设计

该教学系统主要由2部分组成:一为矛盾空间三维模型的交互体验；二为矛盾空间应用的扩展问答。界面结构设计为左中右3块区域,中间为主展示区,展示三维模型或问答题；左边放置模型对应的埃舍尔原画小图标和系列功能性按钮；右边显示矛盾空间的概念、原理解析等文字内容。

界面左上部是系统中所含模型的原画小图,旁边有一个小三角指示标,当界面中部显示任何模型内容时,它会指向该模型相对应的原画,当界面中部显示问答内容时,小三角指示标消失。左下部的功能性按钮分2组,前3个位置稍近的是用来控制三维模型的,包括“自动旋转”“手动旋转”和“还原视角”；与其距离稍远的最后一个按钮(“扩展问答”)能将中部主展示区的交互模型切换为问答内容(如图3所示)。当要回到交互模型内容时,点击界面左上角的原画小图标,即可切换到相应模型。点击控制模型的任意按钮或再次点击“扩展问答”按钮,使之由开启状态变为关闭状态时可回到问答内容之前的模型内容。

2个矛盾空间三维模型可动态解析其视错觉原理。“瀑布”的关键点(水流通道上的2个断口结构)及“上与下”的关键点(阶梯上的1个断口结构)的显示与隐藏都能通过界面左边的“自动旋转”、“手动旋转”及“还原视角”这3个控制钮使模型动态展示,并交互实现3种不同观察状态。

(二)美术设计

界面3块式构图,根据内容安排相应位置与空间面积:主要展示内容(三维模型或问答题目、答案)位置居中,面积最大；功能性按钮和解释性文字分别居于左右两边,主次分明、疏密得当、构图稳定。

根据人机工程学色彩方面的研究,可知最不会使人眼感到疲劳的色彩是灰色(无彩色),而鲜艳的颜色则容易激发人的注意力[4]。因此,在界面的色彩设计上以黑白灰无彩色为主色调,提示功能状态的地方辅以少量鲜艳色彩,这样,用户在使用时既不会造成眼睛疲劳,又能及时关注到需要引起注意的地方。左边的功能按钮,当处于关闭状态时为文字滑块在左边,按钮底色为灰色；当处于开启状态时为文字滑块滑向右边,显出按钮左部明亮的绿底色；左上角原画小图标旁边的切换指示小三角也是绿色,都用绿色这一系列色彩,使界面看上去不杂乱；另外,模型也主要为黑白灰关系,强调结构,为突出关键部位,局部使用了彩色,如图3(a)所示中的瀑布为蓝色、图3(b)所示中阶梯上的一圈小人为红色,这2处都是产生矛盾空间关系的关键部位,用鲜艳颜色起到吸引关注点的作用,并使作品兼具功能与美感,增强设计感。扩展问答所涉及的图片为彩色。

文字使用2种字体——宋体和幼圆体。所有的功能性按钮统一用幼圆体,解释性文字和问答部分的文字用宋体。通过2种不同字体体现不同文字功能,且这2种字体在字形、粗细上差别并不悬殊,又不失界面文字的统一感。

三、系统的技术实现

(一)开发软件的选择

在开发之前,首先要根据需要选择最合适的开发工具。Unity3D作为拥有目前世界领先水平的一款三维虚拟现实游戏平台,可以充分、实时地处理大量的三维模型,实现漫游、交互等功能[5],并能够在多平台上方便、简洁地发布,非常适合用于虚拟现实教学系统的开发。它可以轻松导入复杂的三维模型并进行处理和显示。我们可以先使用3Dmax软件搭建“矛盾空间”的三维模型,导出成为Unity3D可以识别的FBX格式,将之导入Unity3D之后再根据程序交互的需要来调整模型相应参数,实现虚拟漫游、人机交互等功能[6]。因此,本系统采用Unity3D作为主要开发工具。

(二)三维模型的实现

三维模型先在强大的建模工具3Dmax中搭建。建模时一般采用多边形网格建模或纹理贴图方式。虽然理论上任何物体都可以用多边形网格表示,只要细分足够多的面,但是实际上由于硬件设备的限制,如果只是一昧用多边形网格来提高模型细节质量,必然会导致多边形的数量过多,占用大量文件空间,影响系统运行效果[7]。对于这2个矛盾空间模型中一些复杂、细碎的物体,如瓦片覆盖的屋顶,采用纹理映射到多边形网格的方式来实现,就会事半功倍,不仅极大地减少了工作量,而且效果良好,性能也大大优于纯粹的多边形网格建模。因此,对于这2个复杂模型采用多边形网格建模和照片纹理贴图结合的方式来表现是合适的。

(三)遇到的问题及解决方案

在矛盾空间数字教学系统的开发和制作过程中,遇到一些具体问题,经过分析、调整,最终都很好地解决了。主要体现在以下3点。

问题一:三维模型中的“瀑布”,做成矛盾空间效果的关键在于把看似连贯的流水通道实际做成断开的,在某个视角下2组断开结构刚好接触上,造成连接假象。最初的模型在这样的思路下以直接断开的方式完成了2段水流通道的断开结构,断面平直。当转到特定视角观看视错觉效果时,发现断口间的遮挡关系出现问题——由于设定的特殊视角并不是平视视角,断口透视关系属成角(2点)透视,断口的截面是能看到的,这样,实际空间关系位于近处的断口结构就会挡住位于远处的断口结构,而达不到看似一体化的效果(如图4画白圈处所示)。

解决方案:把原本平直的近处断口改成参差不齐的结构,在特定视角下让远处断口能从视觉上遮挡住近处断口的截面,以形成2段结构为一个整体的假象(如图5所示)。

问题二:“上与下”三维模型中的阶梯是视错觉中的彭罗斯阶梯,这个看似连接不断的阶梯在三维模型中实际上是有绝对的最高点和最低点的,也就是说有1个断口,就像“瀑布”模型一样,当从1个特定的视角看过去时2个断口正好衔接上,让我们感觉是一个封闭的楼梯。既然2个断口在三维空间中是存在落差和距离的,那它们离光源就有远近之分,必然造成光照和阴影的亮度存在差别,如图6所示,2个白色箭头所指之处存在明显的光线明度差。这样,就容易被看出来本不是连接关系。如果调整原灯光位置使光源离2个断口距离相等以达到局部光照效果一致的做法又行不通,那样会使整体光照效果产生巨大变化,与埃舍尔原画中光影效果相去甚远。

解决方案:既然不能移动整体主光源,就另外补光。在调整过程中,尝试了多种灯光(平行光、点光源、聚光灯等)效果。其中,平行光使用后破坏了整体光照效果,不可用(如图7(a)所示)；采取局部补光的方式,先是用点光源,发现会把旁边的墙照出一块明显的光斑(如图7(b)所示)；再改用聚光灯,旁边的光斑问题好多了,但目标处光照效果不理想,需要调整光源位置和强度(如图7(c)所示)。经过对聚光灯不断调整、修正(如图7(d)所示),最终得到满意效果(如图7(e)和图7(f)所示)。

问题三:2个三维模型需要在3DMax中建好模后再导入Unity3D中使用。由于埃舍尔画作中的建筑为欧洲中世纪风格,造型结构比较复杂,产生的阴影既碎且多,3Dmax里打的灯光信息直接导入到U-nity3D中的话会有问题,而在Unity3D中虽然可以添加灯光,但灯光信息实时渲染,会严重影响渲染效率,大大增加计算时间。

解决方案:在模型的材质贴图方面,一般采用2种方案:一种是正常贴图方式,结合灯光进行实时渲染,这样的做法对于造型平整简约、环境灯光较多,且不会出现太多的阴影的室内环境来说可以满足需求；另一种是预先烘焙的方式,也就是在原有贴图的基础上,将3DMax中灯光照射在模型上的明暗变化,直接渲染记录在贴图上,使贴图本身就带有反光和阴影效果,这样模型导入后,无需添加灯光,就可以看到逼真的立体和光影效果。这种方式可以将自然光下的模型阴影及模型的暗部细节很好地变现出来,同时可以减少在实时渲染中的计算,有利于整个系统的运行[8]。因此,矛盾空间三维模型在结构、材质、灯光全部完成后进行烘焙处理,再导入Unity3D(图8为“上与下”模型的烘焙贴图)。

(四)交互的实现

模型在Unity3D中实现交互功能。视角旋转部分比较繁琐,Unity3D没有提供默认的插件,需要自行编写相应的代码来实现该功能(代码如下)。

void LateUpdate()

{

if(anniu.GetComponent＜UISprite＞().spriteName=="手动旋转-2"){∥按钮激活了才可以旋转

if(isRotite){

∥鼠标右键旋转

if(Target!=null&&Input.GetMouseButton((int)MouseButton.MouseButton_Left)){

∥获取鼠标输入

mX+=Input.GetAxis("Mouse X")* SpeedX*0.02F；

mY-=Input.GetAxis("Mouse Y")* SpeedY*0.02F；

∥范围限制

mY=ClampAngle(mY,MinLimitY,Max-LimitY)；

∥计算旋转

mRotation=Quaternion.Euler(mY,mX,0)；

∥根据是否插值采取不同的角度计算方式

transform.rotation=mRotation；}

∥鼠标滚轮缩放

this.Camer.camera.orthographicSize-=Input.GetAxis("Mouse ScrollWheel")*ZoomSpeed；

Distance=Mathf.Clamp(Distance,MinDistance,MaxDistance)；

∥重新计算位置

Vector3 mPosition=mRotation*new Vector3(0.0F,0.0F,-Distance)+Target.position；

∥设置相机的位置

transform.position=mPosition；

}

}

}

通过Quaternion Euler对摄像机默认的欧拉角进行转换,转换成计算中常用的角度单位,并通过鼠标移动的距离,来计算需要旋转的角度范围,通过ClampAngle来限制整个视角的角度范围,完成对摄像机角度的计算。随后通过角度以及设定的摄像机距物体的距离,计算出摄像机的世界坐标位置mPosition并赋值,完成整个摄像机的位置和角度参数的设定,保证交互视角的正确。

除此之外,对模型等界面内容的切换在此不再冗述。整个功能通过摄像机的核心算法及一些小功能脚本搭建而成,完成了矛盾空间的数字化演示系统。

四、结论

计算机的高速发展推进了教学方式的革新,极大地增强了教学效果。像矛盾空间这样的特殊教学内容,更需要借助最新科技解决传统教学中的不足。因此,矛盾空间的数字化三维交互教学演示系统应运而生。目前,系统里仅做了2个案例,数量上略显不足,但系统框架、功能结构等都已搭建好,将来还可以不断往里面添加进新的案例,丰富系统内容。学生对原理的透彻理解是利用好矛盾空间这一创意工具的前提条件,教学中能否到位演示显得至关重要,相信通过本教学演示系统的开发,能达到这个目的。

[1]陈凌嘉.图形图案中的两位魔术大师——埃舍尔与福田繁雄[J].青年文学家,2009(6):113.

[2]胡卫红,刘道光,王倩,等.虚拟现实技术在教育教学中的应用与研究[J].山东省青年管理干部学院学报, 2007(6):139-141.

[3]冯满.埃舍尔的视错觉艺术——对艺术设计专业透视学课程教学的思考[J].辽宁教育行政学院学报,2009 (6):116-117.

[4]马帅,贺运政.色彩在人机工程学中的应用分析[J].科技信息,2009(24):70-71.

[5]祝敏娇.基于Unity3D的虚拟漫游技术的研究[J].硅谷,2012(20):77-102.

[6]胡小强.虚拟现实技术与应用[M].北京:高等教育出版社,2004:10-15.

[7]李自力.虚拟现实中基于图形与图像的混合建模技术[J].中国图像图形学报,2001,6(1):96-97.

[8]WATT A,POLICARPO F.3D游戏:卷Ⅰ——实时渲染与软件技术[M].北京:机械工业出版社,2005:1-40.

(责任编辑 李世红)

Design of 3D-Interactive Contradictory Space Demonstration System for Teaching

LUAN Jian-xia
(College of Art and Design,Beijing University of Technology,Beijing 100124,China)

Contradictory space is a basic content of art design course,and a special method for the creative works.Understanding the principle of contradictory space is the key to apply it well.It is not easy to understand contradictory space for students in the traditional demonstration-based teaching.This paper emphasizes the necessity of improving the contradictory space teaching,and explores the bestway for the demonstration.In conclusion,a digital 3D interactive teaching system built by Unity3D virtual reality technology can effectively improve the demonstration,which shows quite positive significances in art design teaching.With real cases,this paper also illustrates the system’s structural design and the technical implementation,etc.

contradictory space；digitization；Unity3D

J0-05

A

1671-0398(2016)01-0078-07

2015-08-22

2014年北京市教委社会科学面上项目资助(sm201410005008)

栾建霞(1974—),女,江苏人,北京工业大学艺术设计学院讲师,硕士