DaMage

3D HTML5/Javascript Game

78 posts in this topic

So I have discovered that an algorithm call Smart Triangles that I use for converting a concave polygon into triangle does not work in the way I thought it did, and the code I was using for it only works 70% or the time. For simple polygons of 5 points or or less it is fine, but once I get 10s of points forming a polygon, it freaks out and creates incorrect triangles.....oh dear.

 

After reviewing my materials I found where the error was....but boy is it going to be a pain to fix...basically I was cheating my way through it, when I found a triangle that didnt fit, I would simply skip it for a bit until I had done more triangles and hence maybe later on it would fit.....which works...but not for polygons with a ton of points. Again, this is just a bit of really old code that I just accepted as working, when it really didn't.

 

What you are supposed to do is when you find a triangle that doesn't fit (which means there are other points of the polygon within the triangle) you are to divide the polygon into two smaller polygons, where the dividing line is drawn between the your starting point, and the leftmost of the point that are within the triangle....You then apply the algorithm to both of these polygons, and if you have done programming before you'll notice this would be done through a recursive function.....which I hate using.

 

A recursive function is a function that calls itself, eventually it hits some point in it's recursion and finishes, going back up the chain completing each function that was called. Think of a stack of plates, where every plate put on the stack is an instance of the function calling itself, once a function finishes it gets taken off the stack. That way once the function at the top finishes, it allows the one under it to finish and so forth until you complete them all.

 

 

Its a part of programming that I always struggle to work with as it is really hard to keep track of in your head what is going on and what values you are passing up and down the function. Just thought I would share this bit, more just at my annoyance at having a problem like this come up.

0

Share this post


Link to post
Share on other sites

Long time, no update....time to fix that. I took the last two/three weeks to work on another project basically as something to put in a portfolio later down the line, now that it’s done however I can get back to working on this.

Back when I was talking about the different techniques for building a level I offhandly talked about the industry way of creating a level using a single 3D model, but I forgot a very important aspect to that technique, that is that you can do a ton of vertex and face saving as you know exactly how it will look. As I worked on the 2D to 3D level creator I noticed that in order to make it use as least vertices as possible, it was going to need quick a lot of work to handle a ton of special cases…and even then, it would end up using more vertices then it should.
 

So I’ve come back to the idea of using a single 3D mode for at least the rooms/walls, and making the 2D mode I’ve built become a sort of collision overlay that you apply to the rooms in order to define where you can and cannot move around. That way I can make the rooms very vertex/face light in Blender, add in the objects for the room, and then basically path around them like the navmeshing from Skyrim/Fallout 3 to define the collision.

 

Anyway, stay tuned for some more frequent updates again.

0

Share this post


Link to post
Share on other sites

The time has come to do some badly needed housekeeping on the code for this project, on the editor side that is. When I develop code I work on the theory of get it working, then work backwards and make the program work better, that way I can clearly tell if my changes are helping…or not. That said, I do try to plan ahead so that when I get to this point, I’m not doing too much restructuring.

 

First off I better discuss where I am up to and what I’ve changed. I decided to scrap using SDL to create my render window, instead I just put the render inside a window in the editor and still use GLEW to talk to OpenGL. This has made it much easier for me to do interaction with it when using other windows in the editor (whereas before the other windows couldn’t see it). I then have an Objects window that holds a list of all the base objects for the static models I have loaded into it. I can add, edit and delete statics from this list as I please. To put objects into the scene I just drag them across. As you can see I have based the design off the Oblivion CS, since I am pretty familiar with it and like how it works.

 

But throughout this latest bit of development I have been using a number of quick fixes in order to share data about, the worst being a static global object that has it’s data modified from all different sections of the program. It also lacks any documentation or standardised naming, meaning if I was to forget what something was, it could be a very annoying search throughout the program. As the complexity of a project increases (even more-so in team projects) little quick fixes like those snowball into huge timesinks of bad code, requiring work-arounds and other such guff.

 

