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

Question

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

也就是说，我得到的是覆盖大约 3x3 区域的灰点。我如何获得实际的单个像素？

Answer 1

首先，您的画布尺寸是否与其显示尺寸 1x1 像素相匹配？如果没有，你会得到拉伸的像素。画布有 2 种尺寸。它们的绘图缓冲区的大小以及它们显示的大小。CSS 设置它们显示的大小。它们的宽度和高度设置绘图缓冲区的大小。

GL 中的第二个像素通过其边缘进行寻址。换句话说，假设您有 3x1 像素的画布。有3个像素

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

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

      -2/3,0

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

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

      -2/3,0

'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, pointBufferInfo, gl.POINTS);
    
// put in a clipspace quad
twgl.bindFramebufferInfo(gl, null);
gl.useProgram(texProgramInfo.program);
twgl.setBuffersAndAttributes(gl, texProgramInfo, quadBufferInfo);
twgl.drawBufferInfo(gl, quadBufferInfo, gl.TRIANGLES);

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

重要的部分是像素的位置是

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

canvas { border: 1px solid red; }

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

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