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)


I implemented built-in shaders for automatically moving stuff by the wind (use mouse and keyboard to move camera):

In the editor, this feature is just a checkbox to activate. You can adjust the wind parameters in the scene root and even animate imported models with that, if you like.

Shadow Map

I also quickly tested shadow map support for the WebGL backend. It still has bugs, looks ugly, and is unfinished, but it is a beginning:

I will likely have to modernize the full rendering pipeline to make this useful and look nice. That feature didn't make it into the 5.6 release, but it will hopefully in a future update.

five comments, already:

Hope to see awesome shadows in next updates :)
Love your blog, Niko!
rolevix (Vitaliy) - 17 02 17 - 13:00

Looking nice! Any plans to add this to Mac target? I have some trees that could use some “enhancing”
Tim - 20 02 17 - 14:34

Yes, but a bit later, this planned for the part where I’m going to unify all the render paths.
niko - 21 02 17 - 09:54

Nice, waiting for a long time…
bob - 24 02 17 - 12:23

This is exactly what I have been hoping for. The graphical improvements will make me use Coppercube a lot more.
I would also like a way to import fbx models with their textures and hierarchy intact so that the children are editable in the editor.
mrmdesign - 24 02 17 - 13:47

Displayed name:  
Remember personal info?
Website (optional):
Enter "layered" (antispam):
Comment:Emoticons / Textile


Small print: All html tags except <b> and <i> will be removed from your comment. You can make links by just typing the url or mail-address.
Note: If you type in your email adress above, it will be visible to other visitors, although it will be hidden for bots using javaScript.