WebGL Myst Game
I've been working making a Myst III style game in WebGL for a while now. I made one quite a bit ago that takes place in the middle of some clouds, but it stopped working.
To get a look at the game in it's current state, click here
Read more under the cut.
The game essentially works by putting a box around the camera that is textured to look like the camera is really in an atrium of pillars. This technique is called skyboxing, and sorta resembles the way Wile E. Coyote would attempt to trick the roadrunner by painting a tunnel into the side of a cliff.
I'm packing the textures for these boxes like this. Although the size of each subtexture in the image is a power of 2, there are still sometimes visible seams on the edges of the box, which ruins the illusion. I've been looking into how to force threejs to use integers for it's UV mappings, instead of fractions of the width/height. That might fix it.
In order to keep the preload code easy, I've combined all of the assets into a single JSON file by using base64 encoded data uris. Although the file is big—about 11 MBs last time I checked—the loading code is just a single ajax request.
This might not be the best solution, however. I've heard reports from people who say the game refuses to load, or loads with incomplete data (skybox walls missing, etc). I think the problem is the main data file gets truncated. It might have something to do with my host (I'm using github pages) but if it's not, I have no idea how to fix it. Is there a hidden limit on how big a JSON file can be, before the browser just says "no, that's enough, we're cutting it off?" Wouldn't that limit be on the javascript side, not the browser's file retrieval side?
Whatever it is, it's keeping me from showing this to about 50% of chrome users, which is frustrating since I'm really proud of it.
I thought it would be neat to experiment with video textures, perhaps making video skyboxes. In Myst III any kind of animation was taken care of by cinematics; the user would lose control of the camera, it would move toward an area of the skybox and a video would play over it. I've been experimenting with setting the walls of the skybox to an animated webm video. These webm files are actually surprisingly small. About 10 MB per.
Additionally, I need to figure out an elegant way to allow "zoom views." When the player clicks on an object they should be able to see a close of view of it in the form of a static image. Also, the zoom views should allow for interactivity. An example being a sliding box puzzle or the like.