🔒 Locked

[web] 3d game in a web browser

Started by perim Feb 2, 2011 at 6:34 AM 14 replies 7.1k views

Original Post

Feb 2, 2011 at 6:34 AM

Hello GameDev!
I could really use some pointers on a big-picture plan of which languages to learn in order to accomplish what I'm trying to do. Thanks in advance for any help. I really do appreciate it.
By the way - I'm not a beginner, but I'm not that advanced yet either.

My resources: (subjects I have read thick books about, but have yet to do much practice with):
HTML / CSS (HTML & CSS: The Complete Reference, 5th edition)
Javascript (Javascript, the Definitive Guide)
C++ (Ivan Horton's Beginning Visual C++ 2008)
Python (Python Programming for the Absolute Beginner)
I haven't learned PHP / MySQL yet, but I will. As well as anything else I need to learn to accomplish this dream of mine.

My goal:
I want to make a game with a look & feel similar to the "dungeon master clone demo" called "escape from dragon mountain" as shown here - http://www.youtube.c...h?v=Put6IOUUYLI
But I want it to run fully in a web browser. Ideally. However, if that limits me to crappy options, then maybe I'd be willing to settle for it running outside of a web browser in some type of client that people would download from my site, while still keeping their saved character data on my server. This demo (which was never completed) was created by 4 people; so I figure I could make something simpler on my own (even if it were to require a goat sacrifice to the gods of higher education).

My problem:
Figuring out the pieces of the puzzle needed to accomplish this.
For example, if I were telling someone what to learn to make a website, I'd tell them HTML for content, then CSS for presentation. Probably JavaScript next to create behavior. Then PHP / MySQL for server side scripting and saving to a database.

But what would I need in order to create a 3d game within (or possibly outside of) a browser? I've heard of Maya and 3ds Max. (and I'm not scared to save up the money to buy expensive programs, if they significantly cut the production time) Would I need one of those to create the 3d images? And what about PhotoShop - would I need that to create textures to put onto the 3d images? (If so, I'm also considering GIMP) But maybe those have nothing to do with this project - I don't know. Would there be any other pieces of the pie besides those? Maybe I'd need a non-scripting OO language such as C++ or Python...? Or maybe I need one of those game engines I hear people talk about. Or maybe this type of game doesn't need a graphics engine. And perhaps there's something that plays a key role between my programming language and 3d images that I'm unaware of.

Help! He he.

I've seen a 3d game run in a browser; it's called Sherwood Dungeon (http://www.maidmarian.com/sherwood.htm), which I had to download Adobe Shockwave to play. Maybe I need a developer version of that. (I didn't care much for the style of graphics)

In short, I really don't know which ingredients I need, and what choices there are for each of those ingredients. I'm willing to spend ridiculous amounts of time learning this, as well as some money - I just need a point in the right direction; and Google just isn't cutting it, no matter what I try putting in the search field. (how I wish it were the Starship Enterprise's computer)

I realize this will take a lot of time, but my spouse supports me (in both meanings of the word) and I absolutely love learning geeky things on computers as well as designing games that I hope to be able to create someday.

Thanks again!

jsaade

Feb 2, 2011 at 1:26 PM

Hello,
I will try to help you with some pieces of the puzzle.

Software like 3dsMax or Maya are for creating the 3D content like the model then applying texturing then possibly animating them.
The textures come from images (done on photoshop for example).

Now you would need to put this content somewhere and display/manage it via code.

Offline you can do it in C++ for example.

Online (inside a browser), there are a set of solutions which are engines made as plugins to run inside a browser.
The most famous is unity (www.unity3d.com).
Shockwave is dead (no more support for the tool).
There are 3D Engines (papervision, away3d, ...) for flash but they are fairly slow as they are written on top of flash (and not as direct as unity).

I would advise to check unity3d intensively as it does what you are seeking.

I do not want to discourage you, but developing content and programming is not a one-man job. It takes years of practice to do a very simple task correctly.

perim

Feb 2, 2011 at 5:39 PM

Thank you SO much! And you even read my whole post, he he. I was afraid everyone would be put off by the length of it.

I'm glad to know Shockwave is dead because I was going to waste time looking into it. Now I know not to.

I looked into Unity3d as you suggested and it's exactly what I'm looking for. Thanks! Also, I appreciated your explanation of the relationship between Photoshop and Maya (and Unity3d). So now I know exactly what to study.

After spending hours reading and weighing options, I think I'm going to learn GIMP instead of Photoshop (because of the free price tag, yet robust abilities); Blender instead of Maya (again free but powerful, and Unity supports it); and... I'm still not sure which programming language I'll need to study (besides JavaScript and PHP, of course).

Will an OO programming language (besides JavaScript & PHP) come into play? If so, I'm leaning toward Python - but I couldn't figure out on Unity's website (and Wikipedia) whether it was supported.

Thanks again so much for the info; it was exactly what I needed! *runs to the bookstore*

DaveMS

Feb 6, 2011 at 5:25 PM

Hi Perim,

Your building in Unity judging from your last post. Unity supports a few different languages if I remember correctly - If you already know javascript, Unity supports developing in that I believe.

jsaade

Feb 8, 2011 at 8:12 AM

http://unity3d.com/unity/features/scripting

Unity supports three scripting languages: JavaScript, C#, and a dialect of Python called Boo. All three are equally fast and interoperate. All three can use the underlying .NET libraries which support databases, regular expressions, XML, file access and networking.
[/quote]

louissan

Mar 5, 2011 at 3:15 PM

Hello there,

For 3D rendering within a browser, you may want to have a look at WebGL.

What it basically does is offer you the possibility to display _real_ 3D in a canvas element, via a specific JS API. By _real_, I mean your state-of-the-art GPU (nvidia or ATI) can natively display 3D in your browser, without the need for plugins. Adobe has started to worry about this and (correct me if I'm wrong) will soon release something to counter WebGL.

So far, only some browsers support this, as it is still in a somewhat experimental status when it comes to browser implementation: Minefield, Chrome(mium) - and Opera is on the way. Forget about Internet Explorer (as for so many things).

WebGL has been very recently announced as 1.0. You can read the spec here: https://www.khronos..../specs/latest/.

Good luck with shaders and heavy math.

You may also want to have a look at Javascript fram4works built on top of WebGL. The kind that will wrap (complicated/boring/arduous - pick one) WebGL stuff to "simpler" things. Examples include:

three.js
spiderGL
GLGE
and probably many others.Combine this with JIT... and you get _very_ good performance for things that no one thought would happen even a few years back.

Cheers,

Plopo

jsaade

Mar 10, 2011 at 9:47 AM

Implementation
WebGL is implemented in Google Chrome[sup][4][/sup] and in development releases of Mozilla Firefox 4, Safari and Opera.[sup][2][/sup]

[/quote]

It is not really that commercial. So I would not recommend investing time in it for a project that you want to sell or promote as not the majority of the people would be able to
view your content.

upqtz

Mar 19, 2011 at 4:54 AM

There's also a good opportunity to get involved early with the 3D movement in Flash. Adobe has released the Molehill preview that we can develop against, and several established frameworks already support it. Check out http://www.away3d.com/ and http://alternativaplatform.com/en/. Essentially now that Flash is GPU accelerated, performance isn't really an issue any longer.

Danny02

Mar 20, 2011 at 1:03 PM

It is not really that commercial. So I would not recommend investing time in it for a project that you want to sell or promote as not the majority of the people would be able to
view your content.

this shouldn't be a problem

Every new Browser is/will support it in just a few months
It would be so easy to build a fallback JavaApplet which could be used as a WebGL implementation instead of the one from the Browser

super_eggbert

Mar 20, 2011 at 5:24 PM

[color="#1C2837"]

It is not really that commercial. So I would not recommend investing time in it for a project that you want to sell or promote as not the majority of the people would be able to
view your content. [/quote]

[color="#1C2837"]

[color="#1C2837"]The only browser that won't be supporting it will soon be IE and that is already below 50% of the market(Europe), and ask you self when it comes to a game you may as well ask someone to download another browser to play as opposed to a native executable for just one game. Comparing to the mobile space iPhone is also <50% of the market and falling, would you recommend people not develop for it? Sorry, if I seem a little bias but I'm the guy behind GLGE ;-)
[color="#1C2837"]

[color="#1C2837"]If you're interested I've also been working very heavily on the Javascript port of jiglib. it's looking very good so far, not native speed yet, but JS is getting faster fast. Plus, since webcl is on it's way expect massive improvements in the very near future :-) Small demo up at: [color=#1C2837][size=2]glge.org/demos/trimeshdemo/
[color="#1C2837"]

[color="#1C2837"]

louissan

Mar 20, 2011 at 9:47 PM

[color="#1C2837"]

[color="#1C2837"]I'm the guy behind GLGE ;-)[/quote]

Then I am mightily pleased you lurk around here.

Any chance to get more COLLADA demos/tutorials? I'm sure little Frankie would love to see similar friends pop up on the web.

OP: as I read elsewhere, if MS had its way, we would be reading Word documents when surfing the Internet A frightening proposition at best.. We can only hope to have a Direct3D equivalent of WebGL one day for IE support.
However, what I *think* will happen is a slow dwindling of IE. Always late, always slower and offering bugged/incomplete support for nearly or fully mature technologies ... end users have no pity and the evolution of browsers market share in the past few years show it.

Now, MS and IE does not necessarily mean "bad". After all, concepts such asynchronous HTTP requests, DHTML, were born thanks to IE. It's just a shame MS always tries to impose its proprietary standards, when (most of) the rest of the industry strives to create open ones.

My 2 € cents.

sim27

Mar 22, 2011 at 10:50 AM

This is the most impressive pure HTML 3d game I know:

http://www-valoria.univ-ubs.fr/Nicolas.Bonnel/3D/world/loader.html

written in JavaScript, utilizing WebGl (some elements are rendered in 2D canvas).

sim27

Mar 22, 2011 at 10:52 AM

[quote name='ZeRaW' timestamp='1299750463' post='4783931']
It is not really that commercial. So I would not recommend investing time in it for a project that you want to sell or promote as not the majority of the people would be able to
view your content.

this shouldn't be a problem

Every new Browser is/will support it in just a few months
It would be so easy to build a fallback JavaApplet which could be used as a WebGL implementation instead of the one from the Browse[/quote]

yeah, all modern browsers support it by now. Already browsers (especially IE): forget it. Not only do they not support webgl and never will, they also have very slow JS implementations (most of them).

but JavaApplet? that won't work. There is no JS <-> Java bridge or I am totally not getting what you mean

jsaade

Mar 24, 2011 at 9:34 AM

This is the most impressive pure HTML 3d game I know:

http://www-valoria.u...rld/loader.html

written in JavaScript, utilizing WebGl (some elements are rendered in 2D canvas).

Although the effort is amazing, it is very far from being commercially adapted.

What I meant, was use an editor like Unity. For example, at any given Time Unity might support WebGL then it will just "export" to WebGL.
Same as it does now with iphone,android, ...
and if it does not support it, your game will still be playable via their browser plugin.

JDX_John

Apr 5, 2011 at 9:18 PM

[color="#1C2837"]The only browser that won't be supporting it will soon be IE and that is already below 50% of the market(Europe)

Sorry but writing any web product which doesn't support IE is a seriously bad idea. When it's a game which is probably going to focus on the casual gaming market, even more so.

You can though use Google's Chrome Frame which is effectively a plugin for IE which runs Chrome inside the browser. You are more likely to get users to install a plugin than a whole new browser.

I would suggest Unity is the best fit here though; flash-based 3D is not mature yet and WebGL, well then you have to write everything in client-side JS which isn't my cup of tea.

Dino

Apr 6, 2011 at 1:43 PM

While a True 3D game on the web-browser may be some time away from commercially viable, Isometric games are not and can be done now. By using some clever HTML/CSS tricks, you can render an Isometric view and develop and Isometric game all in the browser context. Do a quick web-search on the Aves Engine from Dextrose. There are some nice videos of a prototype Isometric engine. Dextrose was eventually purchased by Zynga, the makers of all those Facebook games like FarmVille.

I also agree with JDX_John. Your target audience must include IE 7+ users. Without them, you will have a failed game.

Topic Locked

This topic has been locked by a moderator. New replies are not allowed.