Jump to content

DOWNLOAD MODS

Are you looking for something shiny for your load order? We have many exclusive mods and resources you won't find anywhere else. Start your search now...

LEARN MODDING

Ready to try your hand at making your own mod creations? Visit the Enclave, the original ES/FO modding school, and learn the tricks of the trade from veteran modders...

JOIN THE ALLIANCE

Membership is free and registering unlocks image galleries, project hosting, live chat, unlimited downloads, & more...

3D HTML5/Javascript Game


DaMage
 Share

Recommended Posts

I'll update this first post over time to make it look 'pretty', but for now I just feel like getting the basics down.

 

 

Background

As you guys might have noticed I stopped modding around the middle of last year, there were a few reasons for this, the final year of my degree was tough (and I wanted perfect grades so it took a ton of time), then over the summer (November - February) I got my first ever job as an intern at a government IT company. I thne postponed graduating to add software engineering to my degree, which I am doing now.

 

But one of the biggest reasons I stopped was because I learnt how to build a 3D renderer, and that coupled with my modding knowledge, had a near complete skillset to build my own game engine. I started building one in C++, and it works and looks great, but is only still a renderer, however during my job I had to do a lot of work with Javascript and a HTML5 canvas and it occurred to me that if I could build an engine in that it would be really easy to distribute. Hence this project was born.

 

I started a few months ago, but had to stop working on it once university work took over, I had this week off and spent a ton of time making my engine actually do basic 3D. Once next week is over I have 5 weeks of holidays in which I want to develop a basic game, and at least attempt to take this to the next level.

 

 

3D HTML5/Javascript Game

This is as much a proof of concept as a real game idea, of which I am attempting to a make a 3D game that could be distributed over the internet as a it could run in your browser. To do this I am manually creating the 3D game image pixels and then copying them into a HTML5 canvas. While many would go and use something like WebGL for the actual rendering, as part of my experiment I want to build the pixel renderer myself.

 

At the moment the 'game' part of this Game is just an idea locked in my head that I will reveal later as I see how viable my engine is. Needless to say, the idea is sort of a dungeon crawler where you the player can create the dungeons that people can use.

 

Pictures

The intial stage, the renderer is able to show static 3D models, no textures or lighting yet. Camera can be move around, but controls are basic. The various rendering steps have not been optimized yet, but the FPS for this simple scene stays around 50.

post-108-0-92915300-1370687653_thumb.jpg

Link to comment
Share on other sites

If anyone reading this has see a similar a project where someone has been building a javascript based 3D renderer without using WebGL, could you post a link to them? I've done searches, but most people have only scrapped the surface of such a thing, and I'd love to see what others have been able to do.

 

I'm just going to continue to document what I'm up to, even if nobody who reads this understands what I am saying.

 

To update on what I've being doing, I added basic support for textures along with really improving my FPS by changing how the depth buffer is set. At the moment there seems to be a laggy spot with either the triangle decomposition code, or with the triangle edge forming code....however that lag only kicks in when a large polygon has a texture and clips the edge of the screen.

post-108-0-12555500-1371391473_thumb.jpg

 

The biggest bottleneck I have found with this project is the getting and setting of value within arrays that have 200,000+ values......javascript is really bad at handling such large arrays. Trouble is the screen, depth buffer and all the textures are these big arrays....so it's all been about trying to limit access to these as much as possible.

 

Moving forward I need to optimise that code and look at a few things:

1. Lighting per vertex effects, still tossing up if I want per vertex or per face....most likely I'll test both and throw away per vertex if it is too expensive.

2. A C++ program to convert .obj to my json based object format. Luckily some old code that loads .obj's will make this easier.

3. A simple dungeon generator. Think Elder Scrolls: Arena style, flat walls and all level.

4. Moar Optimisation, such as front-to-back face/object ordering and just other tricks with the arrays to squeeze out more FPS.

Link to comment
Share on other sites

I realized quickly i need a way to get high-poly model into my engine if I am to test how it copes with lots of triangles, which basically means I needed to get cracking on my .obj to .json converter. In a previous project I had also created my own material file instead of using .obj's really confusing one, i call mine an .xmt and it is hand created when I do models, its a super quick process as most models don't have many different materials and it just hooks into the same naming as when the .obj uses.


