Slides for presentation about Lively3D in 22nd European Japanese Conference on Information Modelling and Knowledge Bases.

1. Examining the New Visualization
Possibilities for Conceptual Data
inside the Browser
Jari-Pekka Voutilainen
jari.voutilainen@iki.fi, @Zharktas
Tommi Mikkonen
tommi.mikkonen@tut.fi
Tampere University of Technology,
Department of Software Systems

2. Research goals
● HTML5 and related new browser
technologies enable a wide variety of
new applications in the Web.
● We experimented in what you could
actually do and what the limits are for
these technologies, especially for
WebGL.

3. Lively3D
● Framework for
embedding existing canvas-applications
in 3D-environments.
● APIs designed with minimal overhead code.
● Third party developer can embed new
applications and implement new 3D-
environments.

4. Design
● The design was considerably affected by
the browser security model.
● The framework divides into three
components to circumvent security
restrictions.

5. Design
● Lively3D itself is executed in modern browser without
any plugins using WebGL.
● Applications and 3D-scenes are hosted in Dropbox to
enable collaboration between developers.
● Application server contains proxy-applications to serve
as middleman between browser and Dropbox to
circumvent browser security.

6. 3D-scenes
● Each 3D-scene consists of static and
dynamic resources, actions done
between rendering frames, visual
appearance of application within the
scene and user interaction.

7. Loading a scene

8. Default scene
● The framework provides conventional desktop as a
default scene.
● Implements basic window management with
controlling multiple application windows.
● Applications are visualized as cubes that can be moved
around the environment.

9. Solar system
● The scene redefines the visual
representation of applications.
● Each application revolves around the
central sun.

10. Virtual world
● The scene demonstrates the possibilities of the
framework by implementing 3D terrain environment
where the user can move around in first person.
● Applications are represented as spheres that prowl
around the terrain.

11. Results
● WebGL only allows images, videos and canvas-
elements to be used as textures, so we couldn't use
existing content as much as we would have liked.
● All the applications are renderer in the same context,
which causes slowdowns when multiple applications
are shown at once.
● Browser doesn't offer a proper namespaces for
JavaScript-applications, so all the applications and
scenes share the same namespace. Which enables
interference between different apps and scenes.
● In general browser security is hindering factor even
though HTML5 technologies try to solve some of the
issues.

12. Demo
http://lively3d.cs.tut.fi

13. Questions?