Python实现3D建模工具(下)

用户接口

我们希望与场景实现两种交互，一种是你可以操纵场景从而能够从不同的角度观察模型，一种是你拥有添加与操作修改模型对象的能力。为了实现交互，我们需要得到键盘与鼠标的输入，GLUT允许我们在键盘或鼠标事件上注册对应的回调函数。

新建interaction.py文件，用户接口在Interaction类中实现。

导入需要的库

1. from collections import defaultdict
2. from OpenGL.GLUT import glutGet, glutKeyboardFunc, glutMotionFunc, glutMouseFunc, glutPassiveMotionFunc, \
3. glutPostRedisplay, glutSpecialFunc
4. from OpenGL.GLUT import GLUT_LEFT_BUTTON, GLUT_RIGHT_BUTTON, GLUT_MIDDLE_BUTTON, \
5. GLUT_WINDOW_HEIGHT, GLUT_WINDOW_WIDTH, \
6. GLUT_DOWN, GLUT_KEY_UP, GLUT_KEY_DOWN, GLUT_KEY_LEFT, GLUT_KEY_RIGHT
7. import trackball

初始化Interaction类，注册glut的事件回调函数。

1. class Interaction(object):
2. def __init__(self):
3. """ 处理用户接口 """
4. #被按下的键
5. self.pressed = None
6. #轨迹球，会在之后进行说明
7. self.trackball = trackball.Trackball(theta = -25, distance= 15)
8. #当前鼠标位置
9. self.mouse_loc = None
10. #回调函数词典
11. self.callbacks = defaultdict(list)
13. self.register()
15. def register(self):
16. """ 注册glut的事件回调函数 """
17. glutMouseFunc(self.handle_mouse_button)
18. glutMotionFunc(self.handle_mouse_move)
19. glutKeyboardFunc(self.handle_keystroke)
20. glutSpecialFunc(self.handle_keystroke)

回调函数的实现：

1. def handle_mouse_button(self, button, mode, x, y):
2. """ 当鼠标按键被点击或者释放的时候调用 """
3. xSize, ySize = glutGet(GLUT_WINDOW_WIDTH), glutGet(GLUT_WINDOW_HEIGHT)
4. y = ySize - y # OpenGL原点在窗口左下角，窗口原点在左上角，所以需要这种转换。
5. self.mouse_loc = (x, y)
7. if mode == GLUT_DOWN:
8. #鼠标按键按下的时候
9. self.pressed = button
10. if button == GLUT_RIGHT_BUTTON:
11. pass
12. elif button == GLUT_LEFT_BUTTON:
13. self.trigger( 'pick', x, y)
14. else: # 鼠标按键被释放的时候
15. self.pressed = None
16. #标记当前窗口需要重新绘制
17. glutPostRedisplay()
19. def handle_mouse_move(self, x, screen_y):
20. """ 鼠标移动时调用 """
21. xSize, ySize = glutGet(GLUT_WINDOW_WIDTH), glutGet(GLUT_WINDOW_HEIGHT)
22. y = ySize - screen_y
23. if self.pressed is not None:
24. dx = x - self.mouse_loc[ 0]
25. dy = y - self.mouse_loc[ 1]
26. if self.pressed == GLUT_RIGHT_BUTTON and self.trackball is not None:
27. # 变化场景的角度
28. self.trackball.drag_to(self.mouse_loc[ 0], self.mouse_loc[ 1], dx, dy)
29. elif self.pressed == GLUT_LEFT_BUTTON:
30. self.trigger( 'move', x, y)
31. elif self.pressed == GLUT_MIDDLE_BUTTON:
32. self.translate(dx/ 60.0, dy/ 60.0, 0)
33. else:
34. pass
35. glutPostRedisplay()
36. self.mouse_loc = (x, y)
38. def handle_keystroke(self, key, x, screen_y):
39. """ 键盘输入时调用 """
40. xSize, ySize = glutGet(GLUT_WINDOW_WIDTH), glutGet(GLUT_WINDOW_HEIGHT)
41. y = ySize - screen_y
42. if key == 's':
43. self.trigger( 'place', 'sphere', x, y)
44. elif key == 'c':
45. self.trigger( 'place', 'cube', x, y)
46. elif key == GLUT_KEY_UP:
47. self.trigger( 'scale', up= True)
48. elif key == GLUT_KEY_DOWN:
49. self.trigger( 'scale', up= False)
50. elif key == GLUT_KEY_LEFT:
51. self.trigger( 'rotate_color', forward= True)
52. elif key == GLUT_KEY_RIGHT:
53. self.trigger( 'rotate_color', forward= False)
54. glutPostRedisplay()

