Presentation @ Web3D 2010 (co-located with Siggraph 2010), Los Angeles, USA

1. 1
Integrating A Web3d
Interface into an E-learning Platform
Francesco Di Cerbo+, Gabriella Dodero+, Laura Papaleo*^
+
Free University of Bolzano-Bozen
*
G3 Group, Department of Computer Science, University of Genova
^
ICT Department, Provincia di Genova
24 July 2010 Web3D International Conference, Los Angeles 2010

2. Outline
2
 Introduction
 The DIEL e-learning platform
 Our approach
 Web3D interface for DIEL
 Examples, results
 Concluding remarks
24 July 2010

3. Introduction
3
 The Web has grown, allowing richer and interactive content
 Web technologies are becoming more stimulating
➢ collaborative spaces.
 Web-based knowledge transfer is becoming important
 We foresee a research trend in studying and designing e-
learning collaborative systems where interactions among
users can be done in a 3D environment, as a game-like
immersive virtual reality.
24 July 2010

4. What we have done
4
 Present our interactive e-learning platform DIEL
developed as an extension to Moodle
 Focus the attention on the design, development and
implementation of an innovative 3D client interface
which uses the X3D standard in combination with
WebGL and X3DOM
24 July 2010

5. Related Work
5
 A number of studies has been focusing on effectiveness and
benefits brought in e-learning by the use of metaverses,
especially with Second Life. [Abbatista et al. 2009, De
Lucia et al. 2008, 2009, Sancho et al. 2008].
 In those works, a positive tendency emerges, especially for
substituting direct face-to-face communications.
 Previous works using different technologies [e.g. Pfister et
al. 1998] focus on virtual learning spaces, that ease the
fruition of contents, providing
➢ representational and mnemonic method on mapping
semantic onto spatial relations.
24 July 2010

6. Authoring &Visualizing Web3D
6
Content
 Several technologies exist to create 3D content for the web.
 Most of them are plug-in based systems
 This adds more complexity for the end user
 O3D: a Google attempt to establish an open standard for 3D graphics
on the web.
 X3D: open ISO standard for creating specifications for representing
3D graphics
 WebGL: a new cross-platform, royalty-free web standard for a low-
level 3D graphics API
 X3DOM: an open-source framework developed with the aim to bring
the X3D standard to HTML5 on top of WebGL.
24 July 2010

7. The DIEL e-learning platform
7
 DIEL is an e-learning platform
developed for providing new ways of
user interactivity and data representation WEB3D
INTERFACE
…
in a web-based real-time environment
2D
INTERFACE
 Extension of Moodle
 Use of the social translucence concept DIEL
 Virtual learning space
 Components: Rooms,
Doors, users, resources MOODLE
24 July 2010

8. The Social Translucence Concept
8
 How would you open
this door, if you are in
a hurry?
24 July 2010

9. The Social Translucence Concept
9
 If we know that
someone is on the
other side, very
carefully!
 Social translucence is a
set of principle and
design guidelines for
designing social
applications.
24 July 2010

10. The Social Translucence Concept
10
 Three main properties:
 visibility: make socially significant information
visible;
 awareness: visibility supports social awareness;
 accountability: individuals are socially accountable for
their actions.
 DIEL design approach:
 mimetic: application represents social cues from the
physical world, as literally as possible, in the digital
domain.
24 July 2010

11. Previous DIEL 2D and 3D
11
Interfaces
 Interactions: via chat
 Visible:
 students, tutors
 door
 Resources
 Ffilmation (Adobe)
 Prototype tested
 Visible: the
same items as in 2D
24 July 2010

12. DIEL In Action
12
Course conceptual representation (left) and DIEL
implementation (right): 3 main topics analyzed
with 4 common activities.
24 July 2010

13. Web3D Interface for DIEL
13
 Technologies used:
X3D, WebGL and X3DOM for HTML5
 Designed and developed to ensure:
 Portability
 Extensibility
 License
 Simplicity of use
24 July 2010

14. Web3D Interface: Foundation
14
Framework
 developed as an AJAX based web application using the
Closure JavaScript library [Google]
 modular and object-oriented
 Responsible for handling basic operations
 Everything related to 3D is handled by the X3D standard.
 Architecture: three main layers
 Client
 Communication
 User interface.
24 July 2010

15. Web3D Interface: X3D scene
15
modeling
 X3D scenes can be modeled using
the XML syntax
 Scenes are generated dynamically at
client side, according to the
directives specified by the DIEL
server and conveyed with specific The Web3D Interface with a single room
(floor) integrated into Moodle.
JSON messages
 Room: X3D scene representing a
Floor
 Users: X3D scene representing
Avatars
Two predefined different avatars
24 July 2010

16. Concluding Remarks
16
 We presented a Web3D interface for
supporting interactions in social
constructivistic learning communities
of students and teachers, inside a web-
based e-learning environment.
 The interface
 is very flexible and extensible.
 has been developed using X3D, WebGL
and X3DOM, among the most promising
technologies in Web3D.
24 July 2010

17. Future works
17
 Improve the interface functionalities:
 Avatar personalization, more sophisticated environments, more descriptive
objects for the resources, and so on…
 Embed videos directly in the 3D interface, in panels or surfaces,
exploiting HTML5 & X3Dom library
 such a functionality would be important to implement user video chats
 Encode teachers’ knowledge (learning paths) into an ontological
schema, supporting knowledge sharing on the web
 Analyze patterns in the usage of the virtual environment, with
Social Network Analysis techniques, to evaluate and assess
interactions quality from an educational point of view
24 July 2010

18. Acknowledgements
18
 X3DOM project
 WEB3D community
24 July 2010

19. Thanks for the attention
19
 WE ARE LOOKING FOR PARTNERS!
 Contacts:
 For: E-learning, Social Transulence, DIEL
 Dr. Francesco Di Cerbo, francesco.dicerbo@unibz.it
 For: 3D graphics, Semantics and Knowledge formalization
 Eng. Laura Papaleo, papaleo@disi.unige.it
Coming soon: AGPL release @ http://diel.case.unibz.it
This work has been partially supported by FP6 QUALIPSO project (IST- FP6-IP-034763),
founded by the European Commission, and by a grant from University of Genoa CARED
research centre.
24 July 2010