The normal solution (and what I will do) is to create a fairly large data object that will hold all the game specific data (such as object, cells, references etc) that has special access methods in order to keep it tidy. Then either as a global static or just passed around, this object is made available to any other parts of the program that need access to the game data.

----------------------------------------------------------------------------

I have roughly two week until my summer holidays end, so I’ll outline what I want to have working by then that currently does not exist.

Mandatory:

General Cleanup of variables and functions.

Saving and loading a Level from the Editor.

Exporting a level from the editor for use in the web engine.

Adding Light Objects.

Development of small example Level.

 

Optional:

Add multiple cells/levels to load to/from

Add Collision creation.

Changing over to the Collada (.dae) 3D file format

 

The optional will come down to how much time I get left with after the other stuff, and also how hard each of them is to implement. If I can do the mandatory stuff I feel I will have achieved the minimum amount I wanted to get down over this break.

 

 

Talk to you again in a week when I’ll see how it coming along.

 

Picture of the editor right now:

 

post-108-0-00565000-1393069963_thumb.png

0

Share this post


Link to post
Share on other sites

Nice add Mage. I like how the editor looks so far. Is there any particular reasons why you will convert to Collada?  I`ve only ever seen the differences in image formats and have very little knowledge (if any) of the differences in 3D formats.

0

Share this post


Link to post
Share on other sites

Nice add Mage. I like how the editor looks so far. Is there any particular reasons why you will convert to Collada?  I`ve only ever seen the differences in image formats and have very little knowledge (if any) of the differences in 3D formats.

At the moment I have been using .obj....which as far as 3D formats go is really basic. Collada supports proper materials, rigging/skinning and skeletons and it puts it all neatly in a single file. Basically it will let me design the models completely in Blender.

0

Share this post


Link to post
Share on other sites

Things...are....happening......

 

 

*shot from inside the web engine

post-108-0-54607300-1393330791_thumb.png

 

 

and a little mood lighting....

post-108-0-21634700-1393336934_thumb.png

1

Share this post


Link to post
Share on other sites

nice :thumbsup: didnt notice this thread before, but for your efforts i think you deserve a :cookie4u: ... *gives cookie*

 

good luck with your project :smug:

0

Share this post


Link to post
Share on other sites

So as you might have noticed in my previous update, I have been doing a ton of work over this week, if only I could be this motivated all the time. Strap yourself in, it’s a big text dump this week.

 

Basically I have nearly all the stuff on my mandatory list from above along with some of the optional stuff, with most of it taking much less time then I estimated for and I have to say much of that was simply from good preparation. But I want to go a little more in-depth with some of the topic, especially the level and lighting.

 

As you can see I have done away with the little test level from before and have created a building interior, which I plan at the moment to turn into a tavern. The building itself is about 200-300 vertices along with just a couple of textures none larger than 128x128 (made that way both for performance and artistic reasons).

 

--------------------------------------------------------------------

 

When I put that model into my engine however I discovered a big flaw in my lighting design that didn’t appear with the super low poly model from before. Since my lighting uses a vertex based model, and not pixel-by-pixel like a modern engine when the bigger model was put in it looked wrong. Long walls could have a light right next to them and be hardly lit since the vertices were too far away. Now there is no solution to this problem, other than moving to a pixel-by-pixel model…but I can’t do that for performance reasons.

 

But, previously I talked about how I was using ambient and diffuse lighting for my lighting model, the diffuse lighting (which looks at how the vertex to light angle impacts on the amount of light received) was greatly lowing the amount of light faces were getting….and when I had big faces alongside small ones it just looked horrible. By removing the diffuse multipler suddenly the big faces got much more light and looked better. It does mean the model now suffer the problem that an object near a light will be lit on both sides….but I can live with that, it looks decent and that’s what matters.
 

I also then decided to see if coloured lights would impact on the performance, and although they did have a small impact (couple of FPS) the look of placing coloured lights far outweighs the small performance cost. I’m sure you would agree.

 

--------------------------------------------------------------------

 

