WebGL 3D Puzzle
General Informations
This Web-Application is the result of the "Anfängerpraktikum" of Karsten Hanser and Niels Bernlöhr
Idea
The idea behind this project was to create a platform where users are able to "puzzle" with different models - especially Śiva scans from the Angkor Project Group. See also http://scotty.iwr.uni-heidelberg.de/ for further informations on this project group.How to use
In the tab "Loadable Models" you can find all models that can be used in this application.
By clicking on one entry you trigger the loading process (This might - depending on your network speed - take some time. At least you get a progress-indicator that shows you if it is feasible to get a cup of coffee ;-)
Once a model is loaded and unpacked it gets added in the origin of the space.
In the tab "Active Models" you will find all loaded models. You can enable/disable/remove and highlight them independently.
Once a model is selected you are able to:
- rotate (left click)
- move(right click)
- zoom(mouse wheel)
Using the middle mouse key allows you to select the model you are currently aiming at.
By clicking on the "Reset View" button you can reset your point of view and with the "Reset View & Models" button everything will be set back to the starting point in case you messed things up or you simply want a fresh start.
Implementation
This web-application uses WebGL to draw the models
The models used in this application are encoded in the openCTM format. See http://openctm.sourceforge.net/ for further information and news on openCTM.
Wonderful and useful open-source libraries we use:
- JS-OpenCTM
- Javascript Library that is good for loading of OpenCTM models. Requires JS-LZMA
- JS-LZMA
- Javascript port of the "classic" LZMA compression algorithm.
- glMatrix v0.9.6
- Javascript library that handles matrix and vector operations (which are not provided with webGL) in a easy and fast way.
- webgl-utils
- Javascript library that provides many useful routines (like Crossbrowser WebGL setup and draw event handling)
- yepnopeloader
- Javascript library that provides asynchronous and parallel conditional resource loading and user defined callbacks.
About Us
- Karsten Hanser
- Computer Science, B.Sc
- 3. Semester
- E-Mail me
- Niels Bernlöhr
- Computer Science, B.Sc
- 3. Semester
- E-Mail me
- Please feel free to write us an email, if you are interested in working on this project and you want to have access to the whole source code (and git-repository)
Technical Information
What do I need to use this application
First on you need a WebGL-capable browser.
By the date of this creation there are only Firefox, Chrome and Opera (and their respective mobile variants) able to display all the contents.
You might check http://caniuse.com/webgl and http://www.x3dom.org/check/ to make sure your browser does support WebGL.
What are the requirements for a good performance
First of all: The performance is mainly impacted by the number of models you render at a time. So there is no exact way to tell the requirements for this. BUT you should use at least a computer with a dedicated graphics card. On-board and On-chip alternatives might not be sufficient.
As WebGL does not provide a API to store often required data in the graphics card memory data gets copied to the graphics memory every frame. So please make sure to have a descend amount of (fast) memory. We would recommend about 4GB of DDR3 memory.
Further more this application does a simple kind of double buffering (this means that a new image is drawn in the background and gets displayed in the foreground as it is completely drawn). Because of the nature of JavaScript this impacts the performance heavily and will be disabled automatically as the FPS(Frames per second) drop beyond a fixed limit and will be re-enabled when your machine is ready to keep up again. While the double buffering is disabled you might experience some flickering while selecting a model.
Please note that browsers protect your machine from extensive load and because of that they limit the number of draw calls to the number of frames per second that your monitor can display (most commonly this is around 60 FPS)