Question

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

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个顶点的缓冲区来渲染如下内容：

这种方法有什么优点吗？

与方法相比，我们渲染一个三角形（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工作组中的实现细节—同样，围绕两个三角形之间的边缘，您可能会得到像素与使用单个全屏三角形时发生的情况相比，时间上彼此之间的阴影距离更远。

Michal Drobot在上一段链接的博客文章中发现，在单三角形和两三角形全屏绘制之间的性能差异约为8％。这仅适用于他所使用的特定硬件和着色器，但表明这些过度着色和缓存问题可能导致可衡量的性能下降。

还要注意，全屏三角形不会被GPU裁剪为四边形。 GPU使用guard-band clipping，这意味着它们不会裁剪屏幕外的几何图形，直到顶点远离屏幕为止，以至于光栅化器中的数值精度会丢失（这是非常遥远的）。对于全屏三角形，光栅化器会将其视为单个三角形，并且不会为屏幕外部分生成碎片。

简而言之，使用全屏三角形没有任何弊端，它可能会给您带来轻微的性能提升，因此在所有情况下，我都宁愿使用全屏三角形。

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

1 个答案: