Correct rendering order for Skybox

[macguyvok]

I'm a bit new to Babylon.js, and WebGL development (though I've been working on 3D game projects for several years). My current project is a 3D space game, and I'm attempting to make a skybox. I followed the tutorials linked on the wiki, and was surprised to find that there was no mention of how to make the skybox stay a fixed distance from the camera, or render before everything else.

 

After some digging around, I found mesh.infiniteDistance; this seems to solve half of my problem. What I'm unsure about, however, is how to make the skybox render before everything else in the scene?

 

For those curious, this is what happens without doing that:

 

 

 

Needless to say, it'll be hard to play a game with ships popping in and out of existence. 

 

Any ideas?

[joshcamas]

To make the skybox stay where the camera is, you simply make it's position equal to the camera every frame!

scene.registerBeforeRender(function() {skybox.position = camera.position}

[macguyvok]

 

To make the skybox stay where the camera is, you simply make it's position equal to the camera every frame!

scene.registerBeforeRender(function() {skybox.position = camera.position}

 

I figured that out, actually.   Then I discovered mesh.infiniteDistance, which does that for you automatically. (Which is very nice, if an odd choice of name.)

 

What I'm really trying to figure out is how to control the render order.

[joshcamas]

I'm slightly confused - why is render order important?

I think I remember something that does this... renderingGroupId, maybe?

[macguyvok]

I'm slightly confused - why is render order important?

I think I remember something that does this... renderingGroupId, maybe?

 

Basically, the skybox needs to be rendered before everything else in the scene, so that it never paints on top of the objects in the scene. As you can see in the screenshots, at the edge of the box the model is clipping through the skybox. In order to prevent this (and to prevent the model disappearing entirely) the skybox must always be drawn first.

 

Here is a brief discussion of normal GL techniques for doing this, from Stack Overflow: http://stackoverflow.com/questions/2859722/opengl-how-can-i-put-the-skybox-in-the-infinity

(That was just what a quick google search turned up; there are better discussions; I'll dig up more if you're really interested.)

 

As far as renderingGroupId, any documentation on that? I haven't been able to find any...

[Stephen Andrews]

I was wondering about this too, and the best solution I found was to make the skybox extremely large, (around 200000), then setting the camera's maxZ property to that size. But it doesn't really solve the problem. I assume it would be trivial to force an object to render at the back of the zBuffer using glDepthBuffer(1,1), but that would probably require a BabylonJS patch.

 

See: http://www.html5gamedevs.com/topic/3865-what-do-you-want-in-babylonjs/?p=58479

 

About the game, I happen to have just started working on a 3D space game as well, but my modeling skills are horrid.

What sort of game are you trying to make? 

 

And those skybox textures, where did you get them? They look great!

[macguyvok]

I was wondering about this too, and the best solution I found was to make the skybox extremely large, (around 200000), then setting the camera's maxZ property to that size. But it doesn't really solve the problem. I assume it would be trivial to force an object to render at the back of the zBuffer using glDepthBuffer(1,1), but that would probably require a BabylonJS patch.

 

See: http://www.html5gamedevs.com/topic/3865-what-do-you-want-in-babylonjs/?p=58479

 

Yeah, I'm not willing to just do the huge box hack; it's unfortunate if that's the only way. OTOH, I'm not allergic to making a patch, if it comes down to that. There is a less hacky solution, which we came up with thanks to three.js; create a separate scene for the skybox, render it, then without clearing, render the main scene. I dislike it, but it's the only way to do it in three.js, and it ought to work in Babylon. Just haven't tried it yet.

 

About the game, I happen to have just started working on a 3D space game as well, but my modeling skills are horrid.

What sort of game are you trying to make? 

 

You see our ship? That's about the absolute limit of any of our modeling talents... combined. The game's a space-based MMORPG. My group (3 others, plus me) have been dabbling with it on and off for years, switching engines, learning a lot about design, etc. We finally feel like we've got a handle on something that fits inside a decent scope and has a chance of being able to see more than just the devs play it, so in the last month or so development's really ramped up. Here's the elevator pitch:

 

Free to play, story-based MMO, like Guild Wars 2 meets Star Trek Online, focused on small group and casual play.

 

The interesting part, to me, is less about the game, and the fact that we plan on keeping it 100% open source, and once we get the core gameplay solid, we'll do small content pushes pretty regularly, trying to build our community with each push. If we get enough interested people, we'll probably open up patreon, or something similar; we're probably about a year out from considering that, though.

 

If you're interested, here's the code for the current version:

• Client: https://github.com/SkewedAspect/rfi-webgl-client
• Server: https://github.com/SkewedAspect/rfi-server

Not a ton of documentation, atm, because we're still running pretty fast and loose. No demo up, either, but once we have something more interesting than a single ship, that'll probably change. 

 

And those skybox textures, where did you get them? They look great!

 

If I remember right, it was this tool: http://sourceforge.net/projects/spacescape/ (It's been a couple years since we generated that nebula texture, tbh.)

[Stephen Andrews]

 

 

Yeah, I'm not willing to just do the huge box hack; it's unfortunate if that's the only way. OTOH, I'm not allergic to making a patch, if it comes down to that. There is a less hacky solution, which we came up with thanks to three.js; create a separate scene for the skybox, render it, then without clearing, render the main scene. I dislike it, but it's the only way to do it in three.js, and it ought to work in Babylon. Just haven't tried it yet.

I'll take a look at the Babylon sources a bit later. This is a rather pressing issue as it negatively impacts performance to do it my way, and I believe even more so your way.

 

Your game sounds pretty sweet! I'm watching both repos.

 

My project is also using Node.js, though in the form of node-webkit for the download client, and a browserified version for the web. I plan to open-source the server, but not the client, as I need some sort of income to host the website and master server list.

 

The game concept is basically Void Hunters meets Moon Breakers (With worse graphics than both games....), a 3D space dogfighting match-based game in which you scavenge and add parts to your ship. Still trying to think of a good name. Current working title is Steel Privateer.

 

Attempting to run SpaceScape under WINE. :/

 

Anyways, back on topic.

[macguyvok]

I'll take a look at the Babylon sources a bit later. This is a rather pressing issue as it negatively impacts performance to do it my way, and I believe even more so your way.

 

I think that, tbh, there's not much of a performance impact doing things the three.js way (can't say my way, I haven't actually implemented it in babylon yet.  ), as it's just a slightly convoluted way of getting at exactly what I want: rendering the skybox before all else. I expect the penalties to be in slight memory use, with a tiny per-frame performance hit. My biggest complaint about this method is mostly code complexity; I'd prefer to be able to set a couple of flags on the sky box when created, instead of having to create a new scene, etc. I may poke this problem more today, if I come up with any numbers, I'll let you know.

 

 

My project is also using Node.js, though in the form of node-webkit for the download client, and a browserified version for the web. I plan to open-source the server, but not the client, as I need some sort of income to host the website and master server list.

 

The game concept is basically Void Hunters meets Moon Breakers (With worse graphics than both games....), a 3D space dogfighting match-based game in which you scavenge and add parts to your ship. Still trying to think of a good name. Current working title is Steel Privateer.

 

Ah, neat, there needs to be more space games like that! (I was a big fan of Freelancer back in the day.) And, Steal Privateer isn't a terribly name, honestly.

 

I've looked into node-webkit, and we're currently using browserify for the client (things get weird, as we're also using AngularJS, but it works). We're debating between a desktop client being done as a Chrome app, or a node-webkit app. Not sure what direction we'll take in the end.

 

Regarding the code and making enough money to keep the lights on, just some (unsolicited) friendly advice. Especially with a game built off web tech, it's really hard to keep the client closed source. Obfuscated code can be deobfuscated, and a node-webkit app can be opened with a little clever work, and an archive tool. Instead, my advice is to focus on what people get for giving you a little $: first, you did all the work of packaging up the app. For the average person, that's kinda a big deal. In fact, if you get it on Steam, I know people who'd pay a few bucks just to have the game in their Steam games list, despite them having the skills to compile it themselves. Second, if that's not enough income, make your master service list require an account to view, and charge a little bit for the account.

 

If you're looking for a place to host it, I know a few places that are really good, and pretty cheap. I might even be able to work out something free if you don't need that much horsepower while you're developing... feel free to PM me, and we'll talk.

 

Attempting to run SpaceScape under WINE. :/

 

Good luck.  Though, it is using Ogre3D and Qt, both of which are cross platform. I'll bet you could download and compile it for Linux/Mac (which ever platform you're on.) I seem to remember one of the guys on my team got it running on linux... I'll ask him if he remembers how hard it was.

[Stephen Andrews]

EDIT: The working solution! (As stated above by joshcamas)

Set the skybox renderingGroupId to 0 like so:

skybox.renderingGroupId = 0; 

And for every other renderable object, set the group ID > 0: [Could be a pain to remember and debug]

ship.renderingGroupId = 1;

(You probably don't need such simple samples)

 

Rendering groups are rendered in ascending order, starting with zero, and each appears to have a separate depth buffer. A 3D overlay could be rendered on a higher ID, as opposed to sticking it directly in front of the camera.

 

Example: http://triblade9.wc.lt/steelprivateer/

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

I think that, tbh, there's not much of a performance impact doing things the three.js way (can't say my way, I haven't actually implemented it in babylon yet.   ), as it's just a slightly convoluted way of getting at exactly what I want: rendering the skybox before all else. I expect the penalties to be in slight memory use, with a tiny per-frame performance hit. My biggest complaint about this method is mostly code complexity; I'd prefer to be able to set a couple of flags on the sky box when created, instead of having to create a new scene, etc. I may poke this problem more today, if I come up with any numbers, I'll let you know.

The engine seems to have some sort of system for accomplishing this, but so far I've only gotten the skybox to render at the FRONT of the depth buffer. Inverting it causes the skybox to be rendered behind the scene 'color' or something.

skybox.registerBeforeRender(function() {	engine.setDepthFunctionToGreater();});skybox.registerAfterRender(function() {	engine.setDepthFunctionToLessOrEqual();});

^ Inverting those seems to cause the skybox to render at the front of everything.
 
Thanks for the advice! I'll look into those options.
 
I don't intend to make the client pay-to-play, but some sort of in-game purchase options would be nice, (purely cosmetic, such as decals on your ship). If someone decompiles and redistributes the client, I won't mind too much. But it doesn't feel right to have purchase options in an open-source game.  
 
There's a great free website host I know of (hostinger.co.uk). That would probably be a good place to start.
 
It's not that I don't have money, but that I've decided that all my hobby projects should be kept separate from my normal income. If they require resources that must be paid for, they must be self-supporting.
 
I've attempted to, but not suceeded in compiling Spacescape, it's clearly not designed with linux in mind. :/
 
P.S. A fellow Texan I see.

[macguyvok]

EDIT: The working solution! (As stated above by joshcamas)

Set the skybox renderingGroupId to 0 like so:

skybox.renderingGroupId = 0; 

And for every other renderable object, set the group ID > 0: [Could be a pain to remember and debug]

ship.renderingGroupId = 1;

(You probably don't need such simple samples)

 

Rendering groups are rendered in ascending order, starting with zero, and each appears to have a separate depth buffer. A 3D overlay could be rendered on a higher ID, as opposed to sticking it directly in front of the camera.

 

Example: http://triblade9.wc.lt/steelprivateer/

 

I'll give that a shot tonight, once I'm home. It seems promising though!

 

The way I'm doing the UI, actually, is just using pure HTML elements that are absolutely positioned. It works great, and there's no performance penalty (did a lot of research on that before hand). Means I can use AngularJS and Bootstrap to build my UI, without needing to jump through any hurtles. And, since I build single page apps all the time, I'm familiar with the quirks of absolute positioning...

 

Haha, yeah, lived in Texas...6? 7? years now. Good place, though West Texas (where I'm at) is a bit too dry for me, and my wife misses trees. And hills. And bodies of water larger than a puddle.

[Stephen Andrews]

I'll give that a shot tonight, once I'm home. It seems promising though!

 

The way I'm doing the UI, actually, is just using pure HTML elements that are absolutely positioned. It works great, and there's no performance penalty (did a lot of research on that before hand). Means I can use AngularJS and Bootstrap to build my UI, without needing to jump through any hurtles. And, since I build single page apps all the time, I'm familiar with the quirks of absolute positioning...

 

Haha, yeah, lived in Texas...6? 7? years now. Good place, though West Texas (where I'm at) is a bit too dry for me, and my wife misses trees. And hills. And bodies of water larger than a puddle.

Aye, I'm using absolute HTML elements as well, combined with jQuery UI at the moment, but I wouldn't mind switching to a different format.

I never really thought of using Bootstrap for a game UI, how is it holding up?

 

If only someone would write a node-compatible pure-javascript MVC UI library. That would make life so much easier. <3

 

And yeah, I lived [near Dallas] Texas since I was a kid until about three years ago when I came to China for my job. Love Texas.

[macguyvok]

This absolutely worked!

 

I'm glad, too, after the hassles I've been dealing with trying to nail down good, solid movement/controls. Moving a mesh isn't hard. Moving  mesh in a nice, smooth way based on easily tunable properties... is harder. Re-implementing Star Trek Online-esque controls... is even harder still... 

 

..then adding networking...

 

We have the next little bit weeks cut out for us. Ah, well.

[Stephen Andrews]

This absolutely worked!

 

I'm glad, too, after the hassles I've been dealing with trying to nail down good, solid movement/controls. Moving a mesh isn't hard. Moving  mesh in a nice, smooth way based on easily tunable properties... is harder. Re-implementing Star Trek Online-esque controls... is even harder still... 

 

..then adding networking...

 

We have the next little bit weeks cut out for us. Ah, well.

Do you need help with smooth moving? I think I got it down, unless you're using physics or parenting the camera directly.

 

Interestingly, a parented camera seems to jerk (or jerk the parent mesh?!) around a lot, whereas a non-parented camera, with the target/position set every frame is much smoother.

[joshcamas]

Ya'll games sound so cool! I wanna use Node.js as well, but... well... I suck.

 

I wanna build a skyrim-like game! I use semantic ui for the GUI, at least in my editor. :3

[Stephen Andrews]

Ya'll games sound so cool! I wanna use Node.js as well, but... well... I suck.

 

I wanna build a skyrim-like game! I use semantic ui for the GUI, at least in my editor. :3

Skyrim-like game in WebGL... That sounds fun.. so long as it has a lower level-of-detail.

 

Space games in WebGL are genius, as they theoretically require less resources since the world is supposed to be mostly empty. xD

[macguyvok]

Ya'll games sound so cool! I wanna use Node.js as well, but... well... I suck.

 

I wanna build a skyrim-like game! I use semantic ui for the GUI, at least in my editor. :3

 

Think of node.js as what this "javascript thing" really ought to be. Personally, I kinda despise writing js code on the client side; it's so much more messy than my nice node modules. 

 

As for Skyrim, I've never seen a WebGL game done with that level of detail; I'd love to see a tech demo of that. Personally, I think it could do it, but I'm the eternal optimist. (You gotta be to stick with an MMO project as long as I have.)

[joshcamas]

Skyrim will be very expensive - lots of vertices and such.

 

I'm also going to run into a slight problem: I can't model for crap.  eh, I'll figure it out someday.

[macguyvok]

Hey, there's always sites like this:

 

http://www.blendswap.com/

 

Planning on putting a few commissions up on that site once I get a little further along and need assets.

[joshcamas]

Ohh I like! Ima use a few awesome looking houses in my game until I have time to make my own!

 

Thanks for the linky!