I then started work in merging the editor with the web engine, so that I could export a readymade file that the web engine could load. Back before I wrote up that list I had already create a saving and loading to binary file (so I could just start some form of level creation) and this export to JSON for the web engine became an extension of that. I had to also rewrite how the web engine stored the level so that it matched with the editor, but that to some prior planning, it took very little time. It still needs a bit of work so that I don’t have to program in the path to the level file, but otherwise it works great. I can’t tell you how happy I was the first time the level I had created in the editor worked and appeared correct it the web engine.

 

--------------------------------------------------------------------

 

Before I move onto creating the rest of the level I needed to do something important, and that was to chuck away the terrible .obj file format and start using collada (.dae). After just an afternoon I managed to get everything out of a collada file that I wanted and how it appears in blender is exactly how it appears in my engine without any manual editing of the 3d model file. It stores skeletons/rigging, materials, vertices, normals, face all within a single file that I then can easily access using their c++ library. Really good.

 

It wasn’t all plain sailing though, collada is set up for integration straight into OpenGL, but my engine operates very differently from OpenGL, especially how it want data. I want as few vertices as possible since the more vertices I have to calculate the longer it takes, where as opengl doesn’t mind more vertices if all the data it want is very tightly packed…..so collada made a lot of duplicate vertices that each had different normals or texture coordinates depending on what face you referenced from. So I just had to make my importer only store one copy of each vertex that I then reference using the indices.....the collada importer is still much short then the OBJ one that I wrote ages back.

 

--------------------------------------------------------------------

 

So that’s it for now, going to take some time to make fill out my ‘level’ with some object over the next few days and hopefully by early next week I’ll have some new pictures for you.

1

Share this post


Link to post
Share on other sites

just popping in to wish you more "good weeks" :) ... yeah yeah, the classic phenomenon... sometimes small troubles take weeks to fix, other times you make major progress, have a good phase and wonder at the end: how did i manage all that?

 

best of luck :)

0

Share this post


Link to post
Share on other sites

Been working on creating the collision for my level, the idea being it has to be very simple to process so that I don’t spend much time figuring out if I’m hitting something or not, but also dynamic enough for me to create interesting levels. At the moment I’m at the halfway stage of developing it, which means I have the collision there, but it is only on a flat plane, I can’t do something like just steps yet.

 

I’ve only briefly touched on how my collision works, so I’ll give a more detailed explanation here. For a level there are a number of triangles laid out that define the area you can move within, you must at all times be within one of the triangles. Each triangle then also has a particular height to it, aka, this is how high the floor is. Using this you could have two adjacent triangles with one at a greater height, so you could fall down, but not go up it. There are plenty of drawbacks for this technique, it is really only good for broad collision and it means you cannot have collision go underneath another part. But I know this technique is fast to check against, so I can live with it.

 

In practice to create this in the editor is a little different, as you often want a whole complex floor to all be at one height and to manually create all the triangles and align them would really suck. That is where the wall/floor generator I built early has come in useful. Using it as a 2D overlay over my scene means I can draw on the collision map, then in the 3D view adjust the height of each plane (a plane is just a collection of triangles all connected and at the same height). It still needs work, as from top down it can sometimes be hard to see where the walls are, but for the moment I like it.

 

This is what the collision editor looks like, this is with the bottom floor of the tavern marked out....though that picture is a bit dark.

post-108-0-85042500-1394545318_thumb.png

 

-----------------------------------------------

 

On an aside, I’ve found my web engine is not rendering lights completely correctly….when lights are behind you they tend to fade out, meaning as I turn the lights seem to disappear off the surfaces. I think it has something to do with my 3D clipping and I might need to move my light code to an early spot in my rendering pipeline.

 

-----------------------------------------------

Hopefully a video of the collision in action next time.

0

Share this post


Link to post
Share on other sites

Spent about 6 hours this morning mucking around with the lighting on the web engine to try and fix it....an I learnt a few things. Lighting requires the same perspective correction as textures, which if done on a pixel by pixel basis, is super expensive. The compromise I ended up reaching was instead of doing it pixel by pixel, I just make sure the start and end of each scanline row (a horizontal draw) is correct, and hope the part in the middle doesn't get too incorrect.

 

