javascript - 分别绘制每个像素 WebGL

Question

首先说一下我的目标。我正在创建另一个像素艺术在线编辑器，并决定只使用 WebGL(根本没有 Canvas2D)。我真蠢，因为我对这项技术一无所知，但我正在努力!所以......问题:如何改变唯一一个像素的颜色？我一直在与我的另一个“误解”作斗争，并用粒子系统找到了这个答案:

https://stackoverflow.com/a/16465343/4458277

我重写了它以使其看起来接近我的情况:

https://jsfiddle.net/kurz/rt2n7hmb/1/

如您所见，在 Canvas 上绘图时，有 10 个像素具有相同的颜色。这里主要绘制方法:

function mouseMoveEvent(e) {
    /*... detect x and y...*/
    gl.bindBuffer(gl.ARRAY_BUFFER, particleBuffer);
    var data = new Float32Array(2);
    data[0] = x;
    data[1] = y;
    gl.uniform4f(
        gl.getUniformLocation(shaderProgram, "color"),
        Math.random(),
        Math.random(),
        Math.random(),
        1.0
    );
    gl.bufferSubData(gl.ARRAY_BUFFER, particleId * particleSize * sizeOfFloat, data);
    particleId = (particleId + 1) % vertexBufferSize;
    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.drawArrays(gl.POINTS, 0, vertexBufferSize);
}

那么如何将此示例更改为使用唯一颜色绘制的像素？

有些人可能会说:“使用 canvas2d!”。 - 不!我认为 future 不是canvas2d。“所以使用图书馆!”。 - 不，再来一次!对于像画正方形这样的“简单”事情，我不希望包含大型库。

谢谢!

Answer 1

关于您发布的代码，您需要了解的是它正在将一个变量传递给片段着色器，它没有进行任何绘制。片段着色器正在绘制。

OpenGL 是一种在现代图形卡上操纵渲染过程不同阶段的工具。它不会尝试涵盖将像素传送到屏幕缓冲区的用例。 (glDrawPixels 已弃用，在 ES 2.0 或 WebGL 中不可用)

但是，您可以通过多种方式在您的应用程序中使用它。

我推荐these两个articles了解先决条件，但您应该知道它适用于 openGL 3.2 和 C++，而不是 WebGL 和 Javascript。因此，您可以忽略诸如上下文创建、纹理加载方式之类的事情，并且您不必创建 VertexArrays。

WebGL 解决方案 1:

• 创建一个空纹理。
• 每一帧，在显示该纹理的屏幕上绘制一个四边形。
• 单击鼠标时，调用 glTexSubImage2D 修改纹理中的 1 个像素。

WebGL 方案二:

• 更改 gl_PointSize(顶点着色器第 8 行)
• 只画1分
• 不要清除屏幕(javascript 第 45 行)
• 保留 webGL 屏幕缓冲区(javascript 第 86 或 89 行)

See modified source

此解决方案未修改 1 个精确像素，我认为解决方案 1 是更好的方法

为什么要使用 Canvas2D:

认为Canvas2D不如WebGL是错误的，一个是 Screwdriver ，一个是锤子。一种非常适合用螺丝固定东西，另一种非常适合用钉子固定东西。

当您想要操作 3d 渲染管道时使用 WebGL，当您想要操作光栅图像时使用 Canvas2D。

长话短说:

如果您使用 Canvas2D，您今天就可以开始制作您想要的具有良好性能的应用程序。如果您想使用 WebGL，您应该努力了解渲染管道的各个阶段。