javascript - 在浏览器中显示400万个2D正方形的最有效方法是什么？

我的显示器的分辨率为7680x4320像素。我想显示多达400万个不同的彩色正方形。我想用滑块更改方块数。如果当前有两个版本。一个带有canvas-fillRect的东西，看起来像这样:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

for (var i = 0; i < num_squares; i ++) {

   ctx.fillStyle = someColor;
   ctx.fillRect(pos_x, pos_y, pos_x + square_width, pos_y + square_height);

   // set pos_x and pos_y for next square
}

还有一个带有webGL和three.js。相同的循环，但是我为每个正方形创建一个盒子几何体和一个网格:

var geometry = new THREE.BoxGeometry( width_height, width_height, 0);

for (var i = 0; i < num_squares; i ++) {

   var material = new THREE.MeshLambertMaterial( { color: Math.random() * 0xffffff } );
   material.emissive = new THREE.Color( Math.random(), Math.random(), Math.random() );

   var object = new THREE.Mesh( geometry, material );

}

它们都可以工作数千平方。第一个版本最多可以做一百万个正方形，但是超过一百万个的一切都太慢了。我想动态更新颜色和正方形数。
有谁有技巧来提高Three.js / WebGL / Canvas的效率？
EDIT1:第二个版本:这是我在开始时和滑块更改时所做的:

// Remove all objects from scene
            var obj, i;
            for ( i = scene.children.length - 1; i >= 0 ; i -- ) {
                obj = scene.children[ i ];
                if ( obj !== camera) {
                    scene.remove(obj);
                }
            }

            // Fill scene with new objects
            num_squares = gui_dat.squareNum;

            var window_pixel = window.innerWidth * window.innerHeight;
            var pixel_per_square = window_pixel / num_squares;
            var width_height = Math.floor(Math.sqrt(pixel_per_square));

            var geometry = new THREE.BoxGeometry( width_height, width_height, 0);

            var pos_x = width_height/2;
            var pos_y = width_height/2;

            for (var i = 0; i < num_squares; i ++) {

                //var object = new THREE.Mesh( geometry,  );

                var material = new THREE.Material()( { color: Math.random() * 0xffffff } );
                material.emissive = new THREE.Color( Math.random(), Math.random(), Math.random() );

                var object = new THREE.Mesh( geometry, material );

                object.position.x = pos_x;
                object.position.y = pos_y;

                pos_x += width_height;
                if (pos_x > window.innerWidth) {

                    pos_x = width_height/2;
                    pos_y += width_height;
                }

                scene.add( object );

            }

最佳答案

到目前为止，我看到的最多的个人积分是potree。

http://potree.org/，https://github.com/potree

尝试一些演示，我能够以20-30fps的速度在3D中观察到500万个点。我相信这也是当前的技术极限。

我没有自己测试potree，所以我不能对这项技术说太多。但是有数据转换器和查看器(基于3js)，因此应该只弄清楚如何转换数据。

简要介绍您的问题

处理大数据的最佳方法是将它们分为四叉树(2d)或八叉树(3d)。这将使您不必为程序距离相机太远或根本看不见的部分打扰。

另一方面，当您进行过多的webgl调用时，程序不喜欢。尝试这样理解它，您想每秒创建约60张图像。但是，每次为GPU设置一些参数时，程序都必须进行一些同步。拆分数据意味着您将需要进行更多的设置，所以树的位置一定不要太小。

最后一件事，有人说:



我不建议这样做，坏主意。纹理查找非常快，但是属性总是更快。如果我们谈论的是4M点，则您负担不起从制服中读取数据的能力。

抱歉，我无法为您提供代码，没有Threejs，我可以做到，我不是Threejs专家:)