It works and the lighting is mostly correct, with only a few artifacts on larger faces that are higher/lower in the field of view, but because this is lighting and not a texture its not too bad. (if did the same thing with a texture it makes the walls look like they are moving as you turn the camera). I'm not completely happy with it, and might revisit it later, but without any perspective correction it looks terrible, and full perspective correction is much too slow for lighting.

0

Share this post


Link to post
Share on other sites

:blink: I get the jist of your dilemma. Hang in there Mage. I can see where lighting just might be one of the hardest problems. Thinking about it(with my uneducated mind) .. if the camera looks at a plane at a certain position .. the lighting returns a certain value. but if it moves 90 degrees on the X (assuming a vertical plane)  .. and focused on the same point .. will the lighting return the same value?  Is this where shaders come in?

0

Share this post


Link to post
Share on other sites

:blink: I get the jist of your dilemma. Hang in there Mage. I can see where lighting just might be one of the hardest problems. Thinking about it(with my uneducated mind) .. if the camera looks at a plane at a certain position .. the lighting returns a certain value. but if it moves 90 degrees on the X (assuming a vertical plane)  .. and focused on the same point .. will the lighting return the same value?  Is this where shaders come in?

You are absolutely correct, but in my engine it those calculations are too expensive for me. What you are talking about is diffuse and spectacular lighting...it is the sort of modern lighting that can really help sell if an object is smooth, rough, shiney etc. My engine is much more basic, I just look and see how far away a vertex is from a point, then put a gradient of the lighting from the 3 vertices of a face over the face. No angles or intersections like a modern day lighting system, which as you correctly said, are all done in shader files.

 

I've been going over lecture notes I have on perspective correct texturing to see if can speed up my textures a bit when drawing. It mentioned two solutions, one was to  sample the correctly mapped value every couple of pixels instead of every one, the other was to only do perspective correct mapping on textures that required it, otherwise, use affine. I tried both out, and the sampling just requried too much overhead for me to implement effectively, but for the affine solution it did work. Even though only a few faces in a scene are ever in the situation to be able to be affine mapped, it did find me another 3-4FPS in the tavern.

 

I must point out, you really have to be careful when doing things like this with textures, cause if you even get it slightly wrong....it basically seems like the walls are moving as you move, which can turn anyone stomach. A good example was when I tried to find the thresholds for the affine or perspective mapping, I had a value that looked correct, the textures werent bending or anything, but as you moved it just felt sickening. Notching it down another value made the feeling go away.

0

Share this post


Link to post
Share on other sites

Ah, I`m getting the jist of your dilemma now, for this aspect. Where as .. I think I`ve got a handle on the diffuse, and specular, from my work in blender. I`ll have to look up Affine mapping/ perspective mapping as regards lighting. Thanks Mage.

0

Share this post


Link to post
Share on other sites

As promised, it time for a video. Again, this is just a quick video showing what I'm looking at, but it much better then the static pictures.

 

1

Share this post


Link to post
Share on other sites

Wow, and I thought seam flashies were bad. :lmao: Looking very good at the end though. Congratz. :coolup:

0

Share this post


Link to post
Share on other sites

Busy time at Uni lately, no time to work on this...but that's fine, I got work done in the break.

 

What I wanted to post about is the sheer lack of competition to this sort of thing. I've been doing some really serious searching around the web for other project attempting javascript based rendering.....and nobody is even close to this level of drawing.

 

First off you can go and look where this whole thing started with the 3D Canvas Experiments in 2006 a Firefox developer tried to do 3D rendering in the new HTML5 Canvas element, which I what I use for my rendering. It's....interesting, but I think limited by the time and perhaps the Javascript engine speeds then, it is really simple. Instead of continuing development however, they threw it away and moved onto WebGL so they could get access to video cards.

 

This webpage (http://www.kevs3d.co.uk/dev/phoria/) is one of the top listing if you search for 3D canvas rendering, as you can see it has got some of the elements of mine, but lacks many of the features mine has like perspective correct texturing (his examples of textures all tear). It does have some interesting particle effects, but particles are mostly a 2D affair, so are much less stressful.

 

Next up is the foremost web rendering javascript library Three.js, which has both WebGL and non-WebGL libraries for rendering. This link (http://threejs.org/examples/#canvas_performance) shows the non-WebGL system under stress, and runs on my system at about 5FPS. It's even worse then the previous library I talked about....despite it being the one most people would be directed to if they asked on a forum how to do this.

 

 

 

It does annoy me that I can make something better then what is available and then have no way to get the word out. All I can do though, is continue to work on my engine, which I will shortly be posting a link to once my own website is complete in a few days. The least it can do is help me get a job in industry when I graduate soon.

0

Share this post


Link to post
Share on other sites

Yup, this surprises me not at all. You haven`t quit.

