WebGL。为每个像素调用片段着色器的全屏四边形或三角形？

Question

在互联网上的许多示例中（例如 webglfundamentals or webgl-bolerplate），作者使用两个三角形覆盖全屏并为 canvas 上的每个像素调用像素着色器。

var canvas, gl, buffer, 
       vertex_shader, fragment_shader, 
       currentProgram, vertex_position,
       timeLocation, resolutionLocation,
       parameters = {  start_time  : new Date().getTime(), 
                       time        : 0, 
                       screenWidth : 0, 
                       screenHeight: 0 };
   init();
   animate();
 
   function init() {
    vertex_shader = document.getElementById('vs').textContent;
    fragment_shader = document.getElementById('fs').textContent;
    canvas = document.querySelector( 'canvas' );
    try {
     gl = canvas.getContext( 'experimental-webgl' );
    } catch( error ) { }
    if ( !gl ) 
     throw "cannot create webgl context";

    // Create Vertex buffer (2 triangles)
    buffer = gl.createBuffer();
    gl.bindBuffer( gl.ARRAY_BUFFER, buffer );
    gl.bufferData( gl.ARRAY_BUFFER, new Float32Array( [ - 1.0, - 1.0, 1.0, - 1.0, - 1.0, 1.0, 1.0, - 1.0, 1.0, 1.0, - 1.0, 1.0 ] ), gl.STATIC_DRAW );
 
    currentProgram = createProgram( vertex_shader, fragment_shader );
    timeLocation = gl.getUniformLocation( currentProgram, 'time' );
    resolutionLocation = gl.getUniformLocation( currentProgram, 'resolution' );
   }
 
   function createProgram( vertex, fragment ) {
    var program = gl.createProgram();
    var vs = createShader( vertex, gl.VERTEX_SHADER );
    var fs = createShader( '#ifdef GL_ES\nprecision highp float;\n#endif\n\n' + fragment, gl.FRAGMENT_SHADER );
 
    if ( vs == null || fs == null ) 
            return null;
 
    gl.attachShader( program, vs );
    gl.attachShader( program, fs );
    gl.deleteShader( vs );
    gl.deleteShader( fs );
    gl.linkProgram( program );
 
    if ( !gl.getProgramParameter( program, gl.LINK_STATUS ) ) {
     alert( "ERROR:\n" +
     "VALIDATE_STATUS: " + gl.getProgramParameter( program, gl.VALIDATE_STATUS ) + "\n" +
     "ERROR: " + gl.getError() + "\n\n" +
     "- Vertex Shader -\n" + vertex + "\n\n" +
     "- Fragment Shader -\n" + fragment );
     return null;
    }
    return program;
   }
 
   function createShader( src, type ) {
    var shader = gl.createShader( type );
    gl.shaderSource( shader, src );
    gl.compileShader( shader );
    if ( !gl.getShaderParameter( shader, gl.COMPILE_STATUS ) ) {
     alert( ( type == gl.VERTEX_SHADER ? "VERTEX" : "FRAGMENT" ) + " SHADER:\n" + gl.getShaderInfoLog( shader ) );
     return null;
    }
    return shader;
   }
 
   function resizeCanvas( event ) {
    if ( canvas.width != canvas.clientWidth ||
      canvas.height != canvas.clientHeight ) {
     canvas.width = canvas.clientWidth;
     canvas.height = canvas.clientHeight;
     parameters.screenWidth = canvas.width;
     parameters.screenHeight = canvas.height;
     gl.viewport( 0, 0, canvas.width, canvas.height );
    }
   }
 
   function animate() {
    resizeCanvas();
    render();
    requestAnimationFrame( animate );
   }
 
   function render() {
    if ( !currentProgram ) 
            return;
    parameters.time = new Date().getTime() - parameters.start_time;
    gl.clear( gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT );
    gl.useProgram( currentProgram );
    gl.uniform1f( timeLocation, parameters.time / 1000 );
    gl.uniform2f( resolutionLocation, parameters.screenWidth, parameters.screenHeight );
    gl.bindBuffer( gl.ARRAY_BUFFER, buffer );
    gl.vertexAttribPointer( vertex_position, 2, gl.FLOAT, false, 0, 0 );
    gl.enableVertexAttribArray( vertex_position );
    gl.drawArrays( gl.TRIANGLES, 0, 6 );
    gl.disableVertexAttribArray( vertex_position );
   }

