It all began half a year ago when I sat down with a friend and fellow crew member, Stephan, and we agreed that Gothic was indeed one the best RPGs of all times (seriously, if you don’t know it and are into RPGs, you should get it). We also soon agreed that it would be awesome to experience it’s amazing atmosphere in a browser, using WebGL. Stephan shopped two shiny new copies of Gothic and we started hacking away and gave the project the very fitting title RavenJS…

Update: Stephan recommended to put the video on top,  so here it goes: Some impressions from RavenJS, enjoy (fullscreen and headphones recommended)!

The Beginning

When we started, I had little to no knowledge about working with 3D and OpenGL – I’m a JavaScript guy, after all. When I first fired up Blender and tried to work with it I was pretty close to dropping the whole idea again. Same happened when I saw how shader code looked like. But I so much wanted this – and the existing wrappers like GLGE or three.js enable us to still work with WebGL even if we don’t have the background knowledge.

So I decided to go with GLGE as I had already played around it with it’s examples before and because it already had nice collada support, which I decided to have as format for meshes and animations.
The first step was to extract some assets from the original game, collect mesh and texture data and get it into Blender. Luckily, Gothic has a highly active modding community, and this community is supported by the original game developers. So there were a couple of tools that could be used to aid in this, and it didn’t take long and we had a sword rotating in a browser.

But if it was possible to load a sword into GLGE, then shouldn’t it also be technically possible to load parts of the world into it? Yes, it was. It took some time, and it’s still far from perfect, but it worked. The next step was to create a first person camera that would react to mouse and key events – and had collision detection. Real collision detection, a height map would get us nowhere, as the levels had bridges and indoor locations, and I needed moving objects, too. Luckily, GLGE had some demos using raycasting to achieve this that I could use as start and modify until it worked as needed.

To recreate the dark intense atmosphere I played around with the right ambient lighting, fog types and added a sky box. Well, I would have loved to have a real sky dome, but, alas, I have no idea how to do this… Finally, I added objects, both static and animated.

In action

I can’t and won’t put online a live demo, as I obviously have no rights to do so. The copyright of the meshes and textures used belongs to the original developers, Piranha Bytes, and the RavenJS project is in now way endorsed, encouraged or supported by nor affiliated with them. But I can show you some impressions of what it looks like so far (fullscreen and headphones recommended):

Update: Video is now on top :)

(The song in this video is called “A special thing” by “amanyth” and published under a Creative Commons license.)

Issues

Besides the mere amount of free time that is needed and lacking, there are currently four main issues that are a bit of a show-stopper:

Animations caused a big deal of problems, and it’s still not prossible to run more than one animation sequence – running multiple animations will screw up bone position. While the animations still run fine in Blender, something goes wrong during the export. I’m still to find out if this can be overcome by using an alternate format for export.

Another thing that is still unsolved is “double-faced textures” that have transparent parts (look at the trees in the video). Those transparent parts become plain black when rendered in the browser. I’ve read up on this, and it seems that this scenario is indeed not trivial… From what I understood so far, in our case there’s two shapes “glued” to each other and each one has its own material, but I still have no idea what exactly goes wrong.

A real biggie, performance-wise, is that there is no logic yet that handles display of objects that are not visible. In the original game e.g., doors and the likes are “closed” by vertices with solid (non-transparent) textures and everything that’s behind it is taken out from the whole rendering/object interaction/whatever process. Only when you get really close you can see through these and see the intereour of the adjectant room. If these vertices get actually removed or if you “portal” through them I don’t know.

Mouse lock. Of course. No further explanation needed, we’re all looking forward to seeing this in the browser.

Future

I always loved 3D games. And the fact that it’s possible to render 3D worlds in a browser – with acceptable performance – is just stunning. The majority of work is still ahead, I’m well aware of that, but I *so much* want this to happen… So I just hope that some of the major problems can be solved and this project can go on!