1

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 )

Vertices layout 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. Triangle layout top view 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.

Triangle layout diagonal view 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?
Jason
  • 4,905
  • 1
  • 30
  • 38
  • the term you might be looking for instead of "layout" could be "topology" in context of meshes. I'm curious though if there are terms for this specific example. – pailhead Dec 21 '17 at 03:15
  • Thanks @pailhead, I'm in the same boat, it proves to be difficult for me to find information about something I don't know the name of! I will try adding _topology_ to my search queries. – Jason Dec 21 '17 at 14:08
  • You are considering alternate tessellations of the plane. You can also begin with a regular grid, and tessellate each grid cell into four triangles. See https://github.com/mrdoob/three.js/pull/6920/files. – WestLangley Dec 21 '17 at 16:30
  • damn, right, tessellation is it – pailhead Dec 21 '17 at 18:37
  • Thank you @WestLangley! That and the discussion around on Github are very interesting! Especially the demo at the end linked by user _makc_ with an isometric grid. Do you know why the type of tessellation I displayed on the left is the default? My gut would say "It is probably faster and produces acceptable results in most cases", but I do wonder. – Jason Dec 22 '17 at 12:32
  • No, I am not aware of a reason. – WestLangley Dec 22 '17 at 16:58
  • I’d say it’s because it’s much easier to “weave” a grid like mesh like this, every quad cell is the same, while you would have to apply extra logic. – pailhead Dec 30 '17 at 07:04

0 Answers0