After two nights in visual studio, I now have a very simple command line program to convert them, it really need more development, but it does enough for the moment. As I have done in the past, I used Oblivion's Iron Cuirass as a good testing model. It has a decent texture and plenty of triangles. Also, the reason the background is white is that I'm working on a new gradient system, but its not ready for show yet.

 

post-108-0-21029000-1371982677_thumb.jpg

 

So that high poly model caused a bit of a frame drop, but considering it has 403 faces, I would call that a large budget, also this is unoptimized, and I know one spot that really needs optimizing for the triangle creation. It also has a larger then normal texture, which has a huge impact on loopup speeds and where much of my FPS has been lost to.

Link to comment
Share on other sites

So there aren't any new pictures for this update, as animation does not come across well in static images.

 

I have finally hit a roadblock that has no real solution.....poly count. Part of the rendering pipeline involves multiplying each vertex by a number of matrices, these involve the translation, rotation, scaling, camera and projection. This is where all the tough maths is for the computer and what video cards are made for....mass matrix multiplication......JavaScript however, is not made for such things.

 

The trouble is, JavaScript is so slow that doing all these multiplications on even 100 vertices, will bring the whole thing to a slideshow. Huge problem.....

 

Now as far as I've seen, I've got tons of memory to play with, so I'm going to take advantage of that. See for the translation, rotation, scaling matrices (5 in total), unless the object's values for those is going to change (eg, animated object) I don't actually need to compute the multiplication every time, I can just compute it once when the object is loaded, that way static objects, like the floors and walls now have significantly less impact on the performance.

 

That helps, but it is far from a solution, of course any model I load into this is going to have to be super-low poly....like early nineties low poly. Definitely going to have to chuck some sprites in there.....but whatever.

 

Edit:

Another idea, at the moment I calculate faces one-by-one, but since faces share vertices, I am in effect doing the same calculation multiple times. A much better method would be to calculate all the vertices, then starting doing the various faces. My data structure already supports this, I just need to modify my pipeline.

Link to comment
Share on other sites

Going to do a mini-update here to show a new picture....since I didn't put a picture with the one yesterday.

 

I spent the day looking into improving my matrix algorithms and also doing various other fixer jobs and adding wireframe mode. I maged to improve my test case from 60-70 FPS up to 110-115 FPS, through doing some hardcoding and duplication parts of code rather then using a loop. In worldspace the apples are actually spinning around, but that doesn't come across the in the pictures.

 

To the pictures!

 

Normal:

post-108-0-80515300-1372665987_thumb.jpg

 

Wireframe: (sorry for the bad background)

post-108-0-95624600-1372665989_thumb.jpg

Link to comment
Share on other sites

  • 1 month later...

So I've been working on another unrelated thing lately, so my time quickly disappeared for working on this project. But this week I made some time to try and solve the issue I had run into before, mainly the fact that textures were not rendered correctly. Oh, they looked fine on the iron cuirass up there, but if I was to move the camera, you can visually see the texture warping incorrectly.

 

So in rendering there is and issue to do with mapping 2D textures onto a 2D plane that is represented in 3D space.......anyone who has experience with 3D modelling will know about UV coordinates, and how you use them to say where the texture goes. Well when rendering if you just use those values (which are assigned to the vertices), then you end up with whats called 'affine' texture mapping, its quick and easy to do (since you just read the UV values), but its ugly. This is because you are mapping a 2D texture onto the 2D plane on the screen, however that plane's back edge might be 'into' the screen, hence it should look smaller since it is further away, but affine ignores this effect and just pastes it straight on.

 

The correct way to do the textures is called Perspective Correct Texture mapping, where you the special 'w' values from projection to modify the UV coords interpolation so that the further away from the camera it gets, the smaller the texture is. It really complex, and it took me days to get my head around the maths.

 

