<< | Next Archive>>

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.