---------
--- 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);
gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
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));
or
shadowDepth = unpack(textureCube(uDepthCubemapSampler, uLightPosition - vWorldVertex.xyz));
