topical media & game development

talk show tell print

PANORAMA: A Rich VRML Application Platform For Online Gaming

S. Yin & A. Eliens


Traditional VRML games are normally designed in single user mode, lacking in communications with other sources. Though there already exists solutions like communication servers to provide such service, such hosts are regularly expensive and not general enough for developers to expand. In this paper, we present PANORAMA, a platform which makes use of the AJAX technique, to demonstrate a new design model which can fully support multi-users and incorporate with other network applications. Also in PANORAMA we have experienced the GWT framework to build a friendly user interface as a communication layer between normal web context and 3D VRML world.


The emerging of VRML dates back to 1997 when VRML2 was released and used by some personal homepages and sites such as "CyberTown" which offered 3D chat rooms. With the booming power of nowadays GPU, VRML games are becoming more and more powerful and realistic, especially by supporting the hardware Shader programs[2]. Another standard X3D, the successor of VRML format, features extensions like NURBs, Humanoid Animation and using an XML syntax, which makes third party applications easily incorporate with. So why can't VRML/X3D application and games be popularized or any 3D gadgets came out at current stage? We conclude that there are mainly two reasons as follows.


\nindent In this paper, we propose PANORAMA as a project focusing on social awareness and interactions[4], resulting an example of how to give a general communication interface to fully support multi-users and cooperation with other network applications.

In previous work, we have experienced several kinds of game designs using different techniques such as DLP and shader programs. In this work, we prove that it's a great opportunity to bring real web online games through the PANORAMA platform. The paper starts with an overview of the system design followed by the implementation description in Section 3. Section 4 explains the possible future improvements and we end with a summary in Section 5.

System Design

The original idea of PANORAMA is to explore different approaches to show self-reflections in certain community and social network. It should be intelligent, interactive and visually good looking to mediate non-work related information and enhance awareness within the work environment. We build it on the web due to the ubiquity of the browser as a client, also called thin client architecture which provides better maintainability and developing environment.


The structure of PANORAMA is more like a normal three-tier web application which contains game server, the central database and the user client shown in Figure 1. We can see that VRML game is only part of the whole system and the main flow process is controlled by the AJAX script used. When a game event occurs like getting the current rank list or updating some data on the server, the VRML world will trigger the callback javascript which then invokes HTTP request through an unique URL indication. When the game server receives such request, it extracts the information from the HTTP header and processes it in the server engine.

There may be several problems in such design like \textit{security trust}(how to protect user data from modifying) and \textit{synchronization issue}(when several clients update and read from the database). We discuss respective solutions in Section 4.

We have built one game and one application within such platform. The game shown in Figure 2 is named 'My naughty tigers' that player places boxes to drive the jumping tiger into the smoke. Multi-players can rank their scores after each winning. The other application is called 'My Photo Gallery' in Figure 3 which gives a gallery walking view to enjoy pictures and also can upload new ones without refreshing the page.


System Implementation

Before we dump into the specific implementation of our PANORAMA platform, it's better to introduce the developing platform at first. We have tested the system on both Firefox and Internet Explore browser with the latest Bitmangement Contact 7.0 VRML plug-in installed. The server agent is built using PHP programming with MySQL as the database. There are mainly four new components in PANOR AMA compared with regular VRML applications and each of them is explained as below.

Google web user interface

