Category Archives: webgl

Glass moulding – WebGL

Threes.js Mesh Deformation demo using Lathe Geometry

Texture by Humus

glassmould

Chrome experiment

Glass molding

Glass molding prototype

This demo is inspired by the iPhone Pottery app by iDream. It was a very different app. Pottery in real life is very recreational and the app captured the fun of doing it. The interface too was intuitive. I wanted to try creating something similar as the way they had created it was obvious after seeing the app.

I was checking out Three.js and this is my second demo in Three.js. My first thought was  to use a cylinder or create the geometry myself. After having a look at the built in geometries, the lathe geometry seemed interesting, though it gave some problems at first, but worked out really well. Took me 2 days to make this, the controls are a mess, but that’s the best i could do without adding any buttons, it will need some practice to create something like the one in the image above. Initially i thought of giving it the look of mud, but after i copied some shaders from the three.js demos, it started looking more like glass, hence the name glass molding, also the edges are visibly pointed which resembles more like molten glass.

Air Hockey

airhockey  

Chrome Experiment

800×600 (WebGL)

Full size (WebGL)

O3D

This was my first 3D game, if you can call this one, more about this later. I worked on the Air hockey in game in “Master All Classics” on the Nintendo DS which was 2D. It turned out to be something very different from air hockey, the table was somewhat hexagonal due to legal issues and the controls were bad, which was solely my fault. Overall that game sucked.

When Google launched a new 3D plug-in “O3D”, now deprecated, I decided to try out something using it. I first thought of making Pong, but dropped the idea. I had used Box 2D physics engine in the DS game and the physics demo of O3D looked was really cool, so I decided to make a better Air Hockey game and redeem myself. I created a table and some silly art in 3D max. Later a 3D artist friend of mine Roshan created the amazing looking table and background with baked lighting. With these looks I decided to submit it to the Google O3D gallery and they accepted it, but our bad luck they shut down the project before it got hosted. I even made a facebook app, which doesn’t seem to work anymore, thanks to constant facebook api changes.

When WebGL was supported in browsers I decided to try out something. I looked up the new O3D WebGL implementation which I thought would be easier to port the game into, but they it didn’t look that convincing. Three.js looked like the engine of choice for many WebGL demos and the api was very simple too, I went ahead with it and porting the basic game took me 2 days.

Now some technical details, the game is basically 2D and works on the XY plane and uses Box2D physics engine. I think many games can be made using a 2D physics which has lesser impact on performance than a 3D physics engine. The code is in java script, you can download a full screen zipped version here. I haven’t done much work in java script and HTML so the quality of code isn’t really good, and this is not how a complete game should be written. I didn’t use the internal ray casting for moving the user mallet as there was significant drop in performance on the O3D (deprecated) version. It just checks for intersection of the mouse ray with the XY plane on which the table lies. I had some minor issues importing the 3D model from 3D max to Three.js, rest was smooth and I had to let go of the UI, maybe I will add UI in HTML on a later day and complete the game.

Firefox doesn’t allow cross-domain textures and if you want to test demos with textures in firefox on local machine it best to set security.fileuri.strict_origin_policy in about::config to false. Sometimes WebGL doesn’t work on some machine even on firefox 5, setting webgl.force-enabled to true helped.

Update:

Pantelis Kalogiros has modified the demo into a full game with menus and customizations for his kinectJS demo, this is truly a awesome work by him. Check it out here: http://kinect.childnodes.com/

Air hockey WebGL @ Mobile World Congress 2012 – Barcelona by Webinos, details here http://webinos.org/blog/2012/02/25/webinos-demo-series-6-air-hockey-webgl-gaming/