WebGL triangle layout for deformation

Question

I am implementing simple deformation in WebGL by moving vertices up or down, but stumbled upon a problem with the way the triangles are laid out.

I am using the PlaneGeometry in three.js and it uses the following layout for the triangles:

indices.push( a, b, d )
indices.push( b, c, d )

The layout used by three.js is on the left. Mine alternates between both.

Moving vertices up or down results in the image on the left, where, after moving the vertex, the deformation looks off. The blue dot represents the center vertex. I decided to alternate the triangles using the following code:

      if ( ( ix + iy ) % 2 === 0 ) {
        // Even segment
        indices.push( a, b, d )
        indices.push( b, c, d )
      } else {
        // Odd segment
        indices.push( a, b, c )
        indices.push( a, c, d )
      }

As you can see on the right, it gives me a much better result.

The two questions I have are:

• Is the layout I used valid and what is its name?
• Is there a better better way to solve this problem?