First raytraced online game

I had some free time last weekend, so I decided to try to write some simple raytracer. It runs in real time on the GPU, it is controlled by JavaScript.

Inspiration

The first time when I heard about raytracing was about 3 years ago. I was fascinated, though, I had absolutely no idea how it works. It seemd to me like some kind of magic.

I was attending 2 courses of computer graphics and a course about hardware and rasterization during the past year, so now I know a little bit of this magic :) .I decided to write my own simple raytracer from the scratch.

I have seen several raytracers that run on CPU, some of them were even in JavaScript. I also have seen some raytracers that run on GPU, written in shading languages. I wanted to make a real-time raytracer that shows the animation, but to make it more interesting, I made a simple game from it :) .

First Raytraced Online Game

Description

There is a rectangular floor and two balls on it. When you click "Start", balls start to move and try to roll over you. You have to run away using cursor keys (or jump over the ball using spacebar).

Technology

The drawing is coded in GLSL, in fragment shader. Game logic is written in JavaScript, passed to the GPU using "uniforms". The whole thing can run in web browser using WebGL technology.

There is a static texture of outer environment. Balls and floor are shaded using Phong model. There are two levels of ray "recursion" (just two calls of function, recursive functions are not allowed in GLSL).

Conclusion

I have an average 3 years old laptop and Windows OS. I could run the demo at 60 FPS at Medium size and 43 FPS at Large size.

I really wanted to add much more interesting objects and effects into the game. But unfortunatelly, it was starting to be really slow (30 and less FPS). There are some new technologies - OpenCL or CUDA - which allow us to use GPU more efficiently than through shaders. There even is a new standard called WebCL, but sadly, currently it is not implemented in any official release of any browser.

Old comments (closed because of spam)

5 Comments

  1. Gustav said:

    Nice. Some rendering bugs both in chrome and safari on osx though. The backdrop is just a bunch of pixly artifacts.

    Also, 77.8 sec!

    June 25th, 2012
  2. alex jennings said:

    Nice info :) Keep up the good work!

    September 3rd, 2012
  3. » Pathtraced online game said:

    [...] have made a Raytraced Online Game few months ago. It looks nice, but it does not look realistic, so I decided to rewrite it into Path [...]

    January 18th, 2013
  4. Jim said:

    45.5 sec first attempt :) This kind of reminds me of the Might & Magic series many years back when everything came with pixels and the backdrop is just a blur!

    October 10th, 2013
  5. Alex said:

    I was scared sh*tless when I stopped, turned around and ball was right there. First raytraced horror game :D

    October 20th, 2013