Jump to content

View more

Image of the Day

Inventory ! Va falloir trouver une autre couleur pour le cadre D: #AzTroScreenshot #screenshotsaturday https://t.co/PvxhGL7cOH
IOTD | Top Screenshots

The latest, straight to your Inbox.

Subscribe to GameDev.net Direct to receive the latest updates and exclusive content.

Sign up now

Omni-directional light shadow mapping and a confusion with cubemaps

4: Adsense

Old topic!

Guest, the last post of this topic is over 60 days old and at this point you may not reply in this topic. If you wish to continue this conversation start a new topic.

  • You cannot reply to this topic
1 reply to this topic

#1 Winged   Members   


Posted 29 May 2014 - 04:36 AM

--- First of all I must say, that I have read every topic on this forum describing using cubemaps, but I'm still confused about how to use them.
I want to use them to achieve a simple omni-directional (point) light type shading in my WebGL application.
I know that there is a lot more techniques that works better than using cubemaps (like using Two-Hemispheres or Camera Space Shadow Mapping) which are way more efficient,
but for an educational purpose cubemaps are my primary goal.
--- Till now, I have adapted a simple shadow mapping which works with directional lights (with one exception: I don't know how to cut off the glitchy part beyond the reach of a single shadow map texture).
--- This is how I understand the workflow:
1. Initialize a TEXTURE_CUBE_MAP texture, which will contain all 6 sides of cube map.

gl.bindTexture(gl.TEXTURE_CUBE_MAP, this.texture);
for (var i = 0; i < 6; i++)
	gl.texImage2D(gl.TEXTURE_CUBE_MAP_POSITIVE_X + i, 0, gl.RGBA, this.size, this.size, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
2. Initialize 6 framebuffers, each for one rendered direction from a light's position.

for (i = 0; i < 6; i++) {
	this.framebuffer[i] = gl.createFramebuffer();
	gl.bindFramebuffer(gl.FRAMEBUFFER, this.framebuffer[i]);
	gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_CUBE_MAP_POSITIVE_X + i, this.texture, 0);
	gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, this.depthbuffer);
3. Initialize a camera that will be suitable for shadow map rendering (90 FOV, square size).
4. Onto each of created framebuffers render the scene from the light's position looking in sequence at each direction (X, -X, Y, -Y, Z, -Z).
After each shadow map render, save a current camera view matrix, which will be passed to a vertex shader just before a regular render.

var cubeMapDirections = [new vec3(1, 0, 0), new vec3(-1, 0, 0), new vec3(0, 1, 0), new vec3(0, -1, 0), new vec3(0, 0, 1), new vec3(0, 0, -1)];
for (var i = 0; i < 6; i++) {
	shadow.buffer.bind(i); // Bind previously created framebuffers
	camera.lookAt( light.position.add( cubeMapDirections[i] ) );
	light.viewMatrix[i].makeInverseRigidBody(camera.local); // Translate center of the world to the camera
	scene.draw(shadow.program); // Draw the scene with a program that will render the depth values to a texture


--- From now on, I am not sure how to adapt it to the cubemap texture and 6 view matrices.
5. Send all the matrices and all other stuff to the shaders (should I send 6 view matrices, or should I use a more clever approach?)
6. In the vertex shader, project a current vertex using light's projection and view matrix and push it into the 0.0 - 1.0 region.
It will be used later to dereference the depth map (if I had sent all 6 view marices, it looks like I should now do it 6 times)

const mat4 ScaleMatrix = mat4(0.5, 0.0, 0.0, 0.0, 0.0, 0.5, 0.0, 0.0, 0.0, 0.0, 0.5, 0.0, 0.5, 0.5, 0.5, 1.0);
vDepthPosition = ScaleMatrix * uPMatrixFromLight * uVMatrixFromLight * vWorldVertex;
7. In fragment shader calculate the distance between the current vertex and the light position (and now, if 6 depth informations are available, how to distribute it in a right way, to cover the whole space?)

vec3 depth = vDepthPosition.xyz / vDepthPosition.w;
depth.z = length(vWorldVertex.xyz - uLightPosition) * linearDepthConstant;
8. If the distance between the vertex and the light position is greater than the distance stored in an unpacked distance from shadow map, the vertex is in shadow.

float shadowDepth = unpack(texture2D(uDepthMapSampler, depth.xy));
if (depth.z > shadowDepth)
	shadow = 0.5;


--- Could you give me some hints or examples (preferably in OpenGL ES 2.0 or WebGL) how I should build it?
**UPDATE:** I figured out that view matrices are superfluous in the case of program rendering the scene with shadows. One can read the adequate texel from the shadow cubemap by using one of those vectors: `lightPosition - worldVertexPosition` or `worldVertexPosition - lightPosition` (right now I don't know which is the correct one, because both gives a not complete shadowing result - the first one mirrors the shadow and doesn't display anything from the -Y light cubemap face while the second one displays the bottom face correctly, but it does right only that)
shadowDepth = unpack(textureCube(uDepthCubemapSampler, vWorldVertex.xyz - uLightPosition));
shadowDepth = unpack(textureCube(uDepthCubemapSampler, uLightPosition - vWorldVertex.xyz));


Edited by Winged, 02 June 2014 - 07:12 AM.

#2 Winged   Members   


Posted 02 June 2014 - 07:10 AM

Finally, by trial and error, I managed to get this thing working.


The problem was that the cubemap texture is mirrored, so I had to scale the regular projection matrix by (1, -1, 1) in order to un-flip it.


Also, the right vector to read cubemap is vWorldVertex.xyz - uLightPosition.


Now everything seems to be working nice!

Old topic!

Guest, the last post of this topic is over 60 days old and at this point you may not reply in this topic. If you wish to continue this conversation start a new topic.