使用GL.points在WebGL中绘制单个像素

Question

我正在学习Tavares WebGL 教程，但遇到了困难。

我想使用GL.points来绘制单个像素。我的数组肯定出了问题。在 FF 或 Chrome Canary 中查看：

http://codepen.io/anon/pen/EPJVjK

/**
 * Creates a program, attaches shaders, links the program.
 * @param {WebGLShader[]} shaders. The shaders to attach.
 */
var createGLProgram = function( gl, shaders ) {
    var program = gl.createProgram();
    for ( var i = 0; i < shaders.length; i += 1 ) {
        gl.attachShader( program, shaders[ i ] );
    }

    gl.linkProgram( program );

    // Check the link status
    var linked = gl.getProgramParameter( program, gl.LINK_STATUS );
    if ( !linked ) {

        // Something went wrong with the link
        var lastError = gl.getProgramInfoLog( program );
        window.console.error( "Error in program linking: " + lastError );

        gl.deleteProgram( program );
        return null;
    }
    return program;
};

var myCreateShader = function( gl, shaderScriptText, shaderType ) {

    // Create the shader object
  var shader = gl.createShader( shaderType );

  // Load the shader source
  gl.shaderSource( shader, shaderScriptText );

  // Compile the shader
  gl.compileShader( shader );
  return shader;
};

// Get A WebGL context.
var canvas = document.getElementById( "canvas" );

var gl = canvas.getContext( "webgl", { antialias: false } )

var vertexShader = myCreateShader( gl,
    `attribute vec2 a_position;

    uniform vec2 u_resolution;

    void main() {
    // convert the rectangle from pixels to 0.0 to 1.0
        vec2 zeroToOne = a_position / u_resolution;

        // convert from 0 -> 1 to 0 -> 2
        vec2 zeroToTwo = zeroToOne * 2.0;

        // convert from 0 -> 2 to -1 -> +1 (clipspace)
        vec2 clipSpace = zeroToTwo - 1.0;

        // Flip 0,0 from bottom left to conventional 2D top left.
        gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);
    }`, gl.VERTEX_SHADER );

var fragmentShader = myCreateShader( gl,
    `precision mediump float;

    uniform vec4 u_color;

    void main() {
    gl_FragColor = u_color;
    }`, gl.FRAGMENT_SHADER );

var program = createGLProgram( gl, [ vertexShader, fragmentShader ] );
gl.useProgram( program );

// Store color location.
var colorLocation = gl.getUniformLocation( program, "u_color" );

// Look up where the vertex data needs to go.
var positionLocation = gl.getAttribLocation( program, "a_position" );

// Set the resolution.
var resolutionLocation = gl.getUniformLocation( program, "u_resolution");
gl.uniform2f( resolutionLocation, canvas.width, canvas.height);

// Create a buffer.
var buffer = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER, buffer );
gl.enableVertexAttribArray( positionLocation );

// Send the vertex data to the shader program.
gl.vertexAttribPointer( positionLocation, 2, gl.FLOAT, false, 0, 0 );

// Set color to black.
gl.uniform4f( colorLocation, 0, 0, 0, 1);

function drawOneBlackPixel( gl, x, y ) {
    // Fills the buffer with a single point?
    gl.bufferData( gl.ARRAY_BUFFER, new Float32Array([
      x,     y,
            0,     y,
            x,     0,
            x,     0,
            0,     y,
            0,     0]), gl.STATIC_DRAW );

    // Draw one point.
    gl.drawArrays( gl.POINTS, 0, 1 );
}


// These tests are supposed to be x,y coordinates from top left.
drawOneBlackPixel( gl, 0, 0 );
drawOneBlackPixel( gl, 1, 1 );
drawOneBlackPixel( gl, 2, 2 );
drawOneBlackPixel( gl, 3, 3 );
drawOneBlackPixel( gl, 4, 4 );
drawOneBlackPixel( gl, 5, 5 );
drawOneBlackPixel( gl, 6, 6 );
drawOneBlackPixel( gl, 7, 7 );
drawOneBlackPixel( gl, 10, 5 );
drawOneBlackPixel( gl, 15, 5 );
drawOneBlackPixel( gl, 20, 5 );
drawOneBlackPixel( gl, 12, 34 );
drawOneBlackPixel( gl, 42, 42 );

问题在于像素没有正确地渲染在原位。(0,0)不会绘制在左上角。而应该是像素对角线的部分却被分成了两个像素块。一个有效的Codepen将是理想的解决方法。

作为第二个“奖励”问题，我希望能够批量处理单个drawArrays调用中的多个像素，调用requestAnimationFrame。如何最好地做到这一点将不胜感激。

附言：我已经阅读了： 如何使用WebGL在画布上设置像素的颜色？ 但我的错误似乎比那个更低级。并且请不要建议我使用canvas2D。我想要WebGL的性能，并且我正在从基础开始学习 :)

- Ben

---

请继续阅读教程。虽然那个顶点着色器在几篇文章后会被分解成几个步骤，但它将被压缩成一行代码，这样更加灵活。 - gman

Answer 1

有几个要点：

首先，您需要在顶点着色器中添加gl_PointSize = 1.0;以告诉WebGL您的gl.POINT的大小。

其次，您传递的坐标是每个像素的中心而不是每个像素左上角的位置，因此，

function drawOneBlackPixel( gl, x, y ) {
    // Fills the buffer with a single point?
    gl.bufferData( gl.ARRAY_BUFFER, new Float32Array([
      x+0.5,     y+0.5]), gl.STATIC_DRAW );

    // Draw one point.
   gl.drawArrays( gl.POINTS, 0, 1 );
}

这就是你想要的。

这里有一个可工作的Codepen链接：http://codepen.io/anon/pen/pgBjBy。

奖励问题：在这里，您需要手动管理gl.buffer（喘气），以便可以执行gl.drawArrays(gl.POINTS, 0, x); 来绘制x个点。例如，如果您想在(0,0) (1,1), (2,2)处绘制3个点，则需要执行 gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([0.5, 0.5, 1.5, 1.5, 2.5, 2.5], gl.STATIC_DRAW) 然后gl.drawArrays(gl.POINTS, 0, 3);

例如，您可以先分配一个Float32Array，其中有4个点的空间，每当您调用drawOneBlackPixel时，它将首先将Float32Array设置为[p1x,p1y,0,0,0,0,0,0]，并且在下一次drawOneBlackPixel时，它会将数组设置为[p1x,p1y,p2x,p2y,0,0,0,0]等等。当然，您还必须处理其他事项，例如根据需要增加和复制Float32Array并在更改时将其上载到GPU。如何处理点的“擦除”也是要牢记的事情。

- WacławJasper