Webgl OpenGL顶点着色器的功能如何？可以画多少个四边形？

我编写了一个演示应用程序来测试顶点着色器的功能，因为到处都说它每秒可以处理数百万个四边形，但在我的例子中，它在某个限制下失败

我写了一个演示，它有一个只接受数字的输入框，它会根据输入的数字动态地渲染正方形。 我可以很容易地看到它的行动没有任何延迟，直到大约25平方四边形后，它减慢，甚至在某个点上，GPU崩溃，这是更糟糕的

我们能优化我写的代码吗？还是GPU和OpenGL ES的局限性

代码：

`

#300版es
在vec3位置；
vec4色；
输出vec4颜色；
空干管（）{
gl_位置=vec4（位置，1.0）；
fcolor=颜色；
}
#300版es
精密中泵浮子；
在vec4彩色；
输出vec4最终颜色；
空干管（）{
最终颜色=vec4（fcolor）；
}
var-gl，canvas；
gl=initWebGLCanvas（“画布”）；
var program=getProgram（'vertexShader'，'fragmentShader'，true）；
document.getElementById（'numOfGrids'）。oninput=function（）{
透明帆布（gl）；
this.value=this.value | | 1；
this.value=this.value>=0？this.value:0；
var gridVertices=createGridVerticesBuffer（this.value | | 1）；
启用VerticeStopickBinarydatawithingPU（程序“位置”、“颜色”）；
从gpuandrendertocanvas获取数据({
职位索引：总帐职位索引，
顶点：网格顶点，
尺寸：3，
步幅：7，
colorIndex:gl.colorIndex，
颜色尺寸：4，
位置偏移：0，
色差：3，
startIndexToDraw:0，
数量：6
}，德国劳埃德船级社）；
};
var r=[1.0,0.0,0.0,1.0]；
var g=[0.0,1.0,0.0,1.0]；
VarB=[0.0,0.0,1.0,1.0]；
var z=0.0；
var createGridVerticesBuffer=（gridsRequested）=>{
变量顶点=[
1.0，-1.0，z，r[0]，r[1]，r[2]，r[3]，
-1.0,1.0,z，g[0]，g[1]，g[2]，g[3]，
-1.0，-1.0，z，b[0]，b[1]，b[2]，b[3]，
1.0，-1.0，z，r[0]，r[1]，r[2]，r[3]，
-1.0,1.0,z，g[0]，g[1]，g[2]，g[3]，
1.0,1.0,z，b[0]，b[1]，b[2]，b[3]；
var vertexArray=[]；
var系数=2.0/gridsRequested；
var areaRequired=-1.0+因子；
顶点[21]=顶点[0]=需要的区域；
顶点[15]=顶点[1]=需要的区域；
顶点[22]=-需要的区域；
顶点[35]=所需面积；
顶点[36]=顶点[8]；
vertexArray.push（顶点）；
var lastVertices=vertices.slice（）；
var processX=真；
对于（var i=1；i您提出了一个无法回答的问题

可以画多少个四边形

我们说的是哪种设备？树莓皮？iPhone 2？带NVidia 2080 RTX的Windows PC？多大尺寸的四边形？你的碎片着色器在做什么

在任何情况下，您遇到的问题都不是顶点着色器问题，而是碎片着色器问题。绘制像素需要时间。绘制1024x1024四边形需要绘制100万像素。绘制100个1024x1024四边形需要绘制1亿像素。尝试每秒绘制60次需要绘制60亿像素

将所有四边形更改为1x1像素，它将正常运行，因为您只要求它每秒绘制6000像素

这通常被称为填充率限制。你不能绘制那么多像素。在你的情况下，这也被称为过度绘制。通过绘制重叠的四边形，你会浪费时间绘制多个相同像素。如果可能，你应该尝试只绘制一次每个像素

我猜一般的经验法则是，大多数GPU只能以每秒60帧的速度绘制2到12个全屏四元组。我只是从任何地方提取了这个数字，但举例来说，一个原始的android GPU只能以每秒60帧的速度绘制1.5个全屏四元组。我想Raspberry PI可能小于4。我知道一个2015 Intel Graphics（不确定哪种型号）在1280x720时可以显示大约7个屏幕。我的2019款Macbook Air可以显示大约3个屏幕（其分辨率为2560x1600，与1280x720时的12个屏幕大致相同）

至于崩溃，GPU没有崩溃，而是浏览器或操作系统重置了GPU，因为这花费了太长时间是而不是像CPU一样进行多任务处理。CPU可以被中断并切换到做其他事情。这就是你的电脑能够同时运行许多应用程序和服务的方式。大多数GPU无法做到这一点。他们一次只能做一件事。因此，如果你在一次抽签通话中给他们30秒的工作时间，他们将做30秒的工作rk无中断。这对操作系统没有好处，因为它需要GPU来更新windows和运行其他应用程序。因此，操作系统（和某些浏览器）会对每次draw调用计时。如果一次draw调用占用的时间超过一定的时间，则会重置GPU，并经常杀死要求GPU执行某些耗时过长的操作的程序或页面

至于如何知道哪些工作太多，你不应该尽可能多地做，而应该尽可能少地做。你的应用程序无缘无故地画出重叠的四边形

如果您确实需要绘制重叠的四边形或进行一些耗时的计算，那么您可能需要找到一种方法，将其分解为每个绘制调用的较小操作。每个绘制调用处理5个四边形，并使用5个绘制调用，而不是25个。处理更多较小的四边形，而不是更少的大四边形，等等。
您已经询问了不可回答的问题

可以画多少个四边形

我们说的是哪种设备？树莓皮？iPhone 2？带NVidia 2080 RTX的Windows PC？多大尺寸的四边形？你的碎片着色器在做什么

在任何情况下，您遇到的问题都不是顶点着色器问题，而是碎片着色器问题。绘制像素需要时间。例如，绘制1024x102
    <script type="vertexShader" id="vertexShader">
    #version 300 es
    in vec3 position;
    in vec4 color;
    out vec4 fcolor;
    void main () {
        gl_Position = vec4(position, 1.0);
        fcolor = color;
    }
</script>

<script type="fragmentShader" id="fragmentShader">
    #version 300 es
    precision mediump float;
    in vec4 fcolor;
    out vec4 finalColor;
    void main () {
        finalColor = vec4(fcolor);
    }
</script>
    var gl, canvas;
    gl = initWebGLCanvas('canvas');
    var program = getProgram('vertexShader', 'fragmentShader', true);
    document.getElementById('numOfGrids').oninput = function () {
        clearCanvas(gl);
        this.value = this.value || 1;
        this.value = this.value >= 0 ? this.value : 0;
        var gridVertices = createGridVerticesBuffer(this.value || 1);
        enableVerticesToPickBinaryDataWithinGPU(program, 'position', 'color');
        fetchDataFromGPUAndRenderToCanvas({
            positionIndex : gl.positionIndex,
            vertices : gridVertices,
            positionSize : 3,
            stride : 7,
            colorIndex : gl.colorIndex,
            colorSize : 4,
            positionoffset : 0,
            colorOffset : 3,
            startIndexToDraw : 0,
            numOfComponents : 6
        }, gl);
    };

        var r = [1.0, 0.0, 0.0, 1.0];
var g = [0.0, 1.0, 0.0, 1.0];
var b = [0.0, 0.0, 1.0, 1.0];
var z = 0.0;

var createGridVerticesBuffer = (gridsRequested) => {
    var vertices = [
        1.0, -1.0, z, r[0], r[1], r[2], r[3],
    -1.0, 1.0, z, g[0], g[1], g[2], g[3],
    -1.0, -1.0, z, b[0], b[1], b[2], b[3],

    1.0, -1.0, z, r[0], r[1], r[2], r[3],
    -1.0, 1.0, z, g[0], g[1], g[2], g[3],
    1.0, 1.0, z, b[0], b[1], b[2], b[3]];

    var vertexArray = [];
    var factor = 2.0/gridsRequested;
    var areaRequired = -1.0 + factor;
    vertices[21] = vertices[0] = areaRequired;
    vertices[15] = vertices[1] = -areaRequired;

    vertices[22] = -areaRequired;
    vertices[35] = areaRequired;
    vertices[36] = vertices[8];
    vertexArray.push(vertices);
    var lastVertices = vertices.slice();
    var processX = true;
    for (var i = 1; i <= gridsRequested * gridsRequested - 1; i++) {
        var arr = lastVertices.slice();
        if (processX) {
            arr[21] = arr[0] = lastVertices[0] + factor;
            arr[28] = arr[7] = lastVertices[35];
            arr[8] = lastVertices[36];
            arr[14] = lastVertices[0];
            arr[15] = lastVertices[1];
            arr[35] = lastVertices[35] + factor;
        } else {
            arr[22] = arr[1] = lastVertices[1] - factor;
            arr[29] = arr[8] = lastVertices[8] - factor;
            arr[15] = lastVertices[15] - factor;
            arr[36] = lastVertices[36] - factor;
        }
        vertexArray.push(arr);
        if ((i + 1) % gridsRequested === 0) {
            lastVertices = vertexArray[i + 1 - gridsRequested];
            processX = false;
        } else {
            processX = true;
            lastVertices = arr;
        }
    }
    return createBuffers(gl, vertexArray, true);

};