Canvas 使用WebGL绘制彩色圆点

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

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

不要被“3D”这个词搞糊涂了——我不想要真正的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();
        }

//正常画布渲染
对于（var i=0，l=data.length；i将大量数据作为纹理输入着色器的最佳方法。如果音频分析器已经是一个类型化的Uint8Array，那么您可以像传递纹理一样将其传递给WebGL

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

你当然可以“几乎”画矩形就像在2d环境中一样，这可能更容易过渡到，因为在几乎所有教程中，这是您首先要做的事情。在WebGL中，矩形由2个三角形定义，每个三角形有3个顶点。颜色可以通过多种方式定义，但最接近2d环境的是使用逐顶点颜色

所以你需要一个缓冲区，一个包含6个顶点中每个顶点坐标的数组（范围从-1.0到1.0）。请记住，在WebGL中，Y轴是翻转的我认为这不是一个简单的问题。在屏幕上绘制一个点至少需要对渲染管道进行某种概述

您需要一些东西来绘制该点。例如，您可以创建顶点，并使用gl_PointSize渲染它们，这将使该点光栅化为您指定的大小。通过控制该顶点，您可以在需要时在屏幕上的任何位置渲染点。
不清楚您要执行的操作。如果您只想在WebGL中绘制图像，那么是的，最简单的方法是将这些像素放在纹理中并绘制纹理。如果你真的想绘制点，那么更好的问题是你为什么要在WebGL中这样做？你发布的画布2d解决方案有什么问题？它很慢，这是错误的。我看到一些WebGL演示证明了这一点WebGL渲染速度更快（可能是双缓冲的…？）。此外，我不想开始学习WebGL。我已经有一个基于画布的地图编辑器，速度非常慢。感谢您编写了所有这些。我相信我会不止一次地回到这篇文章：）从第一个函数开始，那个只接受SS数组的-它怎么知道这些值是什么意思？它不知道这些值是什么意思。数据基本上将被解释为RGBA中的16x16纹理（您在调用
texImage2d
时定义了尺寸和颜色），因此这就是您将在片段着色器中开始的内容。由于声音数据已经是1024个无符号整数的数组（每个整数都是纹理中的0-255个颜色值），因此它基本上与图像数据相同。（1024/4颜色=256像素=16*16纹理）