scenegraph-based platform for 3d computer graphics ...

IADIS International Conference e-Learning 2007

SCENEGRAPH-BASED PLATFORM FOR 3D COMPUTER GRAPHICS TRAINING Vincent Muggéo Laurent Moccozet Nadia Magnenat-Thalmann MIRALab, University of Geneva Centre Battelle, Route de Drize, 7, Carouge CH1227, Switzerland

ABSTRACT We propose a framework for developing online interactive experiments for training students to master the basic concepts of 3D Computer Graphics. As 3D Computer Graphics has applications in a large range of fields (visual arts, media, geography…), we need to devote particular attention to students that are non expert in Computer Science and particularly in programming. We also have to take into consideration the resources and efforts required for the development of online training modules. We describe our approach for designing and implementing accurate and efficient training modules and describe how we have implemented one particular use case scenario. KEYWORDS E-learning, 3D Computer Graphics, Scenegraph

1. INTRODUCTION In (Cunningham, S., 1999) the author stresses the importance of the development of courseware for online and distance education in Computer Graphics. He particularly points out the costs and human resources required. In this paper, we propose a framework for developing online interactive modules for training in 3D Computer Graphics (CG). We target two objectives: offer valuable educational material that can be valid for non computer science students and optimize the time and resources required for developing the modules. In the remaining of this section, we will survey the related works in the area of interactive and online educational material for 3D CG. In the second section we develop our strategy for designing the training module. The resulting implementation is described in the third section and a specific use case scenario is proposed in the fourth section. We first briefly survey the available tools that teachers can use for developing interactive training exercises. The 3D CG field is particularly growing with dedicated tools. The first category of tools is 3D design softwares. In this category we find some widely-used softwares such as the 3DS Max Studio suite (3DS Max) which features strong modeling capabilities and a flexible plug-in architecture. It is widely used by, for example, video game developers, TV commercial studios or architectural visualization studios. It is also used for movie effects and movie revisualization. Other commercial and Open Source solutions are also available. However, all these solutions offer the general 3D CG functionalities and much more. The second category of tools is programming solutions. In this case, a graphic library is used to directly write the complete training application. Currently the most popular libraries are OpenGL (OpenGL) and DirectX (DirectX). Both provide an API dealing with 3D native functionalities. In this context, the teacher has to write a program which handles these functionalities. We need to find a compromise that directly provides a high-level access to state of the art functionalities in 3D CG as with 3D design softwares but also offers the flexibility to fully control the access to these functionalities as with 3D programming. There are two classical approaches to train students to let them experiment by themselves 3D CG concepts. They reflect the two types of tools available for developing interactive training material: 1) with programming exercises (Lewis, E., 2000; Hitchner, L. E., 2000, Cunningham, S., 2000) usually based on a

187

ISBN: 978-972-8924-42-3 © 2007 IADIS

standard programming language such as C++ or Java and a Graphics library API such as Open GL; 2) with design exercises (Van Gumster, J.,2003) usually based on a commercial or an open source 3D interactive modeler such as 3DS Max or Blender (Blender). Although these training methods are effective they have basic drawbacks that prevent from extending them to interactive on-line training: - Programming exercises give in-depth access to the basic concepts in 3D, but they also require as a prerequisite that the students have programming skills. This is usually the case for students in Computer Sciences but not for students from other disciplines. Unfortunately, the acquisition of sufficient programming skills would require too much overload to consider it as viable general solution. Moreover according to the range of various programming languages and 3D graphics library available even Computer Science students may encounter difficulties to master the programming environment. - Interactive 3D modelers offer a complete package of features from the most basic ones to the most advanced ones. Unfortunately, as they are professional or semi-professional production oriented tools, they are quite complex to use and to master and they also feature a complex user interface. As a result, students need to spend a large amount of their time in learning the software itself before being able to experiment the 3D concepts. The existing efforts to provide interactive or online educational material in 3D Graphics offer a range of modalities from simple online version of course notes with static graphics illustration (OCGn, HyperGraph), interactive graphics programming demonstration components (CGT, CGEMS, OpenGL tutors) (mostly in OpenGL) to be executed locally after download, to inline interactive Java applets for demonstration (ILO, AlgoViz, Exploratories, ICG). Most of them are oriented to algorithms demonstration rather than practice examples and to “low-level” (mainly graphics programming) aspects.

