I am working on a project which involves accumulating shadows in a scene. I found this example (webgl_shadowmap_progressive) 1 which is amazing and it has helped me a lot.
But while using it, I tried to add a cube and a cone to the scene and to the progressive light map. It seems they are both casting a shadow in the floor. However, both always appear in “complete” black:
I would expect light to affect them too and, for instance, have different colors in the faces of the cube. Here goes the code: webgl_shadowmap_progressive_copy .
Am I missing something? Do I need to perform any extra material/mesh configuration before adding these objects to the light map?
In addition to making sure that all of your scene objects make it into this call:
There could be some strange behavior afoot with the Standard and Physical Materials. Have you tried the Phong Material? And set depthWrite to true like with the ground material?
Hi Zalo! thanks for your reply
Yes, I had already tried using different materials and setting the depthWrite to true with no result…
While using different geometries some of them work well (PlaneGeometry, PolyhedronGeometry, SphereGeometry, TorusGeometry), but others don’t (BoxGeometry, ConeGeometry, RingGeometry, a simple triangle made of BufferGeometry…).
Do you have any other ideas? It’s driving me crazy
P.D: I have noticed that if you move the light source to the back side of the scene, those geometries start to work well (except for the cone). Why could this be happening?:
Oops; I was bit groggy when I first replied. There’s one other critical element, which is that the geometry needs to have its uv’s specified in order to be packed into the lightmap.
Ideally the discontinuous faces of the model have some uv-space gaps built-in to prevent lightmap bleeding.
If you hit “Debug Lightmap” in the GUI, you should see what the objects look like after being packed into the global scene lightmap…
Oh, that is completely true! I didn’t set them on the predefined geometries.
But, for the triangle which is made of a BufferGeometry I did set the uv coordinates, and still I cannot get it to cast nor receive shadows: Progressive Lightmap with a BufferGeometry
The only code that I added is this part:
// BUFFER GEOMETRY
const geometry = new THREE.BufferGeometry();
const vertices = new Float32Array( [
0.0, 1.0, 0.0,
0.0, 0.0, 1.0,
1.0, 0.0, 1.0 ] );
geometry.setAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );
// creating a uv
var uvs = new Float32Array([
0.0, 0.0,
0.0, 1.0,
1.0, 1.0 ]);
geometry.setAttribute('uv', new THREE.BufferAttribute(uvs, 2));
var bufferMesh = new THREE.Mesh(
geometry,
new THREE.MeshBasicMaterial({
side: THREE.FrontSide,
color: 0xff8811,
depthWrite: true, }))
bufferMesh.castShadow = true;
bufferMesh.receiveShadow = true;
bufferMesh.name = 'Buffer triangle';
bufferMesh.position.set(70, 20, 100);
bufferMesh.scale.set(80, 80, 80);
lightmapObjects.push( bufferMesh );
scene.add(bufferMesh);
Hrm, I know it needs a backface to cast shadows (since shadows only get cast from backfaces for some reason I forget at the moment).
However I’m not sure why the object isn’t accumulating light into the lightmap… perhaps something to do with UV winding order or a missing needsUpdate… but I’m really not sure…
