Three.js: Displacement maps aren't included in shadowing.

[Sarah-C]

Description of the problem

Displaced vertices and polygons don't self shadow, nor cast shadows on other objects.
An example is here:
http://codepen.io/SarahC/pen/AXbaBx

Three.js version

https://cdnjs.cloudflare.com/ajax/libs/three.js/r78/three.min.js

• [ ] Dev
• [x] r78
• [ ] ...

Browser

• [x] All of them
• [ ] Chrome
• [ ] Firefox

• [ ] Internet Explorer

  OS

• [x] All of them

• [ ] Windows
• [ ] Linux
• [ ] Android
• [ ] IOS
  

  Hardware Requirements (graphics card, VR Device, ...)

WebGL enabled PC.

[ghost]

A displacement map (or any kind of map) is not a piece of geometry.
So it cannot cast or receive shadows.

[Sarah-C]

mrdumb commented 2 hours ago
A displacement map (or any kind of map) is not a piece of geometry.
So it cannot cast or receive shadows.

But the map alters the vertices of the model - and those are what shadows
are calculated from.

This isn't the same as shadows from a flat bump map.

[citations]
A displacement map showing a non regular shadow:
http://www.studiomaven.org/images/4/4b/Bump_vs_displacement.JPG

A slideshow that states displacement maps _change_ geometry at the vertices level, therefore they will change a shadow.
http://slideplayer.com/slide/4878224/

A web page demonstrating a displacement map producing self shadowing, and how bump mapping adds contrast to the smaller features:
http://docs.redshift3d.com/Content/I/Displacement.html
On 16 July 2016 at 10:01, mrdumb [email protected] wrote:

A displacement map (or any kind of map) is not a piece of geometry.
So it cannot cast or receive shadows.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/mrdoob/three.js/issues/9342#issuecomment-233121073,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABg0nE8iJnXOraWGIasUR1xQ1fU5ipzvks5qWJ3RgaJpZM4JN8eT
.

[ghost]

But the map alters the vertices of the model

Not at all.
A displacement map generates fake details (fake 3D), but that's all.
The geometry is the same (it cannot be modified by any map).

[WestLangley]

@Sarah-C

See http://stackoverflow.com/questions/35873776/shadow-wont-update-when-geometry-is-changed-using-vertexshader

That answer should still work, but is a bit outdated. The following pattern will also work with r.76 or later:

mesh.customDepthMaterial = new THREE.MeshDepthMaterial( {

    depthPacking: THREE.RGBADepthPacking,

    displacementMap: displacementMap,
    displacementScale: displacementScale,
    displacementBias: displacementBias

});

Try it in your codepen, and your vertex-shader-displaced vertices will cast proper shadows.

[ghost]

http://stackoverflow.com/questions/35873776/shadow-wont-update-when-geometry-is-changed-using-vertexshader

That's a solution for sub-pixel displacement (new generated geometry).
Many people use the "displacement map" term, but they don't understand it ...

[Sarah-C]

It makes fake details?

I had to increase the vertex count on my sphere to 200 to get it to work
though. When it was 20, the vertices weren't there to be moved by the
displacement map.

The geometry is the same though? How does the displacement map make the
silhouette change? I don't understand.

On 16 Jul 2016 14:01, "mrdumb" [email protected] wrote:

But the map alters the vertices of the model

Not at all.
A displacement map generates fake details (fake 3D), but that's all.
The geometry is the same (it cannot be modified by any map).

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub, or mute the thread.

[Sarah-C]

Could you help me? A couple of people think it works the same as I did.
Could you please explain what happens when the displacement map is applied
to a sphere for insrance?

I've got confused because of all the descriptions online for different
effects.

On 16 Jul 2016 14:31, "mrdumb" [email protected] wrote:

http://stackoverflow.com/questions/35873776/shadow-wont-update-when-geometry-is-changed-using-vertexshader

That's a solution for sub-pixel displacement (new generated geometry).
Many people use the "displacement map" term, but they don't understand it
...

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/mrdoob/three.js/issues/9342#issuecomment-233130410,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABg0nMGUnSn_F5resbv5-XphQh13O3skks5qWNzzgaJpZM4JN8eT
.

[Sarah-C]

I'll try it in a bit. Thank you lots.

[ghost]

I had to increase the vertex count on my sphere to 200 to get it to work though.
When it was 20, the vertices weren't there to be moved by the displacement map.

As I said before, any kind of texture mapping does NOT modify the geometry.
They generate fake details on the given geometry.
You're talking about something else: re-tessellation of geometry.
Your case is about sub-pixel displacement: based on an image, you re-tessellate the geometry into microtriangles.
The vertices of the new generated geometry get moved along normals and that's the displacement.
WestLangley's custom shader is a good idea.
I hope it's clear enough now.
cheers

[Sarah-C]

I get it now. Thanks for your explanation.

On 16 Jul 2016 16:16, "mrdumb" [email protected] wrote:

I had to increase the vertex count on my sphere to 200 to get it to work
though.
When it was 20, the vertices weren't there to be moved by the displacement
map.

As I said before, any kind of texture mapping does NOT modify the geometry.
They generate fake details on the given geometry.
You're talking about something else: re-tessellation of geometry.
Your case is about sub-pixel displacement: based on an image, you
re-tessellate the geometry into microtriangles.
The vertices of the new generated geometry get moved along normals and
that's the displacement.
WestLangley's custom shader is a good idea.
I hope it's clear enough now.
cheers

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/mrdoob/three.js/issues/9342#issuecomment-233135028,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABg0nOgMDIoEue_Zpwo9IeIjsJj6wWM9ks5qWPXUgaJpZM4JN8eT
.