Home / Uncategorized / Simple environment map

Simple environment map

Just want to share a simple technique I used in my christmas experiment this year. I was trying to create some image based lighting. I found myself often in a situation that I just need a background. However I don’t have enough photoshop skill to make a custom background. I’ve always want to put more colours into my project and like to have some beautiful gradient background instead of just a plain colour. So I discover this trick : I want the colour to look nature in my work, so why don’t I just grab the colour from the nature itself ?

It’s simple : search images for ‘sky gradient’ and you’ll get tons of beautiful gradients colour for you :


some of them have some clouds but you can just apply a massive blur on it and it’ll look smooth.


After get this in there’s a really easy way to make an image based lighting that doesn’t require a cube map. I found an amazing article here :

and this super useful shader  :

vec2 envMapEquirect(vec3 wcNormal, float flipEnvMap) {
  //I assume envMap texture has been flipped the WebGL way (pixel 0,0 is a the bottom)
  //therefore we flip wcNorma.y as acos(1) = 0
  float phi = acos(-wcNormal.y);
  float theta = atan(flipEnvMap * wcNormal.x, wcNormal.z) + PI;
  return vec2(theta / TwoPI, phi / PI);

vec2 envMapEquirect(vec3 wcNormal) {
    //-1.0 for left handed coordinate system oriented texture (usual case)
    return envMapEquirect(wcNormal, -1.0);

With this you only need the normal to get the reflect colour from an image, combine this with the gradient colour image we got, you can produce a very nature look environment lighting.

Ultimately you’ll probably want to go for cube map + PBR but I think this could be useful for some smaller projects.

And lastly here is the link to my christmas experiment this year :


and the source code is here :


the sound cloud loader I was using is from here :
Really glad to be part of it again and merry christmas everyone !

Leave a Reply

Your email address will not be published. Required fields are marked *