complex games with three.js?

[Noedel-Man]

Hey!

I want to create a game thats can run on as many platforms natively. So being a front-end developer i turned to webGL. But i have a few questions:

1 )

Is possible to create big complex and demanding games like:

• Unturned
• Risk of Rain
• Hotline miami
• Minecraft
• Terraria
• Nidhogg
• Battle block theater

Both Graphical as Technical.

2 )

If you use a html wrapper to create a .exe, .apk etc. is the source code protected?

Also can you compile to consoles?

3 )

I have read that you can code in c++ and compile it to javascript is that functional? Also is it possbile to write in an high-level strong language and compile that to javascript (i do not like weakly typed languages, and C++ is to low-level for me)

4 )

How does it come that i can not find any big games made in webGL (only tech demo's, fancy websites and games on this forum)

5 )

When i looked around this forum i dident saw any three.js based games. Why is that? i looked at the tech demo's of many engines and three.js looked the most promising. Or is there something i missed?

6 )

Is webGL for my project a smart choice? At the end i dont want my game to be playeble on the web. Only for stand alone on pc, linux, mac. (mobile and console if the project succeeds)

7 )

What is the best engine to use for a 2d/2.5d with some nice light effects?

8 ) 

Does the steam SDK for achievements, joining friends, steam controller etc. work well with webGL?

 

Thanks for reading, it would mean a great deal to me if you know a answer to one of my questions!

[ivan.popelyshev]

5) three.js lacks of many things. Try playcanvas?

7) pixi.js now have 2.5d fork https://gameofbombs.github.io/pixi-bin/index.html?s=flip&f=cards.js&title=Cards , and its easy to work with projections and stuff there. pixi-lights plugin is not yet updated to the last version of library, but it will be there  Fork itself: https://github.com/gameofbombs

[Noedel-Man]

31 minutes ago, ivan.popelyshev said:

5) three.js lacks of many things. Try playcanvas?

7) pixi.js now have 2.5d fork https://gameofbombs.github.io/pixi-bin/index.html?s=flip&f=cards.js&title=Cards , and its easy to work with projections and stuff there. pixi-lights plugin is not yet updated to the last version of library, but it will be there  Fork itself: https://github.com/gameofbombs

Thanks for commiting Ivan!

The tech demo of PlayCanvas looks very nice! Even better then three.js! It even has a ui. gonna look more into that later. So would you suggest playcanvas or pixi? Also what exacly does three.js lacks?

 

Thanks!

[WombatTurkey]

5 hours ago, Noedel-Man said:

Is possible to create big complex and demanding games like:

• Unturned
• Risk of Rain
• Hotline miami
• Minecraft
• Terraria
• Nidhogg
• Battle block theater

Sorry cannot answer all of your questions, but I just want to say that it's really not the language/technology nowadays. It's the passion / artist / team and timing.

I'm sure minecraft can be easily done in webgl, same for terraria and others. There is a "stigma" attached to JavaScript that makes it some type of "negative nancy", (cannot be used for high production games because of "performance" reasons) -- Whilst it's slower than native approaches, it can certainly get the job done!  -- Especially for these games you listed.

For #2, you can do v8 snapshotting in an electron app if you really want to protect your JS source code. The JS code actually is compiled to native machine code, but there is a large performance cost to it.  Other than that, there is really no way to protect your "html wrapper" code. (That I know of)

For #7, I recommend Godot. It's booming, and it's insane. All the exports you'll need, for free. 

This is all I can tell you for now. Good luck and make something incredible

 

 

[ivan.popelyshev]

12 hours ago, Noedel-Man said:

Thanks for commiting Ivan!

The tech demo of PlayCanvas looks very nice! Even better then three.js! It even has a ui. gonna look more into that later. So would you suggest playcanvas or pixi? Also what exacly does three.js lacks?

 

Thanks!

I suggest to try PlayCanvas first. PIXI has the easiest of APIs and its that I support. I can help with making great 2.5d game using PIXI and a set of editors (texturepacker, spine, physics editor)

Threejs follows general idea of 3d-engine, I even made a coding experiment:

1) Created empty Dart project

2) used built-in math module

