Three.js中renderer.info.render输出解析及GLSL少顶点构面疑问

Great question! Let’s break down how you can represent quad faces in GLSL with way fewer than 4 vertices per face—especially since you’re seeing an average of 3 vertices per quad in that Google Arts Experiments project, which tells me they’re leveraging vertex reuse or GPU-side vertex generation. Here are the most common, practical techniques:

1. Indexed Drawing (Element Buffer Objects, EBOs) #

This is the foundational approach for reducing average vertex count. Instead of defining 4 unique vertices for every quad, you share vertices between adjacent quads and use an index buffer to reference those shared vertices.

For example, imagine a grid of quads: a 2x2 grid (4 total quads) only needs a 3x3 set of vertices (9 total). That works out to 9 vertices / 4 quads = 2.25 vertices per quad—way lower than 4. For larger grids, the average drops even closer to 1, since most vertices are shared by 4 adjacent quads.

In code, you’d define your vertex data once, then use indices to specify how to assemble triangles (since WebGL renders triangles, quads are two triangles). A single quad uses 6 indices pointing to 4 vertices:

// Vertex data (4 corners of a quad)
vec2 vertices[] = vec2[](
  vec2(-1.0, -1.0),
  vec2(1.0, -1.0),
  vec2(-1.0, 1.0),
  vec2(1.0, 1.0)
);

// Indices to form two triangles (the quad)
uint indices[] = uint[](0, 1, 2, 0, 2, 3);

When scaling to thousands of quads, most vertices are reused across multiple faces, driving down the average per-quad vertex count. The ~3 vertices per quad you’re seeing suggests the project uses partial sharing—maybe quads are arranged in chains (each new quad shares 2 vertices with the previous one) or have some disconnected sections.

2. Instanced Rendering #

If you’re rendering hundreds of thousands of identical (or similar) quads, instanced rendering lets you use just 4 vertices total for all quads. You define one base quad, then pass instance-specific data (like position, rotation, or scale) as attributes.

In the vertex shader, you use gl_InstanceID to access per-instance data and transform the base quad:

// Base quad vertex position (e.g., from -0.5 to 0.5)
attribute vec2 position;
// Per-instance data
attribute vec2 instancePos;
attribute float instanceRot;

void main() {
  // Rotate the base vertex
  float cosRot = cos(instanceRot);
  float sinRot = sin(instanceRot);
  vec2 rotated = vec2(
    position.x * cosRot - position.y * sinRot,
    position.x * sinRot + position.y * cosRot
  );
  // Translate to the instance's position
  vec2 finalPos = rotated + instancePos;
  gl_Position = vec4(finalPos, 0.0, 1.0);
}

Then you render with glDrawArraysInstanced or glDrawElementsInstanced—this way, even 100,000 quads only use 4 vertices, making the average per-quad vertex count nearly zero.

3. Generate Quads from a Single Vertex (Geometry Shaders) #

For an even more compact approach, use a geometry shader to generate full quads from a single input vertex (e.g., the quad’s center). The vertex shader passes the center point, and the geometry shader expands it into 4 vertices forming a quad.

Here’s a quick example:

// Vertex Shader
attribute vec2 centerPos;
void main() {
  gl_Position = vec4(centerPos, 0.0, 1.0);
}

// Geometry Shader
layout(points) in;
layout(triangle_strip, max_vertices = 4) out;

uniform vec2 quadSize; // Width/height of each quad

void main() {
  vec2 center = gl_in[0].gl_Position.xy;
  vec2 halfSize = quadSize * 0.5;

  // Emit 4 vertices to form a triangle strip (auto-assembles into a quad)
  gl_Position = vec4(center - halfSize, 0.0, 1.0);
  EmitVertex();
  gl_Position = vec4(center + vec2(halfSize.x, -halfSize.y), 0.0, 1.0);
  EmitVertex();
  gl_Position = vec4(center + vec2(-halfSize.x, halfSize.y), 0.0, 1.0);
  EmitVertex();
  gl_Position = vec4(center + halfSize, 0.0, 1.0);
  EmitVertex();
  EndPrimitive();
}

This reduces the input vertex count to 1 per quad. Note that geometry shaders can have performance overhead at extreme scale, so test with your specific workload.

4. Full-Screen Quad + Texture Atlasing (For Tiled/Grid-Based Images) #

If your quads are part of a regular grid or tiled layout, you can use a single full-screen quad (4 vertices) and handle all quad rendering in the fragment shader. Pack all your images into a texture atlas, then calculate which atlas region to sample based on the fragment’s screen or grid coordinates.

This approach uses just 4 vertices total, regardless of how many quads you’re rendering. It’s ideal for uniform layouts where you can map fragment positions directly to image positions in the atlas.

To circle back to your original observation: that ~3 vertices per quad average makes sense if the project uses indexed drawing with partial vertex sharing—maybe some quads are disconnected (so they don’t share vertices with neighbors) while others are in chains or partial grids.

内容的提问来源于stack exchange，提问作者duhaime