The biggest problem is I am now well into the area where people just dont do programming, this stuff is all done for you in openGL and other....so very few hobby programmers know anything about how it works. Which was frustrating as the only info about it would be from thesis summaries and such....which are really hard to read when you are learning. I've also now gone beyond anything I have every had to program in graphics rendering before, in university we had switched to openGL once we got to texturing. Its all brand new, but so much fun to learn.

 

Now for the bit you non-programmers like, pictures! well only one picture, but still:

post-108-0-48647200-1377242475_thumb.jpg

 

As you can see, now that hallway form before has textures on the walls, and the whole thing is starting to look like a real thing. Basically there is three parts left to all this, one easier then the other two.

 

1. Lighting. At the moment everything is bright and colourful. Realisticaly I want to put a light into the scene, so things further away get darker and plain shaded objects get more definition. This is the easy one.

2. Animation. At the moment there is only basic rotation, movement and scaling. What I need to be able to rig object up to a skeleton and move them around like that.

3. Optimisation. At the moment it run 'okay'. In that hallway I was getting 30FPS, but there is so much code in there that is just useless and slowing things down. Also, many of my functions were created 'to get things started' and could be made much faster.

 

Tune in next time, whenever that will be.

Link to comment
Share on other sites

:clap: Glad to hear that you`re working on this. So...when you speak of Perspective Correct Texture mapping , it  kinda sounds how our Mip Maps might be being generated. I`m gaining a greater appreciation of what`s involved in actually applying the theories to build a ground up engine. :pints:

Link to comment
Share on other sites

:clap: Glad to hear that you`re working on this. So...when you speak of Perspective Correct Texture mapping , it  kinda sounds how our Mip Maps might be being generated. I`m gaining a greater appreciation of what`s involved in actually applying the theories to build a ground up engine. :pints:

You are sort of close. Mip maps are used in the sampling step, which is the bit that happens after what I was talking about. The summary is that if you have plenty of memory, a mip map is just a smaller version of the texture, this is used when the texture is far away and you arent sampling every pixel, this way you dont have to try and merge colours from multiple  points on the texture on the fly which can be expensive.

 

 

Did a little bit more today, just a quick job to see how viable doing some flat lighting would be on my models, as it turns out, very viable and only drops the FPS by a couple of points. There are two types of lighting that I know of, flat shading, where the entire face is lit the same, and another one where each vertex is lit and you smoothly spread that over the model....I forget what it's called. Obviously flat shading is cheaper to do, and I feel for my blocky models that by-vertex lighting wont look all that much better. Remember before how I was talking about matrix multiplcation, doing per-vertex would basically double the amount of maths as every vertex would then have to have a normal to be calculated aswell. Doing it per-face with flat shading means significantly less normals to be calculated.

 

If you are familar with the phong lighting model, you'll know about ambient, diffuse and specular. Using these three components you can fake the lighting to look quick good for an area, and it is the most common non-ray tracing way of doing light. That model only really works if you are doing light per-vertex, so for mine I have only used ambient and diffuse. Now onto what that means, ambient is pretty simple, this is the amount of light that lights the object from any angle. This way there is always some light hitting all faces in the scene. Diffuse is then used for light that is actually hitting a face, so the more a face is facing towards a light source the brighter that light source makes it.

 

So how does it look? Well like this:

post-108-0-06386400-1377343140_thumb.jpg

 

At the moment I have a single global light have has infinite reach, which is good for testing, but of course this still look unrealistic. I need to create a new 'light' type object that can radiate light out realistically, but for the moment, this shows off the lighting.

Link to comment
Share on other sites

Wow, a few updates in a row here......sometimes i just get on a roll with these sort of things. No pictures on this, as nothing visually changed.

 

I finally started optimizing my code, I quickly found two trouble spots, a huge slowdown of around 100FPS when I rasterised the polygons into triangles (converting the 3D shapes into 2D triangles). This had little to do with the maths however, it was all about the way I had been writing my JavaScript objects. I prefix by saying before I started this project I had limited knowledge of how JavaScript worked, hence this mistake. When I was declaring my objects I was declaring all the properties and functions within the 'function' that javascript uses to define things.....this meant whenever I created an Object of that type, everything within it got declared again. Since I was creating hundreds of triangles/polygons....it got real expensive quickly

 