(a) (b) Figure 1. (a) Ad-hoc demo module for color spaces from the AlgoViz project (b) Ad-hoc demo module for raycasting from the ILO project

Figure 2. Online demonstration based on the openGL interpreter from the AlgoViz project

188


The AlgoViz (Ullrich, T., 2002) project provides a software environment, which is focused on the visualization of fundamental Computer Graphics algorithms and geometric modeling concepts. The goal is to provide a platform of components, which can be easily combined to create new applications. Based on this environment, the authors have developed an “Introduction to Computer Graphics” (ICG) online course. This course provides online interactive modules to learn 3D CG concepts such as the rendering pipeline or related topics such as the colors spaces. The available modules are either specific ad-hoc illustrations (Figure 1a) or programming examples (Figure 2). Same comments apply other solutions such as for the ILO (Hanisch, F., 1996-2003; Hanisch, F., 2005) system (Figure 1b). MVisio (Peternier, A., Thalmann, D. et al, 2006) is a powerful multi-device and multi-platform framework that provides a set of standalone executable compact modules allowing both students and teachers to navigate and experience 2D/3D Computer Graphics concepts. However, this rich content and interactive framework is not optimized for distance learning.

2. THE 4-AREAS CONCEPT The general 3D Computer Graphics framework consists of the following items: a set of data structures describe a virtual scene in 3 dimensions. The main components are the objects, the materials associated to the objects, the lights and the cameras. The rendering process then takes the 3D scene description as input and produces a 2D view of the 3D scene that is displayed on the screen as if the 3D scene was photographed with the virtual camera. Our hypothesis is that students can experiment and further master the different 3D concepts by tuning the parameters of the 3D scenes and interactively simultaneously visualize the effects onto the data structures, the 3D scene and on the resulting 2D display. To this end, the resulting design of the user-interface should consider 4 areas (Figure 3): 1) The control parameters area, where the student can directly change the parameters related to the current illustrated concept (for example, the location of a virtual camera); 2) The data structures area, where the student can view how the main related data structures are evolving (for example, the viewing matrix associated to the camera) ; 3) The 3D scene area, where the 3D scene is visualized together from an extra viewpoint with a combined graphical representation of the involved data structures (for example a graphical representation of a camera); 4) The 2D rendering area, where the 3D scene is displayed from the current camera viewpoint. In order to really experiment the 3D space, the student should be able to navigate in the 3D scene area. Control parameters

Data structures

2D rendering

3D scene

Figure 3. The 4-areas design concept

