使用WebGL绘制彩色圆点

Question

不知何故，我似乎无法找到这样一个简单问题的答案 - 使用webGL绘制一个歌曲点。

具体来说，我使用folowing函数绘制3D图形（但是，Z轴用颜色表示）：

不要被“＃34; 3D＆＃34; - 我不想要真正的3D，我只想使用webGL生成上面的图像。

每个像素行都是从数组生成的，Y轴代表时间。

在这里，您可以看到我现在如何填充数据：

       //Normal canvas rendering
       for(var i=0, l=data.length;i<l;i++) {
            h_ctx.beginPath();
            //The color of the dot
            h_ctx.fillStyle = "hsl("+(120-120*(data[i]/255))+", 100%, 45%)";
            //Create a dot using color above
            h_ctx.rect(i,iteration,1, 1);
            h_ctx.fill();
            h_ctx.closePath();
        }

如果你想看到它的实际效果，我创建了一个JSFiddle。它需要AudioContext的支持。

Answer 1

将大量数据放入着色器的最佳方法是将纹理作为纹理。如果您的音频分析器已经是一个类型化的Uint8Array，那么您可以像传递纹理一样将其传递给WebGL。

gl.texImage2D(gl.TEXTURE_2D,0,gl.RGBA,16,16,0,gl.RGBA,gl.UNSIGNED_BYTE,yourDataArray)

你当然可以绘制矩形＆＃34;几乎＆＃34;就像你在2D环境中一样，这可能是一个更容易的过渡，因为它几乎在所有教程中都是你做的第一件事。在WebGL中，矩形由2个三角形定义，每个3个顶点。颜色可以以多种方式定义，但最接近2d上下文的是使用每顶点颜色。

所以你需要一个缓冲区，一个数组，其中包含6个顶点中每个顶点的坐标（范围从-1.0到1.0）。请记住，在WebGL中，Y轴翻转＆lt; 3，因此1向下，-1向上。然后为6个顶点（范围从0.0到1.0）缓冲一个具有4种颜色（r，g，b，a）的数组。

你为每个矩形重复一遍，将它们分批绘制到一个绘图调用然后将它们绘制到屏幕上（你可以单独绘制它们，但如果每帧执行1024次则可能会滞后）。

然后你当然需要编写基本顶点和片段着色器。对于顶点着色器，没有多少可以说它是一个基本的每个顶点颜色着色器，在每个顶点的变化vec4中将颜色属性传递给片段着色器，并根据您的顶点位置计算空间中的顶点位置属性。

对于gpu来说是件好事，如果你已经提供了-1到1之间的坐标，它不需要计算太多，对你不好，因为gpu可以很容易地获取屏幕空间中的坐标（范围从0以像素为单位的屏幕尺寸）并在此处计算剪辑空间（-1到1）中的相应坐标。为了做到这一点，它需要知道您通过统一的vec2提供的屏幕尺寸。

片段着色器然后只需要提供不同的vec4提供的顶点着色器，并根据它设置fragColor（pixelcolor），无需任何额外的计算。 （与我建议的第一种方法不同，你会将声音频率作为纹理提供，而且几乎所有其他内容都会在片段着色器中发生）

所以你看到绘图矩形在WebGL中非常简单，我在解释它时非常可怕。但我可以给你一个教程的链接，它可以更好地解释它，并提供代码片段来解决。

http://games.greggman.com/game/webgl-fundamentals/

Answer 2

我认为这不是一个简单的问题。在屏幕上绘制一个点至少需要某种渲染管道的概述。

你需要一些东西来吸引这一点。例如，您可以使用gl_PointSize创建顶点并渲染它们，gl_PointSize会将点光栅化为您指定的大小。通过控制这个顶点或顶点，您可以在需要时在屏幕上的任何位置渲染点。