Google Web User Interface is a HTML interface programmed using Java and generated by Google Web Toolkit(GWT)[3]. It acts as a glue between VRML games and user operations. Functions like 'Login', 'Upload', and 'Chat' can all be implemented by using such interface like in Figure 3. For internal game usage, it can also set up the 'Setting' window which complements the weakness on the user interface in VRML. The communication between VRML and HTML page is through the VRML Script EAI and in List 1 we demonstrate how it works in GWT.


  public static native void
    setEventIn(node, field,value) {
                       (node, field, value);

Callback function in javascript

Callback function is usually invoked when VRML game needs to communicate with the outside world. In List 2, we give a sample code to describe how this works both in VRML and HTML.


  DEF Script Script {
    field MFString url ["OnEvent(par)"]
    url "javascript:
         function value_changed(v, t) {
           #load the current URL in default
           Browser.loadURL(url, v); 


  <script language=Javascript>
  function onEvent(par){


In the above source code, the URL loaded by VRML is only the function name embedded in the current HTML file. The parameter passed is a \texttt{MFString} type value with each sub-string matching the list of the function definition. When event occurs, the javascript function will be invoked and makes the request.

AJAX request and URL agent

Making an AJAX request is widely used and standardized in nowadays web sites. The procedure works like that the script first checks the version of the client browser and then instantiates a \texttt{XMLHTTP} object and finally makes the connection to the server agent. A \texttt{setTimeOut()} callback function can be set up since games always need to update the scene frequently. More details about the exact code and tutorials can be found on the Mozilla developing center[6]. At the server side when the agent receives a request, it should first identify which HTTP method the client uses (\texttt{POST} or \texttt{GET}) and then extract the the variable values from the header file and process the request. This can be easily handled by reading the \texttt{_GET} or \texttt{_POST} variables in PHP.

Future Improvement

The initial result shows that the current PANORAMA is promising but still there is a lot of work left. we consider adding the following features in the next release version.

future work

  • Authorization mechanism. The server should maintain authorization function otherwise one can easily change other's data through the HTTP header request. Since it's nothing to do with VRML, normal web solution is sustainable.
  • Synchronization issues. Upon the time the paper is written, we haven't experienced large scale multi-user scenarios on PANORAMA and such problem didn't occur at this moment. But we think it's a web developing problem rather than a complex game engine design and PHP can easily handle that.
  • Modification in GWT for better VRML support Again, we discovery that the GWT is a well developed framework which greatly saves time on debugging web applications and building UI. Since it uses an open source license, it's possible to build a dervied package that specially serve for the VRML game development.

    Comparison with Other Platforms

    Inside the web game market, there are already several other platforms exists(e.g. Flash 3D, Quick Time VR, etc.). Those products are dominated by big companies and have been developed for years. But we believe PANORAMA as a VRML platform can still competing with others with the following advantages:

    other platforms

    1. Open source licensed. Comparing with other commercial platforms, PANORAMA can be totally built upon open source softwares. For example, the server can use Apache while the VRML client has Flux[9] and the GWT library is already Apache licensed. Such environment gives developers more spaces to investigate and expand.
    2. The out performance of VRML. By fully supporting the DirectX9, VRML players gain the best performance in 3D graphics rendering, resulting in high quality game images. The VRML/X3D are also open standards file format with a rich set of components featuring visualization and entertainment.
    3. Royalty free Development. Commercial platforms need you to buy the authoring tools to create content while VRML applications can be totally developed by text editors. Some respect authoring tool like Flux Studio and VrmlPad are free to download and use.
    The disadvantage of PANORAMA can be concluded into unifying issues. Apart from the weak compatibility between different players, the support of browser is also a problem. Almost all the VRML players need user to install the plug-in manually, without any notification by the browser. But we think this dilemma can be gradually conquered when the application is getting widely used.


    Traditional VRML games are mostly played in single user mode lacking communication with others. With the popularity of AJAX technique, it's possible to build multi-users games in VRML through the EAI interface. In this paper, we are proposing PANORAMA, an early bird work which uses AJAX for communication and GWT for building UI, resulting in a hybrid platform that is general enough to adapt to games and other applications. We evaluate small games and discuss several pitfalls which can be fixed in the next release. Also we recognize that building a framework based on the GWT is meaningful and surely can boost the popularity of web 3D games.


    \bibitem{blaxxun} Blaxxun Product. Blaxxun Communication Server. \texttt{}.
    \bibitem{vrml}Bittmanagement. Bittmanagement Developer Website. \texttt{}.
    \bibitem{gwt} Google Inc. Google Web Toolkit. \texttt{ com/webtoolkit/}.
    \bibitem{social}PANORAMA system : Being social. Vrije Universiteit Amsterdam. \texttt{\~dvyas/ resources.html}.
    \bibitem{dlp}Distributed Logic Programming. Vrije Universiteit Amsterdam. \texttt{}.
    \bibitem{ajax}Mozilla developer center. AJAX:Getting Started.\\\ \texttt{}.
    \bibitem{web3d}Web 3D CONSORTIUM. VRML Viewers, Browsers\\ \ and Plug-ins. \texttt{ vrml/tools}.
    \bibitem{vrmlstandard}ISO/IEC 14772-1:1997 and ISO/IEC 14772-2:2004.\\\ Virtual Reality Modeling Language (VRML).
    \bibitem{flux}Media Machines. Flux Studio.\\\ \ \ \ \ \ \ \texttt{}.

    (C) Æliens 27/08/2009

    You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.