There is a simple fix for this, put all the declarations for the object in the global scope and use the 'prototype' tag, and only have the constructor code within the actual definition. Works a treat, suddenly the majority of the slowdown that was causing disappeared. Good enough for now, might come back to it later if as I add more it starts to slow down in the maths.

 

The other trouble area was the good old scanline again, where the pixels are saved to 'screen'.....it has been a problem area since day one. Time ofr me to roll up my sleeves and have another crack at it. Its basically slowing me down from 200+FPS to about 30 on this simple scene.....not good.

 

JavaScript doesnt have variables types that you ca nsee, but behind the scenes it still uses them, meaning that alot of int ot float conversion can happen without you seeing it....this is expensive and I need to stop it. I found by bit shifting by 0 (which does nothing) it forces the variables into integer mode....and integers are much better to increment then floats.

 

I then notice that the ZWUV values I interpolate through for texture mapping are causing one hell of a slowdown....which is very annoying as it is only addition...but the problem is it is all floating point addition. However one thing I can do is stop it from doing the WUV interpolating on models that dont have textures. 

 

I remove the code I was using to implement wireframe mode....turns out it was wasting 5FPS even when wireframe was not on....gah, was a silly bit of code...get rid of the whole implementation and I'll try and do it better at some other point when I want it again.

 

Now the code to generate textured wall and flat code walls is the same, except that with a texture a whole heap of extra work is done....but in order to do this there are a few if statements to separate the code. I've decided to hard-split this code and duplicate the bits that are the same...not as manageable, but it grabs me another 7-10 FPS so it's worth it.

 

 

So at the end of all that I manage to increase my FPS on the simple scene from a laggy 20-24 FPS up to a crazy 67-71FPS. Much better. The FPS is completely dependent on how much of the screen is covered.....which I may be able to exploit if I create outside areas and use a gradient sky.

Link to comment
Share on other sites

:clap: Very nicely written Mage. At the end of all this (hopefully successful ) , you could write a book. :D Without knowing anything about coding, I can see that creating duplicates would be something that could easily happen and one more thing to watch out for.

I`ve heard how Gamebroyo , as Oblivion uses it, could be more efficient if it only had to deal with the world which is in the imediate camera`s view , rather than keeping track of NPC`s in other locations..or something like that. Anyhow, I`m glad that you were able to recover so much performance. :pints:  

Link to comment
Share on other sites

I'll give a mini-update and a cool new picture up here....despite everything I'm talking about being over a week old.

 

So I continued my search for slowdown spots in the spare hours I had last week, turning my focus now to the vertex maths, since the screen drawing is about as good as I can make it at the moment. I spent ages simply trying different techniques to speed up vertex maths....but other then pre-declaring some vertices and overwriting them rather then creating new ones with each run....that was very little I could do to sped it up....the reason for this is simple:

 

When I go to start rendering an object I have to make a copy off all the vertices, this way I can transform them without damaging the original data. After I transform all the vertices, I then have to make another copy of the vertices for each face, this is because faces can share vertices, and if one face transforms a vertex for rasterization then it damages the data for the other face.

 

So in the space of a few lines I am basically copying all the vertex data twice.....ergh...what a pain.....and it causes so much slowdown. Using some packing techiques I put the vertex data into a typed array rather then an object so the first copy is much faster....but the second one when faces are done cant be helped....its slow and I cant see a work around. I also cannot do any of the face ruling-out techniques to skip drawing a face at this stage I am in the wrong coordinates space, all i can do is simple 3D clipping......something i really have to look into is finding a way to rule out away facing faces sooner then I am.

 

Anyway, all my efforts do yeild plenty of progress, and I gain plenty of FPS by doing all this......and I now have a fair vertex budget for things on my screen.....by my reckoning I can safely put about 10,000 vertices on screen at once.....this is tiny compared to a normal renderer, but much more then I expected. That apple you've seen in the pictures so far is 60 vertices, in my world, that would have to be a high-poly model....as ridiculous as that sounds. I'm hoping with some engine side object selection I can quickly rule out objects out of view to allow much more in my rendering scenes.

 

