Pandora's Box in 66 lines of JavaScript

[mfdesigner]

Hi,

 

I'd like to announce the new collision detection, physics simulation, and post processing features in the latest build of oTakhi Platform - a drag'n'drop HTML5 game development engine wherein users can share game assets and code logic as reusable components.

 

This scene below, Pandora's Box, is created in just under 66 lines of javascript.  

It is made of two separately rendered scenes and uses the following techniques:

 

(1) The main scene uses Vignette, FXAA, and Focus post-processing filters.  The Vignette filter gives the scene a darkened surrounding.  The FXAA filter provides a much better anti-aliasing in removing jagged edges.  The Focus filter gives the background objects a slightly blurred effect while putting the box in focus.

 

(2) The secondary scene (behind the main scene)  is used to generate occlusion buffer for the light object.  It uses VBlur, HBlur, and Radial Blur filter to create god rays effect.  It is then added / blended to the main scene per rendering cycle.

 

(3) Collision detection is enabled between the lid and the box.  The scene is given a downward gravity and the lid a positive weight.  A Hinge joint is created connecting the lid and the box.  When you drag the lid using the mouse, an impulse force is applied on the lid.

 

 

I will pose a HOW-To video here in coming week.

 

Steve

 

 

 

 

[joannesalfa]

It takes a long time to load, I'm seeing a line of light... nothing else during less than 5 minutes, I guess it needs a very strong PC to run.

 

No offense, would you add a modal to turn off FXAA, Post-processing filters, etc.? If you do, you can show your project to everyone without problems.

[adiian]

Looks cool, but I'm not able to open the box. I can only rotate the scene. It takes 10 seconds to load or even more and when rotating the scene it's a little bit fragmented(on an i7).

[hustlerinc]

This crashed Safari on my ipad 2. Screenshot looks cool though.

[mfdesigner]

First of all, thanks for you guys' feedback.

 

The tutorial took far more time to make than the scene itself... but here it is.

 

 

Most of the 3D content is currently NOT being distributed via my Content Distribution Network (CDN).

And therefore you are downloading them directly from my servers at Texas, USA.

 

At a later time that we deem appropriate, e.g. our software is feature complete, I will push 3D content to the cache servers

all over the world and you shall see a huge performance boost in downloading speed.

 

For example, this demo video is hosted by the CDN.  You will be downloading it from one of its regional cache server.

Let's see if you have any issue.  The video is 38.5 MB in size.

 

The line of light artifact is merely the result of the lid not being closed completely.  The tutorial solved that issue.

 

Steve