内部回调

针对用户行为会调用self.trigger方法，它的第一个参数指明行为期望的效果，后续参数为该效果的参数，trigger的实现如下：

1. def trigger(self, name, *args, **kwargs):
2. for func in self.callbacks[name]:
3. func(*args, **kwargs)

从代码可以看出trigger会取得callbacks词典下该效果对应的所有方法逐一调用。

那么如何将方法添加进callbacks呢？我们需要实现一个注册回调函数的方法：

1. def register_callback(self, name, func):
2. self.callbacks[name].append(func)

还记得Viewer中未实现的self.init_interaction()吗，我们就是在这里注册回调函数的，下面补完init_interaction.

1. from interaction import Interaction
2. ...
3. class Viewer(object):
4. ...
5. def init_interaction(self):
6. self.interaction = Interaction()
7. self.interaction.register_callback( 'pick', self.pick)
8. self.interaction.register_callback( 'move', self.move)
9. self.interaction.register_callback( 'place', self.place)
10. self.interaction.register_callback( 'rotate_color', self.rotate_color)
11. self.interaction.register_callback( 'scale', self.scale)
13. def pick(self, x, y):
14. """ 鼠标选中一个节点 """
15. pass
17. def move(self, x, y):
18. """ 移动当前选中的节点 """
19. pass
21. def place(self, shape, x, y):
22. """ 在鼠标的位置上新放置一个节点 """
23. pass
25. def rotate_color(self, forward):
26. """ 更改选中节点的颜色 """
27. pass
29. def scale(self, up):
30. """ 改变选中节点的大小 """
31. pass

pick、move 等函数的说明如下表所示

回调函数	参数	说明
pick	x:number, y:number	鼠标选中一个节点
move	x:number, y:number	移动当前选中的节点
place	shape:string, x:number, y:number	在鼠标的位置上新放置一个节点
rotate_color	forward:boolean	更改选中节点的颜色
scale	up:boolean	改变选中节点的大小

我们将在之后实现这些函数。

Interaction类抽象出了应用层级别的用户输入接口，这意味着当我们希望将glut更换为别的工具库的时候，只要照着抽象出来的接口重新实现一遍底层工具的调用就行了，也就是说仅需改动Interaction类内的代码，实现了模块与模块之间的低耦合。

这个简单的回调系统已满足了我们的项目所需。在真实的生产环境中，用户接口对象常常是动态生成和销毁的，所以真实生产中还需要实现解除注册的方法，我们这里就不用啦。

与场景交互

旋转场景

在这个项目中摄像机是固定的，我们主要靠移动场景来观察不同角度下的3d模型。摄像机固定在距离原点15个单位的位置，面对世界坐标系的原点。感观上是这样，但其实这种说法不准确，真实情况是在世界坐标系里摄像机是在原点的，但在摄像机坐标系中，摄像机后退了15个单位，这就等价于前者说的那种情况了。

使用轨迹球

我们使用轨迹球算法来完成场景的旋转，旋转的方法理解起来很简单，想象一个可以向任意角度围绕球心旋转的地球仪，你的视线是不变的，但是通过你的手在拨这个球，你可以想看哪里拨哪里。在我们的项目中，这个拨球的手就是鼠标右键，你点着右键拖动就能实现这个旋转场景的效果了。

想要更多的理解轨迹球可以参考OpenGL Wiki，在这个项目中，我们使用Glumpy中轨迹球的实现。

下载trackball.py文件，并将其置于工作目录下：

$ wget  http://labfile.oss.aliyuncs.com/courses/561/trackball.py

drag_to方法实现与轨迹球的交互，它会比对之前的鼠标位置和移动后的鼠标位置来更新旋转矩阵。

self.trackball.drag_to(self.mouse_loc[0], self.mouse_loc[1], dx, dy)

得到的旋转矩阵保存在viewer的trackball.matrix中。

更新viewer.py下的ModelView矩阵