html, body {
  background-color: #000000;
  margin: 0px;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
canvas {
  width: 100%;
  height: 100%;
}

<canvas></canvas>
<div id="info"></div> 

<script id="vs" type="x-shader/vertex"> 
  attribute vec3 position;
  
  void main() {
    gl_Position = vec4( position, 1.0 );
  }
</script> 

<script id="fs" type="x-shader/fragment"> 
  uniform float time;
  uniform vec2 resolution;

  void main( void ) {
    vec2 position = - 1.0 + 2.0 * gl_FragCoord.xy / resolution.xy;
    float red = abs( sin( position.x * position.y + time / 5.0 ) );
    float green = abs( sin( position.x * position.y + time / 4.0 ) );
    float blue = abs( sin( position.x * position.y + time / 3.0 ) );
    gl_FragColor = vec4( red, green, blue, 1.0 );
  }
</script>

此代码使用具有 6 个顶点的缓冲区来渲染如下内容：

does this method has any advantages or not?

与方法相比，我们渲染一个三角形（3 个顶点）覆盖整个屏幕，如下图所示：

body{
  margin: 0;
  overflow: hidden;
}

<canvas></canvas>

<script type='glsl/vertex'>
  attribute vec2 coords;
  
  void main(void) {
    gl_Position = vec4(coords.xy, 0.0, 1.0);
  }
</script>

<script type='glsl/fragment'>precision highp float;

   uniform vec4 mr;
   
   void main(void) {
     vec2 p = gl_FragCoord.xy;
     vec2 q = (p + p - mr.ba) / mr.b;
     for(int i = 0; i < 13; i++) {
          q = abs(q)/dot(q,q) -  mr.xy/mr.zw;
     }
     gl_FragColor = vec4(q, q.x/q.y, 1.0);
   }
</script>

<script>
  let canvas = document.querySelector('canvas');
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  let gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
  var h = gl.drawingBufferHeight;
  var w = gl.drawingBufferWidth;
  
  let pid = gl.createProgram();
  shader('glsl/vertex', gl.VERTEX_SHADER);
  shader('glsl/fragment', gl.FRAGMENT_SHADER);
  gl.linkProgram(pid);
  gl.useProgram(pid);

  let array = new Float32Array([-1,  3, -1, -1, 3, -1]);
  gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
  gl.bufferData(gl.ARRAY_BUFFER, array, gl.STATIC_DRAW);

  let al = gl.getAttribLocation(pid, "coords");
  gl.vertexAttribPointer(al, 2 /*components per vertex */, gl.FLOAT, false, 0, 0);
  gl.enableVertexAttribArray(al);
  
  let mr = gl.getUniformLocation(pid, 'mr');
  
  window.addEventListener('mousemove', draw);
  window.addEventListener('touchmove', draw);

  draw();

  function draw(e) {
    let ev = e && e.touches ? e.touches[0] : e;
    let x = ev ? ev.clientX : 250;
    let y = ev ? h - ev.clientY: 111;
    gl.uniform4f(mr, x, y, w, h);
    gl.viewport(0, 0, w, h);
    gl.clearColor(0, 0, 0, 0);
    gl.drawArrays(gl.TRIANGLES, 0, 3);
  }

  function shader(name, type) {
    let src = [].slice.call(document.scripts).find(s => s.type === name).innerText;
    let sid = gl.createShader(type);
    gl.shaderSource(sid, src);
    gl.compileShader(sid);
    gl.attachShader(pid, sid);
  }
</script>

Answer 1

在这两种情况下，屏幕上的每个像素都会被光栅化一次，但它们不一定只被着色一次。使用两个三角形，你将受到沿对角线的quad overshading；一些像素即使在三角形之外也会被着色，作为 2×2 四边形的辅助调用，然后由另一个三角形再次着色。

使用两个三角形也可以 less efficient for caching，由于 GPU 如何将像素着色器调用打包到 SIMD 工作组中的实现细节——同样，围绕两个三角形之间的边缘，您最终可能会与使用单个全屏三角形时发生的情况相比，space 中靠近的像素在时间上被着色得更远。

Michal Drobot 在上一段链接的博客 post 中发现 single-triangle 和 two-triangle 全屏绘制之间的性能差异约为 8%。这仅适用于他使用的特定硬件和着色器，但它表明这些过度着色和缓存问题会导致可衡量的性能下降。

另请注意，全屏三角形不会被 GPU 裁剪成四边形。 GPU 使用 guard-band clipping，这意味着它们不会裁剪屏幕外的几何图形，直到顶点远离屏幕以至于光栅化器中的数值精度会丢失（非常远）。在全屏三角形的情况下，光栅化器会将其作为单个三角形处理，并且不会为它的屏幕外部分生成片段。

简而言之，使用全屏三角形没有任何缺点，它可能会给你带来轻微的性能提升，所以在所有情况下我都更喜欢全屏四边形。

WebGL。为每个像素调用片段着色器的全屏四边形或三角形？

WebGL. Full screen quad or triangle for invoking fragment shader for every pixel?

javascript

webgl

fragment-shader