3) made my own "Material", "Geometry" and "Object" classes

4) Ta-da! http://massiveassaultnetwork.com/dart/v1/

Three.js is great for learning stuff, but as soon as you understood how it works, you can make your own game engine from scratch, just dont try to make your own math lib  

Babylon, PlayCanvas, and ga.me(turbulenz) are serious stuff.

[Noedel-Man]

9 hours ago, WombatTurkey said:

Sorry cannot answer all of your questions, but I just want to say that it's really not the language/technology nowadays. It's the passion / artist / team and timing.

I'm sure minecraft can be easily done in webgl, same for terraria and others. There is a "stigma" attached to JavaScript that makes it some type of "negative nancy", (cannot be used for high production games because of "performance" reasons) -- Whilst it's slower than native approaches, it can certainly get the job done!  -- Especially for these games you listed.

For #2, you can do v8 snapshotting in an electron app if you really want to protect your JS source code. The JS code actually is compiled to native machine code, but there is a large performance cost to it.  Other than that, there is really no way to protect your "html wrapper" code. (That I know of)

For #7, I recommend Godot. It's booming, and it's insane. All the exports you'll need, for free. 

This is all I can tell you for now. Good luck and make something incredible

 

 

Hey Wombat,

 

Thanks for clearing things out for me, i think i am going to stick to webGL tho. But thanks for the suggestion

[Noedel-Man]

1 hour ago, ivan.popelyshev said:

I suggest to try PlayCanvas first. PIXI has the easiest of APIs and its that I support. I can help with making great 2.5d game using PIXI and a set of editors (texturepacker, spine, physics editor)

Threejs follows general idea of 3d-engine, I even made a coding experiment:

1) Created empty Dart project

2) used built-in math module

3) made my own "Material", "Geometry" and "Object" classes

4) Ta-da! http://massiveassaultnetwork.com/dart/v1/

Three.js is great for learning stuff, but as soon as you understood how it works, you can make your own game engine from scratch, just dont try to make your own math lib  

Babylon, PlayCanvas, and ga.me(turbulenz) are serious stuff.

I am looking into PlayCanvas now, is the editor also available on my local machine? I dont like the idea of uploading all my assets and working on a webbased code editor. i saw the github files but does that also include the editor or just the api?

[willeastcott]

I'm joining the conversation late but let me try to answer your original questions from my point of view:

Quote

 

1 )

Is possible to create big complex and demanding games like:

Unturned
Risk of Rain
Hotline miami
Minecraft
Terraria
Nidhogg
Battle block theater
Both Graphical as Technical.

 

Yes. From a technical point of view, JavaScript and WebGL could certainly be used to build those kinds of games.

Quote

 

2 )

If you use a html wrapper to create a .exe, .apk etc. is the source code protected?

Also can you compile to consoles?

 

Yes, you can wrap HTML5 (and WebGL) games as APKs, IPAs. I normally recommed using Intel's XDK to do this:

https://software.intel.com/en-us/intel-xdk

If you use Intel's XDK with PlayCanvas, there is a tutorial to show you how:

http://developer.playcanvas.com/en/user-manual/publishing/mobile/xdk/

Today, there is no way to wrap/compile/translate a WebGL based game to PS4 or the Wii U. However, Microsoft now supports the building of Xbox One executables from WebGL codedbases. Pretty cool! You'll do this in Visual Studio.

Quote

 

3 )

I have read that you can code in c++ and compile it to javascript is that functional? Also is it possbile to write in an high-level strong language and compile that to javascript (i do not like weakly typed languages, and C++ is to low-level for me)

 

You can compile C++ to JavaScript, yes. This is done with the Emscripten tool created by Mozilla. This is what several engine companies (like Unity and Unreal) use to port their C++ codebases to the browser. However, the problem is that Emscripten generates a huge amount of JavaScript, meaning that WebGL builds of apps/games are heavyweight, take longer to download, longer to start up, and exhibit sub-par performance (and currently don't even support mobile browsers!). Today, it's definitely the case the hand written JavaScript engines perform and load far better than Emscripten based ones.

Quote

 

4 )