1. class Viewer(object):
2. ...
3. def render(self):
4. self.init_view()
6. glEnable(GL_LIGHTING)
7. glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT)
9. # 将ModelView矩阵设为轨迹球的旋转矩阵
10. glMatrixMode(GL_MODELVIEW)
11. glPushMatrix()
12. glLoadIdentity()
13. glMultMatrixf(self.interaction.trackball.matrix)
16. # 存储ModelView矩阵与其逆矩阵之后做坐标系转换用
17. currentModelView = numpy.array(glGetFloatv(GL_MODELVIEW_MATRIX))
18. self.modelView = numpy.transpose(currentModelView)
19. self.inverseModelView = inv(numpy.transpose(currentModelView))
21. self.scene.render()
23. glDisable(GL_LIGHTING)
24. glCallList(G_OBJ_PLANE)
25. glPopMatrix()
27. glFlush()

运行代码：

右键拖动查看效果：

选择场景中的对象

既然要操作场景中的对象，那么必然得先能够选中对象，要怎么才能选中呢？想象你有一只指哪打哪的激光笔，当激光与对象相交时就相当于选中了对象。

我们如何判定激光穿透了对象呢？

想要真正实现对复杂形状物体进行选择判定是非常考验算法和性能的，所以在这里我们简化问题，对对象使用包围盒（axis-aligned bounding box， 简称AABB），包围盒可以想象成一个为对象量身定做的盒子，你刚刚好能将模型放进去。这样做的好处就是对于不同形状的对象你都可以使用同一段代码处理选中判定，并能保证较好的性能。

新建aabb.py，编写包围盒类：

1. from OpenGL.GL import glCallList, glMatrixMode, glPolygonMode, glPopMatrix, glPushMatrix, glTranslated, \
2. GL_FILL, GL_FRONT_AND_BACK, GL_LINE, GL_MODELVIEW
3. from primitive import G_OBJ_CUBE
4. import numpy
5. import math
7. #判断误差
8. EPSILON = 0.000001
11. class AABB(object):
13. def __init__(self, center, size):
14. self.center = numpy.array(center)
15. self.size = numpy.array(size)
17. def scale(self, scale):
18. self.size *= scale
20. def ray_hit(self, origin, direction, modelmatrix):
21. """ 返回真则表示激光射中了包盒
22. 参数说明: origin, distance -> 激光源点与方向
23. modelmatrix -> 世界坐标到局部对象坐标的转换矩阵 """
24. aabb_min = self.center - self.size
25. aabb_max = self.center + self.size
26. tmin = 0.0
27. tmax = 100000.0
29. obb_pos_worldspace = numpy.array([modelmatrix[ 0, 3], modelmatrix[ 1, 3], modelmatrix[ 2, 3]])
30. delta = (obb_pos_worldspace - origin)
32. # test intersection with 2 planes perpendicular to OBB's x-axis
33. xaxis = numpy.array((modelmatrix[ 0, 0], modelmatrix[ 0, 1], modelmatrix[ 0, 2]))
35. e = numpy.dot(xaxis, delta)
36. f = numpy.dot(direction, xaxis)
37. if math.fabs(f) > 0.0 + EPSILON:
38. t1 = (e + aabb_min[ 0])/f
39. t2 = (e + aabb_max[ 0])/f
40. if t1 > t2:
41. t1, t2 = t2, t1
42. if t2 < tmax:
43. tmax = t2
44. if t1 > tmin:
45. tmin = t1
46. if tmax < tmin:
47. return ( False, 0)
48. else:
49. if (-e + aabb_min[ 0] > 0.0 + EPSILON) or (-e+aabb_max[ 0] < 0.0 - EPSILON):
50. return False, 0
52. yaxis = numpy.array((modelmatrix[ 1, 0], modelmatrix[ 1, 1], modelmatrix[ 1, 2]))
53. e = numpy.dot(yaxis, delta)
54. f = numpy.dot(direction, yaxis)
55. # intersection in y
56. if math.fabs(f) > 0.0 + EPSILON:
57. t1 = (e + aabb_min[ 1])/f
58. t2 = (e + aabb_max[ 1])/f
59. if t1 > t2:
60. t1, t2 = t2, t1
61. if t2 < tmax:
62. tmax = t2
63. if t1 > tmin:
64. tmin = t1
65. if tmax < tmin:
66. return ( False, 0)
67. else:
68. if (-e + aabb_min[ 1] > 0.0 + EPSILON) or (-e+aabb_max[ 1] < 0.0 - EPSILON):
69. return False, 0
71. # intersection in z
72. zaxis = numpy.array((modelmatrix[ 2, 0], modelmatrix[ 2, 1], modelmatrix[ 2, 2]))
73. e = numpy.dot(zaxis, delta)
74. f = numpy.dot(direction, zaxis)
75. if math.fabs(f) > 0.0 + EPSILON:
76. t1 = (e + aabb_min[ 2])/f
77. t2 = (e + aabb_max[ 2])/f
78. if t1 > t2:
79. t1, t2 = t2, t1
80. if t2 < tmax:
81. tmax = t2
82. if t1 > tmin:
83. tmin = t1
84. if tmax < tmin:
85. return ( False, 0)
86. else:
87. if (-e + aabb_min[ 2] > 0.0 + EPSILON) or (-e+aabb_max[ 2] < 0.0 - EPSILON):
88. return False, 0
90. return True, tmin
92. def render(self):
93. """ 渲染显示包围盒，可在调试的时候使用 """
94. glPolygonMode(GL_FRONT_AND_BACK, GL_LINE)
95. glMatrixMode(GL_MODELVIEW)
96. glPushMatrix()
97. glTranslated(self.center[ 0], self.center[ 1], self.center[ 2])
98. glCallList(G_OBJ_CUBE)
99. glPopMatrix()
100. glPolygonMode(GL_FRONT_AND_BACK, GL_FILL)