0

Share this post


Link to post
Share on other sites

Without the item to start anything new on this project I have been going through the most expensive part of the code (aka the scanline) in order to try and find ways to speed it up. Needless to say after pouring over it for a couple of hours I somehow managed to find another 10FPS (about a 25% speed increase). I won't go into much detail about it, mainly because it just involves rearranging if statements, replacing >= with > and other little things that all add up.

 

EDIT: Let me rephrase that, I've gained nearly 20FPS, I was running my test at a scaled up 1600x900 size, which as you'd expect causes a bit of slowdown, once I removed scaling (default 800x600 size) the FPS shot up to about 55FPS, when previously it was about 36FPS.

0

Share this post


Link to post
Share on other sites

Long time no chat, time for an update.

 

As you might have known, I am graduating university in July so my last semester has been keeping me very busy, hence I haven't really had the time to work on this. But another thing has come up aswell. I have managed to get this accepted for a research project to do an honours year for my degree, this is going to have a bit of an impact for what happens next. Update are going to be less since instead of an informal message here I will instead be writing about it in a thesis, and the project will instead move away from the game engine concept and focus back on the actual rendering side of things. I'll still occasionally post an update for how it's looking, but content wise it will be much harder for me to break down some of the really complex stuff.

 

So wish me luck, i'll post again soon.

0

Share this post


Link to post
Share on other sites

Good on you Mage .. We`ll wait and see.

0

Share this post


Link to post
Share on other sites

I just don't seem to be opening TESA enough nowadays, I normally only seem to of an evening. Anyway, I thought we the recent work I've been doing I should do an update. Since the last update here I have finished my degree and topped my graduating class in science/engineering/technology. The last few weeks though I've been on holidays and have started dividing up the section of this that will become my honours project, and the part that is going to stay as my personal game engine development.

 

The web rendering has been reworked and I am looking to build the API for it similar to how openGL works to allow for anyone using it to have a decent amount of control over the vertex and pixel calculations with custom 'shader' functions. Though I expect this'll cost some speed, it'll be something I give quite alot of research into once I get into the project. In terms of that, I'll most likely stop talking about the web rendering directly here as it'll start getting way too in-depth, in this thread I will go on to talk about the game engine and the editor instead now.

 

The editor has come a fair way since I last showed it, and I have been working directly from something I am familiar with, that is the Bethesda Construction Sets (Oblivion and Morrowind for inspiration). Here is a picture of it as I write this:

post-108-0-98433900-1405085526_thumb.png

 

I am slowly adding new object types as I need them ,the most recent being the Door so I could move between different cells (or levels) which are also a new add that isn't quite ready yet. It is starting to get to the point where I can actually start building small worlds and running them in the web engine which is really fun, but it does highlight one problem that I've run into.

 

I don't have game ideas. Seriously, I way more interested in how games work underneath and coming up with solutions to that then coming up with a game idea. So I don't know here I'll end up going with this at the moment. I think the first thing to do is make a small town and just keep building until I get an idea. Building games from scratch though is hard work, making 3D models and texturing them can take forever, and you need to do that for every object you make.

0

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now