CODEWITHSUNDEEP
javascriptthree.jswebgl
oxyflour
oxyflour

Reputation: 21

shadow map issue in three.js with a ShaderMaterial that changes vertex positions

In my project I use a ShaderMaterial to render terrains. The vertices positions are modified in the vertex shader according to a height map texture:

vec4 mvPosition = modelViewMatrix * vec4( position + normal * heightMapScale, 1.0);
gl_Position = projectionMatrix * mvPosition;

The terrain looked ok, but when I tried to add objects on it, the shadows were strange. It seems as if the vertices didn't know their new positions :(

Please go to the following links for screenshots and live demo (Sorry that I don't have enough reputation to post images here)

Screenshot: https://i.sstatic.net/Xw3ZI.jpg

Live Demo: http://jsfiddle.net/b2bfm8q3/2/

You can see that the cube at the left side has correct shadow, while the one at the right has not because the face is shifted up in the shader.

Any idea to resolve this?

Thanks

Upvotes: 1

Views: 565

Answers (1)

oxyflour
oxyflour

Reputation: 21

@gman, Thank you for your advise! More shaders should be modified, indeed. For my problem the worldPosition varable in the worldpos_vertex should be updated as well:

// move the vertex position
"float fBump = position.x < 0. ? 0. : 350.;",
"vec4 newPosition = vec4( position + normal * fBump, 1.0);",
// to replace THREE.ShaderChunk[ "default_vertex" ]
"vec4 mvPosition = modelViewMatrix * newPosition;",
"gl_Position = projectionMatrix * mvPosition;",
// to replace THREE.ShaderChunk[ "worldpos_vertex" ]
"vec4 worldPosition = modelMatrix * newPosition;",

Updated demo here: http://jsfiddle.net/b2bfm8q3/4/

Upvotes: 1

Related Questions