如何在webgl上使用`gl.POINTS`绘制单个像素？

Question

我尝试使用WebGL绘制单个像素。我使用gl_PointSize = 1.0和gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0)。我期待单个黑色像素。然而，这就是我的观点呈现方式：

也就是说，我得到的是灰色点，覆盖面积约为3x3。我如何获得实际的单像素？

Answer 1

首先，你的画布尺寸是否与1x1像素的显示尺寸相匹配？如果不是，你会得到拉伸像素。 Canvases have 2 sizes。它们的drawingBuffer的大小和它们显示的大小。 CSS设置它们显示的大小。它们的宽度和高度设置了drawingBuffer的大小。

GL中的第二个像素由其边缘寻址。换句话说，让我们说你有3x1像素画布。有3个像素

-1,1                              1,1
  +----------+----------+----------+
  |          |          |          |
  |          |          |          |
  |          |          |          |
  |          |          |          |
  +----------+----------+----------+
-1,-1                             1,-1

要绘制第一个像素，您需要给出其中心点。在上图中，第一个像素的中心点是

      -2/3,0

让我们试一试。下面的代码绘制为3x1像素纹理然后将该纹理绘制到300x100画布，以便我们可以清楚地看到它

＆＃13;

＆＃13;

'use strict';

var vs_point = `
attribute vec4 position;
void main() {
  gl_Position = position;
  gl_PointSize = 1.0;
}
`;
var fs_point = `
precision mediump float;
void main() {
  gl_FragColor = vec4(0, 0, 0, 1);
}`;

var vs_tex = `
attribute vec4 position;
varying vec2 v_texcoord;
void main() {
  gl_Position = position;
  v_texcoord = position.xy * 0.5 + 0.5;
}
`;
var fs_tex = `
precision mediump float;
uniform sampler2D u_texture;
varying vec2 v_texcoord;
void main() {
  gl_FragColor = texture2D(u_texture, v_texcoord);
}
`;

// Let's make a 3x1 texture, render to it
// then render it to the canvas with gl.NEAREST
var canvas = document.querySelector("canvas");
var gl = canvas.getContext("webgl");
var pointProgramInfo = twgl.createProgramInfo(
    gl, [vs_point, fs_point]);
var texProgramInfo = twgl.createProgramInfo(
    gl, [vs_tex, fs_tex]);

var pointBufferInfo = twgl.createBufferInfoFromArrays(gl, {
  position: { numComponents: 2, data: [ -2/3, 0 ] },
});
var quadBufferInfo = twgl.primitives.createXYQuadBufferInfo(gl);
  
// make a 3x1 pixel texture and attach to framebuffer
var framebufferInfo = twgl.createFramebufferInfo(gl, [
  { format: gl.RGBA, mag: gl.NEAREST, min: gl.NEAREST, wrap: gl.CLAMP_TO_EDGE, }
], 3, 1);

// draw 1 pixel into texture
twgl.bindFramebufferInfo(gl, framebufferInfo);
gl.useProgram(pointProgramInfo.program);
twgl.setBuffersAndAttributes(gl, pointProgramInfo, pointBufferInfo);
twgl.drawBufferInfo(gl, gl.POINTS, pointBufferInfo);
    
// put in a clipspace quad
twgl.bindFramebufferInfo(gl, null);
gl.useProgram(texProgramInfo.program);
twgl.setBuffersAndAttributes(gl, texProgramInfo, quadBufferInfo);
twgl.drawBufferInfo(gl, gl.TRIANGLES, quadBufferInfo);
    

＆＃13;

canvas { border: 1px solid red; }

＆＃13;

<script src="https://twgljs.org/dist/twgl-full.min.js"></script>
<canvas width="300" height="100"></canvas>

＆＃13;

＆＃13;

＆＃13;

或者作为另一个示例，让我们将随机像素绘制到画布上。

重要的部分是像素的位置

 clipspaceX = (x + 0.5) / destWidth  * 2 - 1;
 clipspaceY = (y + 0.5) / destHeight * 2 - 1;

＆＃13;

＆＃13;

'use strict';

var vs = `
attribute vec4 position;
void main() {
  gl_Position = position;
  gl_PointSize = 1.0;
}
`;
var fs = `
precision mediump float;
uniform vec4 u_color;
void main() {
  gl_FragColor = u_color;
}`;

var canvas = document.querySelector("canvas");
var gl = canvas.getContext("webgl", {preserveDrawingBuffer: true});

// make canvas 1x1 with display
gl.canvas.width  = gl.canvas.clientWidth  * window.devicePixelRatio;
gl.canvas.height = gl.canvas.clientHeight * window.devicePixelRatio;
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);

var programInfo = twgl.createProgramInfo(gl, [vs, fs]);

var positions = new Float32Array(2000);
var bufferInfo = twgl.createBufferInfoFromArrays(gl, {
  position: { numComponents: 2, data: positions, },
});

gl.useProgram(programInfo.program);
twgl.setBuffersAndAttributes(gl, programInfo, bufferInfo);

function randInt(max) {
  return Math.random() * max | 0;
}

var offset = [0, 0];
var color = [0, 0, 0, 1];

var uniforms = {
  u_offset: offset,
  u_color: color,
};

function render() {
  var length = positions.length;
  for (var i = 0; i < length; i += 2) {
    var x = randInt(gl.canvas.width);
    var y = randInt(gl.canvas.height);

    positions[i + 0] = (x + 0.5) / gl.canvas.width  * 2 - 1;
    positions[i + 1] = (y + 0.5) / gl.canvas.height * 2 - 1;
  }
  twgl.setAttribInfoBufferFromArray(
    gl, bufferInfo.attribs.position, positions);  
  
  var cndx = randInt(3);
  color[cndx] = 1;
  color[(cndx + 1) % 3] = 0;

  twgl.setUniforms(programInfo, uniforms);
  twgl.drawBufferInfo(gl, gl.POINTS, bufferInfo);
  
  requestAnimationFrame(render);
}
requestAnimationFrame(render);

＆＃13;

canvas { border: 1px solid black; }

＆＃13;

<script src="https://twgljs.org/dist/twgl-full.min.js"></script>
<canvas style="width:300px; height:150px;"></canvas>

＆＃13;

＆＃13;

＆＃13;