How does it come that i can not find any big games made in webGL (only tech demo's, fancy websites and games on this forum)

 

Give it time. It's taken a few years for WebGL to establish itself and be implemented into all the browsers.

However, it should also be pointed out that monetizing games on the web is harder than monetizing games via app stores. The W3C is working on making web payments easier, and as that progresses, I suspect you'll see way more effort being put into browser game development.

I guess it also depends on your definition of big. Games like PlayCanvas' TANX gets many tens of thousands of play sessions a day - although that's not crazy numbers, it's still pretty popular!  

Quote

 

5 )

When i looked around this forum i dident saw any three.js based games. Why is that? i looked at the tech demo's of many engines and three.js looked the most promising. Or is there something i missed?

 

From what I can tell, three.js was really initially designed as a game engine. In fact, it still isn't a game engine - it's a graphics library. That hasn't stopped some people using it for games, but there aren't many that have been published. PlayCanvas was designed from day one by a group of console devs to be a full game engine together with an editing environment. That probably explains the difference there.

Quote

 

6 )

Is webGL for my project a smart choice? At the end i dont want my game to be playeble on the web. Only for stand alone on pc, linux, mac. (mobile and console if the project succeeds)

 

It's fairly straightforward to wrap a WebGL game with Electron or NW.js as a desktop EXE. I think it's a perfectly valid choice. And it also means that a web deployment of your game, if you choose to go that path, will be trivial. 

Quote

 

7 )

What is the best engine to use for a 2d/2.5d with some nice light effects?

 

I'll agree with Ivan there that PIXI is pretty damn cool. Ivan's done some great work on that framework.

Quote

 

8 ) 

Does the steam SDK for achievements, joining friends, steam controller etc. work well with webGL?

 

You might want to check this out:

https://github.com/greenheartgames/greenworks

 

[willeastcott]

Quote

I am looking into PlayCanvas now, is the editor also available on my local machine? I dont like the idea of uploading all my assets and working on a webbased code editor. i saw the github files but does that also include the editor or just the api?

No, you can only use the cloud version of the Editor. Although working with a web-based system may seem novel, I would recommend trying it to really find out what it's like. The first time people use Google Docs after using Microsoft Office, they're a little unsure. But many people decide that the realtime collaboration, freedom to run on any machine, easy sharing, and more besides make it all worthwhile. But it's for you to decide.

Note that you can use just the open source PlayCanvas Engine in the same way that you would three.js, say. But you'd be giving up a huge amount of power by foregoing the Editor. The open source project is just the runtime and not the Editor.

 

[Noedel-Man]

1 hour ago, willeastcott said:

I'm joining the conversation late but let me try to answer your original questions from my point of view:

Yes. From a technical point of view, JavaScript and WebGL could certainly be used to build those kinds of games.

Yes, you can wrap HTML5 (and WebGL) games as APKs, IPAs. I normally recommed using Intel's XDK to do this:

https://software.intel.com/en-us/intel-xdk

If you use Intel's XDK with PlayCanvas, there is a tutorial to show you how:

http://developer.playcanvas.com/en/user-manual/publishing/mobile/xdk/

Today, there is no way to wrap/compile/translate a WebGL based game to PS4 or the Wii U. However, Microsoft now supports the building of Xbox One executables from WebGL codedbases. Pretty cool! You'll do this in Visual Studio.