更新Node类与Scene类，加入与选中节点有关的内容

更新Node类：

1. from aabb import AABB
2. ...
3. class Node(object):
5. def __init__(self):
6. self.color_index = random.randint(color.MIN_COLOR, color.MAX_COLOR)
7. self.aabb = AABB([ 0.0, 0.0, 0.0], [ 0.5, 0.5, 0.5])
8. self.translation_matrix = numpy.identity( 4)
9. self.scaling_matrix = numpy.identity( 4)
10. self.selected = False
11. ...
13. def render(self):
14. glPushMatrix()
15. glMultMatrixf(numpy.transpose(self.translation_matrix))
16. glMultMatrixf(self.scaling_matrix)
17. cur_color = color.COLORS[self.color_index]
18. glColor3f(cur_color[ 0], cur_color[ 1], cur_color[ 2])
19. if self.selected: # 选中的对象会发光
20. glMaterialfv(GL_FRONT, GL_EMISSION, [ 0.3, 0.3, 0.3])
22. self.render_self()
23. if self.selected:
24. glMaterialfv(GL_FRONT, GL_EMISSION, [ 0.0, 0.0, 0.0])
26. glPopMatrix()
28. def select(self, select=None):
29. if select is not None:
30. self.selected = select
31. else:
32. self.selected = not self.selected

更新Scene类：

1. class Scene(object):
2. def __init__(self):
3. self.node_list = list()
4. self.selected_node = None

在Viewer类中实现通过鼠标位置获取激光的函数以及pick函数

1. # class Viewer
2. def get_ray(self, x, y):
3. """
4. 返回光源和激光方向
5. """
6. self.init_view()
8. glMatrixMode(GL_MODELVIEW)
9. glLoadIdentity()
11. # 得到激光的起始点
12. start = numpy.array(gluUnProject(x, y, 0.001))
13. end = numpy.array(gluUnProject(x, y, 0.999))
15. # 得到激光的方向
16. direction = end - start
17. direction = direction / norm(direction)
19. return (start, direction)
21. def pick(self, x, y):
22. """ 是否被选中以及哪一个被选中交由Scene下的pick处理 """
23. start, direction = self.get_ray(x, y)
24. self.scene.pick(start, direction, self.modelView)

为了确定是哪个对象被选中，我们会遍历场景下的所有对象，检查激光是否与该对象相交，取离摄像机最近的对象为选中对象。