Even at 30,000 vertices I still get about 16FPS on my desktop, 12FPS on my laptop. And thats one of the interesting things about this project, since this is JavaScript the whole thing is running on a single core of your CPU......any system with a decent CPU speed can run it at the same sorts of speeds. Personally I'm amazed how far this has come and what JavaScript can actually let me do.

 

Now for a picture....I've finally gone and made some 'art' to put into my scene, rather then that terrible test hallway from before.

post-108-0-26697600-1378217867_thumb.png

 

 

Since the speed is enough for now I want to move on, I need to still implement the lights correctly...though that will not take long....but what I want to do is implement a UI into the engine, which is something I've long thought about, but never had the chance to implement in a project before.

 

I've also started thinking where to take this.....I definately want to go towards making a game using all this work, and I'm thinking an offline, C++ written level builder may be in the cards to be built in a few months.....tune in next time when I show off some UI features......though that may be some time away yet as I have some other things I need to go back to working on now I've had my fun on this project.

Link to comment
Share on other sites


Gonna remake Arena?  :lol:

Gods no, I played that game again the other day...it look absolutely terrible now. Graphics wise it uses the ancient 2.5D ray casting technique to draw onto the screen, I at least can match Daggerfall's early true 3D and sprites combination :lol:
 

Nice update , thanks. I was wondering about the .."objects out of view.." aspect. Seems like an .. in camera view ... out of camers view ... kinda thing.

So it makes sense that objects that are not on screen right now are much cheaper to draw....or rather not draw..... the reason for this is despite still requiring all the vertices for every object to be transformed no matter what (since you need to move them to the correct position to even see if they are in front or behind), faces that are formed outside of the viewable area (like behind you etc) can quickly be skipped over by doing a 3D clipping technique. Hence the second copy that happens when a face is going to be drawn never happens, nor anything after that obviously.

 

I hope that answers what you were saying.

Link to comment
Share on other sites

 

Gods no, I played that game again the other day...it look absolutely terrible now. Graphics wise it uses the ancient 2.5D ray casting technique to draw onto the screen, I at least can match Daggerfall's early true 3D and sprites combination :lol:

 

:lol:

 

That's actually what I meant, a remake with better graphics or to borrow from current gaming and modding trends, a HD upgrade :D

Link to comment
Share on other sites

  • 2 weeks later...

Well it would seem the programming bug has gone away for now since I havent done anything on this for about a week, I've still got plenty of ideas I would like to implement into this, but my motivation has dried up....need to go and spend a bit of time doing some other projects and rebuilt enthusiasm for this.....not to mention university is just about to kick into the final few weeks of semester....so that's properly a good thing. On that note I will leave you, and record for myself, a final picture of where the project current stands.

 

Since the last update I tackled some simple lighting, and then created some very simple GUI elements, so that now there is a start menu, options menu and a crosshair in the game. It certainly adds quite a bit of really cool effect into the engine.

 

The lighting is very basic, each vertex is distance checked against the lights in the scene and a 'illumination' value is stored, this is then interpolated along in order to make all the pixels have approximately the correct lighting....in modern engines this interpolation wouldn't happen in this way as it does not make picture perfect lighting....but it'll do for me since it's very cheap to calculate.

 

The UI was really interesting to develop, it is an element I have thought about before when building a game engine, but had never gotten to the point before.....and it works exsactly like I thought it would. Basically you store the location and size of each element, then when a user does a mouse event, like a click, you search through your UI elements for the one that takes up that spot. If you use an ordered array, then by searching back to front you can also pick the correct element if two are overlapping. 

 

One thing that implementing a UI was good for aswell was overhauling how the loading worked, now I could have an opening menu with a start menu that then loads up the level, i also got to restructure my files into a better folder structure and stuff around with moving options from outside the HTML5 canvas into interactive UI elements in the screen, hopefully in the future this will be able to be played in fullscreen mode in the browser and look really sweet.

 