You can compile C++ to JavaScript, yes. This is done with the Emscripten tool created by Mozilla. This is what several engine companies (like Unity and Unreal) use to port their C++ codebases to the browser. However, the problem is that Emscripten generates a huge amount of JavaScript, meaning that WebGL builds of apps/games are heavyweight, take longer to download, longer to start up, and exhibit sub-par performance (and currently don't even support mobile browsers!). Today, it's definitely the case the hand written JavaScript engines perform and load far better than Emscripten based ones.

Give it time. It's taken a few years for WebGL to establish itself and be implemented into all the browsers.

However, it should also be pointed out that monetizing games on the web is harder than monetizing games via app stores. The W3C is working on making web payments easier, and as that progresses, I suspect you'll see way more effort being put into browser game development.

I guess it also depends on your definition of big. Games like PlayCanvas' TANX gets many tens of thousands of play sessions a day - although that's not crazy numbers, it's still pretty popular!  

From what I can tell, three.js was really initially designed as a game engine. In fact, it still isn't a game engine - it's a graphics library. That hasn't stopped some people using it for games, but there aren't many that have been published. PlayCanvas was designed from day one by a group of console devs to be a full game engine together with an editing environment. That probably explains the difference there.

It's fairly straightforward to wrap a WebGL game with Electron or NW.js as a desktop EXE. I think it's a perfectly valid choice. And it also means that a web deployment of your game, if you choose to go that path, will be trivial. 

I'll agree with Ivan there that PIXI is pretty damn cool. Ivan's done some great work on that framework.

You might want to check this out:

https://github.com/greenheartgames/greenworks

 

 

Hey willeastcott

Thanks for answering all my questions! Thanks to you my technical research is almost at an end :). I have been looking at webGL engines all day and i have come to the conclusion that babylon.js is the best to use (please correct me if i am wrong), that because it supports 3d at a pretty high level. And i might be making a 2d game now but in the future i might want to make 3d games/websites and learning a new engine then just seems more time consuming(or is the difference and the learning curve not as high as i think?). Also from what i have read playCanvas does let let you export your project. So you can only publish on playCanvas.com (unless you pay $100/mo) Also not using Atom as a code editor makes me cry :s.

I have also been looking into Typescript to compile to Javascript. Would this also destroy performance? Because babylon.js natively supports typescript.

[Noedel-Man]

I am also wondering: how does not having a editor effect development time? I assume you need to use X,Y axis to place items in you map. But how do you get these axis? Also you cant move a group of items at once right? How much of a pain is this? Or am i just over exaggerating?

[willeastcott]

PlayCanvas' graphics engine is (IMHO) the most advanced WebGL engine available today. It has had built in support for physically based rendering since 2014, supports runtime generated lightmaps, and it's lightning fast. But it's the Editor app that is far ahead of anything else out there now for WebGL. Actually, you can export and download your app with a free account. The 'Export / Import Projects' option on the pricing page is about saving an entire image of your project to disk - not exporting/downloading your game/app. To export and self host or self publish your own games, just do this:

http://developer.playcanvas.com/en/user-manual/publishing/web/self-hosting/

Easy.

 

[ivan.popelyshev]

@willeastcott +1. Nice to see you here, pal!

[Noedel-Man]

Thanks for the extra info WIlleastscott. But i think i am going to start with pixi. And use tiled map editor for the maps. Direcly going into 3d engines seems to big of a step. Do you guys have any other tools, tips and tricks that will be handy?

Anyway i appreciate your time and help :).

[ivan.popelyshev]

@Noedel-Man We can cooperate on Tiled integration with pixi. I'll send you private message on that

[earslap]

On 10/06/2016 at 12:38 AM, willeastcott said:

Actually, you can export and download your app with a free account. The 'Export / Import Projects' option on the pricing page is about saving an entire image of your project to disk - not exporting/downloading your game/app. To export and self host or self publish your own games, just do this:

http://developer.playcanvas.com/en/user-manual/publishing/web/self-hosting/

@willeastcott I gave this a try but it looks like this idea was abandoned. Right now, if I follow the above steps, PlayCanvas asks me to upgrade my account. I know it's been a while so this is not weird but I'm putting this here for future reference for others reaching here via google or something.

[8Observer8]

On 10/06/2016 at 11:29 PM, Noedel-Man said:

I have also been looking into Typescript to compile to Javascript. Would this also destroy performance?

No

On 10/06/2016 at 11:29 PM, Noedel-Man said:

Also not using Atom as a code editor makes me cry :s.

 

On 10/06/2016 at 11:29 PM, Noedel-Man said:

babylon.js natively supports typescript.

VSCode is better for TypeScript because it is native. Use Gulp as a task runner: https://www.typescriptlang.org/docs/handbook/gulp.html

[signedness]

Look at megaspin.io, it is completely implemented in three.js.

It is just a simple three.js game implementation but it does not mean that you are not able to make more complex games like Minecraft.