1. # Scene 下实现
2. def pick(self, start, direction, mat):
3. """
4. 参数中的mat为当前ModelView的逆矩阵，作用是计算激光在局部（对象）坐标系中的坐标
5. """
6. import sys
8. if self.selected_node is not None:
9. self.selected_node.select( False)
10. self.selected_node = None
12. # 找出激光击中的最近的节点。
13. mindist = sys.maxint
14. closest_node = None
15. for node in self.node_list:
16. hit, distance = node.pick(start, direction, mat)
17. if hit and distance < mindist:
18. mindist, closest_node = distance, node
20. # 如果找到了，选中它
21. if closest_node is not None:
22. closest_node.select()
23. closest_node.depth = mindist
24. closest_node.selected_loc = start + direction * mindist
25. self.selected_node = closest_node
27. # Node下的实现
28. def pick(self, start, direction, mat):
30. # 将modelview矩阵乘上节点的变换矩阵
31. newmat = numpy.dot(
32. numpy.dot(mat, self.translation_matrix),
33. numpy.linalg.inv(self.scaling_matrix)
34. )
35. results = self.aabb.ray_hit(start, direction, newmat)
36. return results

运行代码（蓝立方体被选中）：

检测包围盒也有其缺点，如下图所示，我们希望能点中球背后的立方体，然而却选中了立方体前的球体，因为我们的激光射中了球体的包围盒。为了效率我们牺牲了这部分功能。在性能，代码复杂度与功能准确度之间之间进行衡量与抉择是在计算机图形学与软件工程中常常会遇见的。

操作场景中的对象

对对象的操作主要包括在场景中加入新对象, 移动对象、改变对象的颜色与改变对象的大小。因为这部分的实现较为简单，所以仅实现加入新对象与移动对象的操作.

加入新对象的代码如下：

1. # Viewer下的实现
2. def place(self, shape, x, y):
3. start, direction = self.get_ray(x, y)
4. self.scene.place(shape, start, direction, self.inverseModelView)
6. # Scene下的实现
7. import numpy
8. from node import Sphere, Cube, SnowFigure
9. ...
10. def place(self, shape, start, direction, inv_modelview):
11. new_node = None
12. if shape == 'sphere': new_node = Sphere()
13. elif shape == 'cube': new_node = Cube()
14. elif shape == 'figure': new_node = SnowFigure()
16. self.add_node(new_node)
18. # 得到在摄像机坐标系中的坐标
19. translation = (start + direction * self.PLACE_DEPTH)
21. # 转换到世界坐标系
22. pre_tran = numpy.array([translation[ 0], translation[ 1], translation[ 2], 1])
23. translation = inv_modelview.dot(pre_tran)
25. new_node.translate(translation[ 0], translation[ 1], translation[ 2])

效果如下，按C键创建立方体，按S键创建球体。

移动目标对象的代码如下：

1. # Viewer下的实现
2. def move(self, x, y):
3. start, direction = self.get_ray(x, y)
4. self.scene.move_selected(start, direction, self.inverseModelView)
6. # Scene下的实现
7. def move_selected(self, start, direction, inv_modelview):
9. if self.selected_node is None: return
11. # 找到选中节点的坐标与深度（距离）
12. node = self.selected_node
13. depth = node.depth
14. oldloc = node.selected_loc
16. # 新坐标的深度保持不变
17. newloc = (start + direction * depth)
19. # 得到世界坐标系中的移动坐标差
20. translation = newloc - oldloc
21. pre_tran = numpy.array([translation[ 0], translation[ 1], translation[ 2], 0])
22. translation = inv_modelview.dot(pre_tran)
24. # 节点做平移变换
25. node.translate(translation[ 0], translation[ 1], translation[ 2])
26. node.selected_loc = newloc

移动了一下立方体：

五、一些探索

到这里我们就已经实现了一个简单的3D建模工具了，想一下这个程序还能在什么地方进行改进，或是增加一些新的功能？比如说：

• 编写新的节点类，支持三角形网格能够组合成任意形状。
• 增加一个撤销栈，支持撤销命令功能。
• 能够保存／加载3d设计，比如保存为 DXF 3D 文件格式
• 改进程序，选中目标更精准。

你也可以从开源的3d建模软件汲取灵感，学习他人的技巧，比如参考三维动画制作软件Blender的建模部分，或是三维建模工具OpenSCAD。

六、参考资料与延伸阅读

• A 3D Modeller
• A 3D Modeller 源代码
• Real Time Rendering
• OpenGL学习脚印: 坐标变换过程(vertex transformation)
• OpenGL学习脚印: 坐标和变换的数学基础(math-coordinates and transformations)