How do I update normals after positioning vertices in vertex shader?

meetar

Short version: I'm manipulating the position of vertices in a vertex shader, but when I calculate the normals based on the vertex position, the normals are calculated based on the original vertex position. Shouldn't the vertex shader know where the new vertices are?

Long version: I'm writing a custom shader in three.js R.58 based on the three.js normalmap shader. I'm passing a flat texture (0.5, 0.5, 1.0 lavender) to the shader as a tNormal, and then setting the position of a planeGeometry's vertices in the vertex shader to bend it into a sphere.

Here's the bit of the vertex shader where normals are calculated:

vec3 newPosition = mix( position, goalPosition, mixAmount );

vec4 mvPosition = modelViewMatrix * vec4( newPosition, 1.0 );
vViewPosition = -mvPosition.xyz;

vNormal = normalize( normalMatrix * normal );

//tangent and binormal vectors
vTangent = normalize( normalMatrix * tangent.xyz );

vBinormal = cross( vNormal, vTangent ) * tangent.w;
vBinormal = normalize( vBinormal );

This code works for default sphereGeometry and planeGeometry. However, when I deform a plane into a sphere, the shading doesn't work as expected – the fragment shader seems to think the sphere is still a plane – or something.

Here's the sphere with a pointLight, showing warping specular highlight:

enter image description here

Demo: http://meetar.github.io/planebending/plane_bending.html

And that only shows up if the original plane is facing the pointlight - at other rotations, the sphere is black no matter where the camera is, suggesting that the plane normals are still somehow being calculated as though the vertices hadn't been repositioned.

I've set geometry.dynamic = true as well as geometry.normalsNeedUpdate and geometry.tangentsNeedUpdate, and I'm calling geometry.computeTangents(), but nothing seems to work.

I was under the impression that in GLSL, the components of the scene used to calculate normals (such as the normalMatrix and the tangent) take into account any vertex manipulation by the vertex shader. What am I missing? Is this something specific to three.js?

Edit:

Checking in the console, I see that every face in the deformed plane still has a worldspace normal of (0, 0, 1), as it did in its undeformed state, as opposed to a sphereGeometry instance, whose normals vary depending on their orientation.

Here's another demonstration: these two objects have the same material. The left is SphereGeometry, the right is a deformed PlaneGeometry. When the plane deforms, the normals don't seem to update to reflect the faces' new orientation, and the specular doesn't show up properly.

enter image description here

Demo: http://meetar.github.io/planebending/plane_bending_06.html

meetar

Short version: You can't!

Long version: Even if the vertex shader is moving the vertices, it only knows the updated position of the current vertex – to calculate new face normals, it would have to know the updated position of all the neighbor vertices, and so far, WebGL doesn't allow that.

Although the vertex shader does calculate normals, they're all based on the original normals, which are passed to the vertex shader along with the original vertex positions. Those calculations are mostly just the standard normal-related things required for the fragment shader, such as accounting for light position, transformations, and so on, and they all assume that the vertices are going to hold still relative to each other in object space.

It's relatively easy to update normals with the CPU and pass those to the vertex shader, but if you must do it in the vertex shader, there are some sneaky ways to fake it, such as using bump maps; and if the vertices are being moved based on any kind of parametric computation, you can generate some neighbors on the fly and check the normal between them, which is definitely cheating.

Sources:

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

How do Vertex and Index buffers work in DirectX11 with Vertices, Normals, and Texcoords

From Dev

How can I pass both Vertex & Face normals to a Three.js shader?

From Dev

How can I pass both Vertex & Face normals to a Three.js shader?

From Dev

billboarding vertices in the vertex shader

From Dev

get transformed vertices positions after vertex shader in THREE.js

From Dev

How to multiply vertices with model matrix outside the vertex shader

From Dev

DirectX - dimension of vertices passed to the vertex shader

From Dev

Opengl Es update normals for each vertex in an animation

From Dev

Calculating Normals across a sphere with a wave-like vertex shader

From Dev

How do I pass texture data to this openGL vertex shader from an Objective C client?

From Dev

How to align vertices and normals in Maya Api?

From Dev

After `DELETE VERTEX v;` how do I reset the RecordId?

From Dev

How can I feed compute shader results into vertex shader w/o using a vertex buffer?

From Dev

How can I feed compute shader results into vertex shader w/o using a vertex buffer?

From Dev

How does Blender calculate vertex normals?

From Dev

ThreeJS: How can I use a shader to filter vertices by property?

From Dev

GLSL How to show normals with Geometry shader?

From Dev

How to update colors after vertex colors are changed?

From Dev

How to update colors after vertex colors are changed?

From Dev

OpenGL - Access next 3 vertices in buffer from the vertex shader

From Dev

Should I omit vertex normals when there is no lighting calculations?

From Dev

OpenGL - vertex normals in OBJ

From Dev

How to query the vertices connected to a vertex in igraph?

From Dev

How to update vertices geometry after rotate or move object

From Dev

How do I edit Vertex Properties in OrientDB?

From Dev

OpenGL: Do I still need an array of vertices after buffering to VBO?

From Dev

How do I update an angularjs page after a scope update?

From Dev

How to deduce the triangle vertices in fragment shader

From Dev

How do I fix the positioning css

Related Related

  1. 1

    How do Vertex and Index buffers work in DirectX11 with Vertices, Normals, and Texcoords

  2. 2

    How can I pass both Vertex & Face normals to a Three.js shader?

  3. 3

    How can I pass both Vertex & Face normals to a Three.js shader?

  4. 4

    billboarding vertices in the vertex shader

  5. 5

    get transformed vertices positions after vertex shader in THREE.js

  6. 6

    How to multiply vertices with model matrix outside the vertex shader

  7. 7

    DirectX - dimension of vertices passed to the vertex shader

  8. 8

    Opengl Es update normals for each vertex in an animation

  9. 9

    Calculating Normals across a sphere with a wave-like vertex shader

  10. 10

    How do I pass texture data to this openGL vertex shader from an Objective C client?

  11. 11

    How to align vertices and normals in Maya Api?

  12. 12

    After `DELETE VERTEX v;` how do I reset the RecordId?

  13. 13

    How can I feed compute shader results into vertex shader w/o using a vertex buffer?

  14. 14

    How can I feed compute shader results into vertex shader w/o using a vertex buffer?

  15. 15

    How does Blender calculate vertex normals?

  16. 16

    ThreeJS: How can I use a shader to filter vertices by property?

  17. 17

    GLSL How to show normals with Geometry shader?

  18. 18

    How to update colors after vertex colors are changed?

  19. 19

    How to update colors after vertex colors are changed?

  20. 20

    OpenGL - Access next 3 vertices in buffer from the vertex shader

  21. 21

    Should I omit vertex normals when there is no lighting calculations?

  22. 22

    OpenGL - vertex normals in OBJ

  23. 23

    How to query the vertices connected to a vertex in igraph?

  24. 24

    How to update vertices geometry after rotate or move object

  25. 25

    How do I edit Vertex Properties in OrientDB?

  26. 26

    OpenGL: Do I still need an array of vertices after buffering to VBO?

  27. 27

    How do I update an angularjs page after a scope update?

  28. 28

    How to deduce the triangle vertices in fragment shader

  29. 29

    How do I fix the positioning css

HotTag

Archive