Quad rendering within Three.js?

The question:

Are there any provisions within Three.js to allow or support quad rendering, that is: shaders which accept four vertices and four normals as input?

The reason why I’m asking:

Three.js comes with a host of functions for the procedural generation of geometries, like

  • ConeGeometry,
  • CylinderGeometry,
  • ExtrudeGeometry,
  • LatheGeometry,
  • PlaneGeometry,
  • RingGeometry,
  • SphereGeometry,
  • TorusGeometry,
  • TubeGeometry,

all of which have in common that they generate strips (or “bands”) of quads, which are split into triangles each and are then passed to the shaders as triangles.

In my view it is a pity to discard the high-level quality information contained in quads in favour of literally primitive triangles, because that way we incur both performance and rendering quality degradation at the same time:

  • Using triangles results in 2.0 times the number of faces and 1.5 times the number of vertices compared to quads.
  • Rendering a quad as two triangles results in a very obvious loss of mapping fidelity associated with affine texturing, as I’ve elaborated here. This loss of mapping fidelity can only partially be overcome by cranking up the number of i.e. lathing segments, which would hurt performance even more.

OTOH, the results of bilinear normals interpolation in quads in the context of reflection mapping appear most promising, to avoid the above downsides.

Good read:

1 Like

Apologies if this was understood and you’re asking about the higher-level APIs three.js provides, but I’m sure some reader will not know this, so just to clarify the lede – WebGL draws triangles, points, or lines – but not quads. This remains true in WebGPU as well.

3 Likes

Thanks for your pointer to this discussion, which focusses on performance and which I read with great interest.
While I did cite performance issues as one of two downsides of triangle vs. quad rendering, my main concern is actually the quality of reflection mapping which I believe would be easier to achieve in quad rendering. Slightly improved performance which I also expect from quad rendering would probably be hardly noticeable.

Thanks for your clarification.

While I was aware that WebGL dropped support for draw mode GL_QUADS as of version 3.1, I was hoping to get access to GL_TRIANGLE_FAN, as a two-face triangle fan would have been a good enough substitute for GL_QUADS in my use case.

I only learned after my initial post and your answer, that the Three.js design team decided(!) to drop support for TRIANGLE_FAN and TRIANGLE_STRIP, following an internal discussion two years ago, although WebGL still supports it.

I joined the forum only three months ago and was not aware of those previous discussions.

1 Like

Me either. Makes sense now.