So finally to the picture I will leave you with, a great shot from the same camera angle as last time that really gets to show off the progress. Its been a fun few weeks since the update on the 23rd.

post-108-0-31828300-1379073826_thumb.png

If you are wondering, that checkerbox rectangle is a button that takes it back to the start menu.

Link to comment
Share on other sites

  • 1 month later...

So today I am going to be talking about how to draw the sky into my game engine.....which is much harder than it sounds. WARNING: This is going to be a big post about a since topic and have a fair amount of geometry in it.

 

Most people simply think of the sky as 'blue' but if you actually look at it you’ll see that on the horizon it’s nearly a white colour and towards the spot right above you it’s quite a dark blue, simply put that’s a gradient. To put it into 3D terms It’s actually a radial gradient spread over a half-sphere that surrounds you.

 

Now I need to somehow take that information and put into a 2D form to be the background behind my engine, but also change it depending on how high or low the player is looking with it making sense. Most game engines use a skybox or simply in order to do this, that way they can ‘paint’ a sky texture and let the 3D modelling do the work of adjusting. I can’t really do that. It is simply too expensive to draw such a dome, especially since textures cost so much already in my engine. My solution needs to be algebraic.

 

There are two ways to approach this then, working from the 3D and getting it into 2D, or working from the viewport and getting the 3D, I chose the latter. If you look way back in these posts you’ll see I have a vertical gradient background in one of the pictures, that is what I was working to replace…..hence it formed a good starting point.

 

Now when you think out the horizon it’s a light blue at the bottom and turns into a dark blue the further you look up….that’s a simple vertical gradient. But if you look straight up its darkest in the middle and gets lighter as it goes out….that a simple radial gradient. Oh dear, now I have two different gradients that somehow meet in the middle….this is where the 3D world is screwing with me as I try to work in 2D. The solution I ended up with was to treat the horizon as the out edge of a very large radial gradient, so that the curvature would be small enough that it looks horizontal.

 

So I have a 3D half-sphere with a linear (using linear to keep this simple) radial gradient on it, if I squash this down from the top in a 2D circle it might be useful….while yes, it also has the problem that the gradient is now non-linear….and I really don’t want to deal with non-linear algebra. But it still serves as a good starting point. I use this radial gradient and use the camera to only show part of it, so that as you look up the camera moves towards the middle. It works well but the non-linear gradient makes it look not-quite-right and since I am working pixel-to-pixel with the gradient I cannot make the gradient at the horizon look flat, it has a monster curve on it.

 

I start thinking about non-linear gradient and quickly realise that a Gaussian curve gradient might look better, the advantage of Gaussian is that it tappers off slow at the beginning and end, but quickly in the middle, and if I speed up the end section by doing some exponential division I can make the end tapper off quickly as well, leaving just the beginning ot be slow. That lets my dark section take up more of the sky, and tappers off quickly the closer you get to the horizon. It’s very similar to an exponential curve, but I have a bit more control over the beginning and middle.

This is now starting to look much better, but the horizon is still too curved for my liking, instead of a circular gradient, I change it to an oval, this levels out the horizon nicely and it doesn’t look too obvious when looking upwards.

 

Ta-Da! I now have a sky.

 

The sky is stored as a huge texture that is the same width as the camera, but several times taller. By drawing different parts of this texture as the background depending on the x-axis rotation of the camera it gives the illusion of looking up into the sky.

Here is a diagram of what I mean. In the background I have the full texture that the algorithm could generate. The Red box represents the texture that is stored and the yellow box is what the camera could look at. By moving the camera up and down it seems as if you are looking up into the sky.

post-108-0-38181900-1381910429_thumb.png

 

Lastly here is a picture of the sky rendered, I have moved the camera outside of the ‘dungeon’ so you can see it. Sadly the whole change while moving upwards illusion is lost in a still image.

post-108-0-25410300-1381910421_thumb.png

 

It looks a bit bland outside of the dungeon though, next up will have to be a distant 2D picture (think the mountains in the distance from 90’s games) that hides the horizon a bit, and also maybe moving this project outside, meaning its would be time for some height maps.

  • Upvote 1
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...