Fast WebGL Shadowmaps for Big Scenes

Creating fast realtime 3D scenes with shadows in WebGL isn't that easy: Implementing shadow maps is surprisingly simple, but making them work for big, dynamic and complex scenes is a bit harder.

I made the first step into that direction by adding a simple cascade shadow map renderer to CopperLicht, the open source WebGL JavaScript library. The implementation is focused on speed: The shadows won't look that nice, but they are robust for the full scene and a (relatively) high framerate is kept.
Try it out yourself:

(Click into the image. Move with cursor keys and run by holding shift)

You can also Run this fullscreen in a new tab.

The just released version 1.13 of CopperLicht now includes this feature, you just need to set

scene.ShadowMappingEnabled = true;

...and it will work. You might want to tweak some of the shadow parameters like ShadowMapBias and ShadowMapCameraViewDetailFactor to make them look more nicely for your scene.

If you look closer in the demo, you'll notice that shadows in the distance won't have very high details, but shadows close to the camera have. That's because I've used a cascade shadow map approach with just two levels of shadow maps: One for the shadows close to the camera, and one for the ones in the distance. You can adjust how the shadows are drawn, like which resolution they'll have and what 'close' means. If your scene is a smaller one, then the shadows will have more details as well.

It's the first time I've been using shadow maps anywhere in my code, so I guess I'll find a lot of places where to optmize this still a bit for speed, but for now, it's quite ok, I think. I'll port this feature to other platforms too in the near future and make it available in the CopperCube game engine as well then.

RocketCake 1.4 released

I just uploaded RocketCake version 1.4, the free responsive website builder I am working on.

There are some quite nice new features in this update, including faster website upload, built-in automatic image resizing, a new 'static' gallery mode, improved image quality, a smart quote filter for the MacOs users, and a lot more. You can see a detailed list here.

The editor is getting better and better each update. And I am learning a lot while building it. Still, I am happy about any kind of constructive feedback. Hope you like it!

PostCollapse version 1.06

I just uploaded PostCollapse version 1.06 to Steam, which includes some cool new features:

A new game mode ('Hardcore', which is more difficult, realistic and boring at the same time), churches, nicer houses, nicer house interior (furniture), new music and more. Hope you like it!

The Chrome 55 Video Download Button and How to Remove it

Since Chrome 55 is out, it now shows a download button for HTML 5 video and audio tags in the control bar:

This is a big issue for a surprising amount of users of my free responsive Website Designer RocketCake. I got a ton of support mails, asking me for a way to disable this. Understandable, making it extremely easy for an average person to download a video reduces the amount of people visiting your site for that video.

Here is a way to disable the download button on your page: Insert this CSS code into the style section of your header, or in RocketCake, use "View -> HTML Code of the Page -> Additional CSS Styles" and paste it there:

video::-webkit-media-controls { overflow: hidden !important }
video::-webkit-media-controls-enclosure { width: calc(100% + 32px); margin-left: auto; }

How does this work? The Chrome devs haven't provided an official way to disable or the button, unfortunately. It's HTML internally, but you cannot access the individual buttons using CSS. But, since the button is the last one of the control bar, you can make the control bar shorter, hiding that button. Not nice, not future prove, but it works for now.

I hope the Chrome developers will introduce a feature for removing this again. The bug tracker issue can be found here, if you like to add a comment.

Generated Furniture vs. Placed Models

In PostCollapse, the world is generated procedurally, including the furniture inside the houses. For simplicity, I simply generated cubes with some textures on them, which looked a bit like cupboards:

But to be honest, this didn't look and feel very good. So last weekend, I played a bit around and changed this with placed pregenerated 3D models instead. Now the interiours of the houses will look much better (for small values of 'better'):

The two screenshots are from the exact same room. I think I'll be able to live with that. I'll improve this still a bit, and then this will be included in the next update of the game.


I don't think I like the auto suggestions of reddit's advertising system:

Looking at it, it seems to be even a real non-joke subreddit. Still not really my target audience. :D

Prototyping using WebGL: Vegetation and Shadows

Recently, I tend to prototype new 3D features in JavaScript / WebGL, because it is quite fast to do this. No compilation times, just hitting F5 and see what works. For the just released 5.6 version of my game engine, I did just that. (Prototyping this in WebGL, of course also has a second advantage: The game engine can spit out WebGL code, which of course based on these prototypes)

(click onto 'comments' to continue reading)

Working on Vegetation

I'm currently working on improving the vegetation a bit in my game engine CopperCube. It looks better already and it can be moved by the wind, through a shader:

I was thinking about making this working exclusive for the grass in the terrain, but decided that a more generic approach would be better: Just click a checkbox on any material, and that thing will be moved by the wind. That way, also the leaves of trees can be moved too. Maybe also flags or similar. I still have to make this work well with the rest of the material system, so that it also works with lighting, fog, and other platforms like WebGL and Android, etc, but it is a nice start.

Fake STEAM Key Generator

Since I have put my game engine and my survival game on Steam, I am getting quite a lot of requests for free steam keys. Some of these requests are valid, made by nice youtubers and twitchers, but a lot of them are made by scammers, pretending to be a popular youtuber or similar but easy to make out to be an impostor, trying just to get a handful of free keys, in order to sell them. If you have a game on steam, you likely know what I mean.

So, how to get rid of those? Simply ignoring them doesn't seem to help. So I created a key generator, which generates fake steam keys (=just a random combination of letters and numbers) to send them:

Fake STEAM Key Generator

Create fake steam keys for sending to scammers asking for "review copies", for "giveaway", "their friends" and similar.

put (hidden) profanity into keys


I hope that when they sell them, and it turns out the key is invalid, they will get into trouble. What do you think? Good idea? I'm not sure. Feel free to use this generator or give me any feedback.

Fixing Disappearing Texture Alpha Details in MipMaps

If you ever programmed a 3D game, you probably came along this problem: You have a texture with alpha channel and lots of small details on them, which disappear when the object is far away or viewed at a sharp angle. This happens for example with foliage, trees, bushes, grass or chain-link fences. Here is an extreme example showing what I mean:

For most objects like the leaves in trees, this isn't a serious problem, most people won't even notice. But for important, fine grained stuff like wire mesh fence as above, this is certainly not wanted. There are some simple workarounds to this problem: What I did instead for my game was to compute the mip maps slightly different. Instead of calculating the weighted average of the alpha value of each sample as normally when computing the next mip map level, I also compute the maximum alpha value and select a value between the maximum and normal alpha value. And the result was looking a lot nicer:

The result could probably be adjusted a bit, but for me, it looks ok for now. There is no performance impact when rendering this and it is also not slower to generate the mipmaps at all.
For a very simple and badly filtered mipmap, I was originally calculating a pixel for the next level like this:
a /= 4;
r /= 4;
g /= 4;
b /= 4;
newColor.set(a, r, g, b);
(Where a, r, g, and b is the total sum for all 4 input samples)
But now I'm doing it this way:
const float refValue = 0.65f;
a = (int)( (amax*(1.0f - refValue)) + ((a / 4.0f) * refValue) );
r /= 4;
g /= 4;
b /= 4;
newColor.set(a, r, g, b);
(Where amax is the maximal value alpha had in all samples). refValue is a value which you can adjust to your texture (or even compute it for each texture, if you like), but I figured a value of 0.65 worked nicely for most input images, although it probably is not a perfect value in all cases.
Maybe I'll add this feature into my game engine as well, so that other people will profit from this as well in the future.