As the video shows I am manipulating the vertices of a plane to create small “hills” or bumps.
Even though the mesh has castShadows and receiveShadows set, the way that the directional light is positioned, it will not cause these bumps to form shadows, because of the angle of the light in relation to the (lack of) height of the bumps.
Technically, I could position the light at a low enough z value to have shadows form, but I do not want to do this, so my question is: is there a way to “fake” shadows?
Specifically, what I want to do, is to shade the base of the bumps, just to indicate altitude changes. I thought of using SSAO to do this, but can’t seem to get it working, maybe it will only work for sharp corners?
Just as a sanity check, in the video, you can see that if I make high enough bumps, shadows will form, which is reasonable.
Thanks in advance!
Does it get better if you use light-sensitive material? From the video it looks as if the plane uses MeshBasicMaterial which does not care about lights. Other materials (Phong, Lambert, Standard, Physical) will shade the colors depending on their orientation in respect to the light. Maybe this will make even small bumps more visible.
Also: this or that
1 Like
Thanks for your answer @PavelBoytchev!
As you can see from the screen recording, shadows do work, as is evidence by 1. the floating boxes casting shadows, and 2. the fact that when I make the bumps high enough, they also do cast shadows, both of which are received by and displayed on the mesh.
I was actually able to get some results using the N8AO postprocessing effect.
<EffectComposer enableNormalPass>
<N8AO aoRadius={50} distanceFalloff={0.2} intensity={6} screenSpaceRadius halfRes />
</EffectComposer>
I think this is quite good enough for my usecase!
1 Like
It’s good you have achieved what you need. However, try shades. Shades and shadows are different things. Shades are the traditional way to make surface curvature more visible.
Thanks again @PavelBoytchev !
Please excuse my ignorance, but what are shades? Is it shaders? What are the reasons for prefering that over post processing? I know post processing can be expensive, is that it?
Thanks!
Shadow - when one object cuts the light in front of another object
Shade - when one object receives less light because it is not directly facing the light
Shades are when the color is made slightly darker if the surface is not facing the light. This is one of the most fundamental technique to increase the 3D perception of curved surfaces. Shades are the reason for inventing shaders. Shades are much simpler and faster than postprocessing and shadows. Three.js supports them natively.
See the following demo. Half of the terrain is shaded (uses MeshLambertMaterial), so it is easier to see the bumps. The other half is not shaded (uses MeshBasicMaterial), and only the distortion of the texture and the edge of the surface indicate the presence of bumps.
Both halves use no shadows at all. The difference is caused by the different materials.
https://codepen.io/boytchev/full/poXzYpz
1 Like
ah! @PavelBoytchev this is exactly what I was looking for - I will attempt to implement this. Sorry if I misunderstood your previous post regarding materials, and thanks for the clarification!
@PavelBoytchev
this was the missing piece:
mesh.current.geometry.computeVertexNormals()
I did not re-compute the vertex normals after modifying the mesh’es positions. Looks great now!
3 Likes
Just as a little update, I incorporated some other stuff I found on the web to get the beginning of a level editor for my game. It needs some other stuff, such as per-level texture, but that’s coming. (disregard the silly after effects, just toying around a bit)
2 Likes