It particularly provides students with a dual view of the virtual scene. When a student modifies the parameter values, he/she can immediately visualize the resulting effects onto the related components: data structure, 3D scene and 2D rendering. He/she can iterate the same experience with various values in order to assess the effects and correlate then to the influence of each parameter for the current illustrated concept. In order to limit extra unnecessary learning linked to the user interface, the interface must hide the useless features and limit the content manipulation to the ones required to operate the current concept. This approach is close to the one proposed in (OpenGL tutors) for interactive training in open GL in C and extended for online training in (Chen, B., 2005; Nate Robins' OpenGL Demos in Ch) with Ch and (Yang, 2002) with GL4Java (GL4Java), an OpenGL Java binding to allow the deployment on the Web. However, these interactive environments are more focused to teach 3D programming than for experiencing the 3D concepts.

189

ISBN: 978-972-8924-42-3 © 2007 IADIS

In addition to this global design, we also consider that students should be faced to real, although simple, examples, close to the ones they will effectively meet and not to ad-hoc illustration of the underlying algorithm, which does not correlate the current concept with its effects. Moreover, students should experience the same or similar environment among the different modules. From the development point of view, implementing ad-hoc modules for each concept to illustrate requires a lot of resources even with solutions like AlgoViz. It would be much more efficient instead to develop the modules from a global highlevel 3D graphics framework. A scenegraph (Cunningham, S., 2001) is a high-level data structure that organizes the logical and spatial representation of a graphical scene in a tree structure. Each component of the scene is represented with a node of the tree. Scenegraphs are nowadays commonly available in graphics editing tools, games, 3D applications, graphics libraries and languages such as Java3D or VRML. They also offer all the state of the art features available in 3D CG. Many open source solutions are available and many of them are supported by an active community of developers and users, which ensure continuous updates that integrate up to date 3D features.

3. IMPLEMENTATION The main objective in our application is to propose a complete package integrating all 3D tools which could be manipulating by the web page. As explained previously, we need to choose a 3D engine which supports scenegraph management. Among the many possible existing scenegraph implementation, we made our choice for OpenSceneGraph (OpenSceneGraph) because it is cross-platform and can be transferred easily between different architectures and is windowing independent, which is exactly what we need in a web page. OpenSceneGraph brings all the common 3D CG functionalities required. First, we have to construct our application upon a 3D viewer. This viewer is built with the default OpenSceneGraph viewer which is optimized for rendering. According to the C++ technology applied for OpenSceneGraph development we use an ActiveX control to embed the 3D engine into a web page. The activeX technology is the only one which provides a complete compatibility with C++ applications and libraries. On the Internet, ActiveX controls can be linked to a Web page, downloaded and executed by appropriate Web browsers (Internet Explorer, Netscape (with plug-in) and Opera (with plug-in)). Like any executable program running in the computer, ActiveX controls can perform any operation on the data and especially in our case it can perform OpenSceneGraph operations. The ActiveX has to interact with OpenSceneGraph functionalities and to communicate with the web page. For this purpose we developed an API embedding the ActiveX, which is able to interact with the web page. We use the JavaScript language used to enable scripting access to objects embedded in the web page (Figure 4). Web page OpenSceneGraph HTML Viewer JavaScript Scene graph Inter-communication

Scene Objects

ActiveX

View window object

Figure 4. Integration between elements.

In Figure 4, the ActiveX is interpreted like an object which could be accessible by the JavaScript language. Finally, our application can be easily deployed through internet to client computer.

190


4. USE CASE SCENARIO In this section we present a complete module (Figure 5) in order to illustrate how we implement training modules based on the framework previously described.

Figure 5. Camera frustum web page

As explained in the previous sections we build our exercises around precise examples. To understand 3D CG notions, we guide the student to focus on a particular aspect such as the camera frustum. This example illustrates a precise task related to the virtual camera management. Before to show our concrete example we briefly summarize what is the camera frustum. A camera frustum represents a delimited volume where we compute the view rendering. Outside of it we skip the rendering process in order to reduce time computation. This notion of camera frustum comes from the photography field. As shown in the illustration below, a camera frustum is composed by six parameters.

Figure 6. Camera frustum

Near clip and far clip parameters define the distance field of view of the camera frustum. Consequently, after the far clip and before the near clip all information is occulted and of course not computed. Top, bottom, left and right define the height and the width of the near clip. It implies that if we change the distance between eye position and near clip position without changing this four last parameters we will change the angle of view (Figure 6). As the 3D camera management is inspired from the photography field and particularly from lens properties. In this case we talk about camera perspective with two parameters called vertical FOV and horizontal FOV (Field Of View). These two parameters represent the angle of sight,

191

ISBN: 978-972-8924-42-3 © 2007 IADIS

horizontally and vertically (Figure 7). These both representations of camera management constitute a concrete subject of experimentation for users.

Figure 7. Camera perspective

To illustrate the camera frustum manipulation we create two separated views. The left view is our camera view which will be manipulated. The right view represents our first camera (left view), viewed from a third person viewpoint. All the interest lies in this separated representation. Thanks to it the user can observe in the left view the pyramid which represents our camera view frustum. This pyramid is composed by a semi transparent area which indicates the computation space of the left view. At the top of this pyramid a camera shape is displayed to indicate the eye point (Figure 8).

Figure 8. Dual view, original camera view frustum (left view) and its representation (right view)

Figure 9. Scene representation with three shapes and one grid, before and after camera manipulation.

In this way, our application displays dynamically the projection view of our camera in the left view and its 3D space representation in the right view. The user gets with the mouse device the handle on both views manipulation. In real time the user can rotate, translate and zoom on the scene view. In this situation our application applies events on both simultaneously. If we assume that the user rotate the left view (our camera

192


frustum projection), in the right view the pyramid object move dynamically according of the left view coordinates. In other hand, if the user rotates the right view it will take no effect in the left view, but he/she could observe the pyramid object in other points of view. A few objects are added in the scene in order to estimate the view. Three simple classical shapes, cube, sphere and cone are inserted so that they initially appear in the camera view frustum. These are sufficient to observe camera manipulations and effects. Simple shapes are often used to appreciate deformation effects. Moreover, we add a standard grid to underline deformation effects. This grid, incorporates x, y, z axis representation (Figure 9). The student can iteratively change the camera view frustum parameters and visualize the effects on the camera object in the 3D space and the resulting effects on the 2D rendered corresponding view such as in the examples in figures 10 and 11.

Figure 10. Dual view with Left=-0.26 Right=0.26 Bottom=-0.26 Top=-0.26 Near clip=1 Far clip=100

Figure 11. Dual view with Left=-0.90 Right=0.90 Bottom=-0.10 Top=-0.10 Near clip=1 Far clip=100

5. CONCLUSION We have proposed a framework for developing online training module for 3D Computer Graphics based on the 4-areas concept and implemented around a 3D scenegraph viewer. Compared to similar available environments, we propose a complete and global development and design approach that attempts to address major critical challenges related to distant delivering of rich interactive 3D content for training. From the developer point of view, it provides a good compromise as the scenegraph scheme offers a high-level and flexible environment for developing training courseware. Moreover, as it provides all the state of the art features available in 3D Computer Graphics, developers can optimize their efforts and devote their attention to the training issues and to the interface with the students. From the student point of view, they can rely on the same interface design and the same 3D environment throughout the different training modules. Moreover, they are faced to a 3D environment similar to the one they will face later when using 3D production or editing software for example. Each module is dedicated to a single concept and the module interface is restricting the access to the functionalities of the 3D scenegraph to the ones required top operate this concept.

193

ISBN: 978-972-8924-42-3 © 2007 IADIS

Thanks to the 4-areas concept, students can focus their effort towards the concept they have to learn and by iteratively tuning the control parameters; they can simultaneously visualize the effects onto the 3D scene and the 2D display and correlate these experiences to the theory of the concept.

ACKNOWLEDGEMENT This work is being developed for the project “Understanding 3D” and is supported by the Swiss Virtual Campus (http://www.swissvirtualcampus.ch/).

REFERENCES 3DS Max, AlgoViz, http://www.cgv.tugraz.at/people/ullrich/AlgoViz;internal&action=_setlanguage.action Blender, CGEMS, CG Educational Materials Source, CGT, Computer graphics tutorials, Chen, B. and Cheng, H. H., 2005, Interpretive OpenGL for computer graphics, Computers & Graphics, Volume 29, Issue 3, June 2005, Pages 331-339.

Cunningham, S., 1999, Reports of the Graphics and Visualization Education 99 workshop, Cunningham, S., 2000, Re-Inventing the Introductory Computer Graphics Course: Providing Tools for a Wider Audience, Computers & Graphics, v. 24(12), April 2000, pp 293-296. Cunningham, S., 2001, Lessons from Scene Graphs: Using Scene Graphs to Teach Hierarchical Modeling, Computers & Graphics 2001, number 4. DirectX, Exploratories, GL4Java, Van Gumster, J. 2003, Blender as an educational tool, International Conference on Computer Graphics and Interactive Techniques, 2003 Hanisch, F. and Straßer W., 2002, Highly Interactive Web-based Courseware, in: Proc. of CGE02 Eurographics/SIGGRAPH Workshop on Computer Graphics Education, pp. 31—35. Hanisch, F., and Straßer, W., 1996-2003, GRIS/ILO Interactive Learning Objects, WSI/GRIS University of Tuebingen, Germany, Hitchner, L. E., and Sowizral, H. E., 2000, Adapting computer graphics curricula to changes in graphics, Computers & Graphics, Volume 24, Issue 2, April 2000, Pages 283-288. HyperGraph, ICG, Introduction to Computer Graphics, < http://www.cgv.tugraz.at/CGTutorial/CGTutorial.html> ILO, Graphical-Interactive Systems, Interactive Learning Objects, OCGn, Online Computer Graphics notes, OpenGL, OpenGL tutors, OpenSceneGraph, Peternier, A., Thalmann, D. et al, 2006, Mental Vision: a Computer Graphics teaching platform, Edutainment 2006, Hangzhou, China, April 2006, In Lecture Notes in Computer Science, Springer-Verlag Berlin Hidelberg. Ullrich, T., and Fellner, D., 2005, Computer Graphics Courseware. Eurographics 2005 - Education Papers 2005. Nate Robins' OpenGL Demos in Ch, Yang, L., Mustafa Sanver, M., 2002, Web-Based Interactive 3D Visualization for Computer Graphics Education, ICWL 2002: 423-432.

194