The majority of WebGL games are server driven, so you dont have to care about the user, entity, physics and score logic etc. The client is only responsible for rendering and asynchronous event handling which are also mostly sent to the server.

For creating and modifying meshes you can use the online three.js editor here: https://threejs.org/editor/.

There are also some third party extension libraries for rendering tile maps like https://github.com/WebSeed/three.js-tilemap.

[KyleNau]

 

We all want to be HTML5 evangelists here but I feel like in your particular case webGL isn't suitable and you are heading for a painful dead end by doing so. This is all just my opinion, so make of it what you will (TLDR - it's technically possible but likely a fool's errand):

1 ) Is possible to create big complex and demanding games like...

Graphically, for the most part yes - the visual style being almost completely determined by the art, not the engine - but anecdotally webGL isn't going to perform as well as native. Even in wrapping the game in an EXE you will always have the performance hit of a browser engine that isn't optimized for games running in the background. Furthermore my understanding is that none of the current engines are ready for webGL 2 (and only two browsers support it) so technologically you will be behind the curve. You could make them in webGL but the question would be why? The result would be more difficult to develop and wouldn't perform as well.

2) If you use a html wrapper to create a .exe, .apk etc. ...

While I'm not a hacker, I'm going to go out on a limb and say "no", your source isn't protected. My understanding is that in most cases the compile process is just for packaging files together, they aren't being converted to native code or anything like that. Somewhere in that node-webkit EXE there is still a javascript file being interpreted by the webkit browser at runtime.

And, no, you can't compile for consoles.

3) I have read that you can code in c++ and compile it to javascript is that functional?

Yes-ish. There's ASM.js. That process is unnecessarily convoluted for your purposes though; writing in C++ to compile to JS, only to then compile to a desktop EXE. JavaScript is an unnecessary middle language that is going to eat away at your performance and complicate your entire pipeline. If you're writing in C++ or C# and have no intent on targeting the web, then just compile directly from that language.

4) How does it come that i can not find any big games made in webGL...

The HTML5 game community started out of the gate being obsessed with mobile games. webGL has been functioning on phones only fairly recently and even still its performance leaves a bit to be desired. Might as well ask why there are almost no complex and graphically rich Canvas games.

5) When i looked around this forum i dident saw any three.js based games. Why is that?

See above. Also worth reiterating that these are *web* tools. No one has really figured out how to monetize games on the web since Flash died so the wider gamedev community is focused on apps and desktop games. The incentive to make something complex and cool on the web (from a commercial standpoint) isn't there.

6) Is webGL for my project a smart choice?

No, it really isn't and that's why I logged in and replied to this post (I haven't frequented the HTML5 community in a while). I feel like efforts to steer you to various webGL tools are being disingenuous. It is absolutely not the best tool for the platforms you are targeting.

7) What is the best engine to use for a 2d/2.5d with some nice light effects?

Most likely Unity. Not because of any spectacular 2.5D / lighting toolset (although it has them) but because of it's ability to easily and reliably target the platforms you are after as well as the overwhelming amount of learning and development help available. You can barely google any game programming questions without being swamped in Unity specific advice. You can code in C#, which it sounds like you'd be more comfortable with, or you can purchase visual scripting tools like PlayMaker that make it even easier.

8) Does the steam SDK for achievements, joining friends, steam controller etc. work well with webGL?

Clarification - those things have nothing to do with webGL, they are JavaScript, HTML5 and apply to Canvas based games as well. The Greenworks library from Greenheart games will get you most of the way there as far as basic Steam integration goes. The controller would be reliant on the HTML5 gamepad API.

 

I hope I didn't come across as too negative. I am an HTML5 fanboy but only because I'm an open web fanboy. If your target is strictly desktop and consoles then you are creating extra unnecessary work and cluttering your pipeline if you use HTML5 / webGL over any of the engines that were specifically built for that task. The fact that the landscape of webGL is littered with nothing but tech demos and very few actual games should be a red flag that you're about the spend months bashing your head figuring out how to apply a GLSL shader to a spinning torus knot and wrap it in Electron. IMO if you want to develop games then go with the platforms that indie and professional game developers gravitate towards.

Kyle