Christmas version of minigolf

Christmas is closing by so I decided to cheer up our project meeting by creating a Christmas version of my WebGL minigolf game. It is now possible to play a hotseat multiplayer game with up to 10 players. The game consists of three holes decorated with Christmas theme.

WebGL inspector for Chromium, Webkit and Firefox

WebGL debugging tool for Chromium, Webkit and Firefox (coming soon) was introduced:

"WebGL Inspector is a tool inspired by gDEBugger and PIX with the goal of making the development of advanced WebGL applications easier. What Firebug and Developer Tools are to HTML/JS, WebGL Inspector is to WebGL."

http://benvanik.github.com/WebGL-Inspector/

Rendering QML on 3D cube

QML content can be embedded into 3D world by rendering it on QGraphicsScene that is used as a texture for 3D object. See video below.

Qt WebKit supports HTML5

As published by Qt-webpage, Qt WebKit Integration is an integration of WebKit with Qt. It provides an HTML browser engine that makes it easy to run web apps or embed web content into Qt applications. Qt WebKit supports HTML5 and WebGL specifications.

There is also a 3D Flickr HTML5 demo video available to demonstrate the HTML5 and WebGL possibilities with Qt.

WebGL seminar at TUT

A WebGL seminar will be organized at Tampere University of Technology by Prof. Tommi Mikkonen and Dr. Antero Taivalsaari. The seminar will start at December 9, 2010 and end at spring 2011.

In this seminar, WebGL and the emerging WebGL libraries will be investigated in the form of student presentations, application development exercises and group discussions. Students will prepare a presentation on one of the topics they choose, and will give a presentation in front of the seminar participants to summarize their findings. Students will also build sample applications using at least one of the libraries mentioned above.

For more information about the seminar, check: WebGL Seminar @ TUT

How to get WebGL-enabled browser

Learning WebGL blog has nice instructions how to enable WebGL in most popular web browsers.

Instructions for Google Chrome on Windows

Get the Chorme nightly build and download chrome-win32.zip

Execute Chrome with the following command:

chrome.exe --enable-webgl

Command line is not necessary if a shortcut with the command parameter (--enable-webgl) is created for running the Chrome.

Exploring with GLGE canvas textures

During the last couple of days I have been exploring with recently announced GLGE canvas texture support. Here are a couple of experiments:

• Lively Kernel rendered on a cube
• Other things (video/text/cube itself) rendered on a cube

On both demos the camera can be moved towards or away from the cube with mouse wheel. On the latter demo you can turn the cube with arrow keys. Please turn right first to avoid a weird bug.

YouTube video is available here.

Having fun with physics - 3D minigolf

During my summer holidays I happened to hear that JigLibFlash, a 3d physics engine for Flash, had been ported to JavaScript. So when I get back to work my hands were itching to get to code some demos with it.

After a few weeks of coding I am happy enough to present you WebGL Minigolf: http://www.eucfutsal2011.com/webgl/minigolf/index.html The game is fully playable with 9 different holes.

Controls:
Space: Hold down to shoot
Left and Right arrows: Aim
Up and Down arrows: Zoom in and out
Left mouse button + mouse: Move camera around

The physics engine is still under development and there are not even a pre-release available yet, but with a little debugging I was able to get the current version working acceptably.

YouTube video is available here.

WebGL prototype of L3D

WebGL version of L3D has reached its' prototype phase. The first prototype is a technology demo for demonstrating the possibilities of WebGL. Demo bases on Learning WebGL-site's excellent WebGL tutorials. Live-demo to play with can be found here.

We have also progressed our experiments with GLGE-library, and have come up with a few more demos with scripting abilities:
Cubes-demo
Collada-duck-demo

Simple Mashups with Different WebGL Libraries

During last few months numerous WebGL libraries have been appearing in fast pace. In the process of getting to know most advanced ones of these libraries, we have created some simple mashups that we would like to present.

All these demos are "live" so you will need a WebGL enabled browser (Chromium and Minefield are recommended) to view them. Twitter avatars did not load properly with the latest Chromium (44073), but all worked fine with Minefield.

Copperlicht & Twitter (modified collision demo)

http://www.cs.tut.fi/~salmin39/webgl/copperlicht/collision/index.html

GLGE & Twitter

http://www.cs.tut.fi/~salmin39/webgl/GLGE/twitterdemo/

C3DL & Flickr

http://www.cs.tut.fi/~salmin39/webgl/c3dl/demo/

Have fun!

JavaScript libraries for using WebGL

While doing my background work on the Lively goes 3D project I have come across several JavaScript libraries aiming to ease the use of WebGL. All the libraries have similar APIs for making animations, camera movements, light effects etc.

To view the WebGL demos you need to have a WebGL enabled browser.

Here are some of the main points of the libraries:

GLGE

-Developed actively

-Also supports fog and text rendering

Copperlicht

-Includes a 3D world editor

-Binary compilation with the editor

C3DL

-Good tutorials

SceneJS

-Playground demos can be modified on the fly

Yet a few more libraries:

SpiderGL

WebGLU

Project Introduction

The Lively 3D project aims for the development of a compelling 3D mashup environment. The main objective of the project is to create an efficient, interactive platform for three-dimensional rendering of web content, including the associated programming infrastructure to enable the development of 3D mashware in a consistent, integrated fashion. The Lively 3D system will be developed using JavaScript, Ajax and Qt.

Lively 3D builds upon our earlier experiences in creating the Lively Kernel, a dynamic programming environment embedded in a web page, and Lively for Qt, our implementation of a similar environment for Qt.

Project Background

Previous 3D user interfaces and mashups

Several examples of 3D user interfaces and mashups implemented with Web technologies are already available:

• Papervision 3D is Open Source realtime 3D engine for Flash
  • http://www.papervision3d.org
  • http://snakeflash.com/papervision-3d-mashup/
  • http://snakeflash.com/wordsgame/
• WolfenFlickr 3D - Wolfenstein 3D / Flickr JavaScript Mashup
  • http://blog.nihilogic.dk/2008/07/wolfenflickr-3d-unlikely-mashup.html
  • http://www.nihilogic.dk/labs/wolfenflickr/
• 3D Weather Mashup
  • http://freeearth.poly9.com/_weather/

Relevant Implementation Technologies

WebGL (https://www.khronos.org/webgl/) is a standard specification that is currently being developed to enable 3D graphics support in web browsers. WebGL will enable hardware-accelerated rich 3D graphics in web pages without the need for special browser plug-ins, on any platform that supports OpenGL or OpenGL ES. From the technical viewpoint, WebGL is a JavaScript binding to a native OpenGL ES 2.0 implementation. For further information, see http://en.wikipedia.org/wiki/WebGL.

Qt (http://www.qtsoftware.com/) is a mature, well-documented cross-platform application development framework and platform that has been under development since the early 1990s. Qt supports a rich set of APIs, widgets and tools that run on most commercial software platforms. While Qt is intended primarily for C++ developers, Qt API bindings are available also for developing applications in JavaScript™ and in the Java™ programming language. Interestingly, Qt libraries include a complete web browser (based on WebKit), as well as a fully functional JavaScript engine and debugger.