EDIT1：第二版：这是我在开始时和滑块更改时所做的事情：

Question

我的显示器的分辨率为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和三个.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 );

            }

Answer 1

The highest number of individual points I've seen so far was with potree.

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

Try some demo, I was able to observe 5 millions of points in 3D at 20-30fps. I believe this is also current technological limit.

I didn't test potree on my own, so I cant say much about this tech. But there is data convertor and viewer (threejs based) so should only figure out how to convert the data.

Briefly about your question

The best way handle large data is group them as quad-tree (2d) or oct-tree (3d). This will allow you to not bother program with part that is too far from camera or not visible at all.

On the other hand, program doesnt like when you do too many webgl calls. Try to understand it like this, you want to do create ~60 images each second. But each time you set some parameter for GPU, program must do some sync. Spliting data means you will need to do more setup so tree must not be too detialed.

Last thing, someone said:

You'll probably want to pass an array of values as one of the shader uniforms

I dont suggest it, bad idea. Texture lookup is quite fast, but attributes are always faster. If we are talking about 4M points, you cant afford reading data from uniforms.

Sorry I cant help you with the code, I could do it without threejs, Im not threejs expert :)

Answer 2

绘制正方形的最快方法是使用gl.POINTS原语，然后将gl_PointSize设置为像素大小。

在three.js中，gl.POINTS包含在THREE.PointCloud对象中。您必须为每个点创建一个具有一个位置的几何对象，并将其传递给PointCloud构造函数。

以下是THREE.PointCloud的示例： http://codepen.io/seanseansean/pen/EaBZEY

geometry = new THREE.Geometry();

for (i = 0; i < particleCount; i++) {

    var vertex = new THREE.Vector3();
    vertex.x = Math.random() * 2000 - 1000;
    vertex.y = Math.random() * 2000 - 1000;
    vertex.z = Math.random() * 2000 - 1000;

    geometry.vertices.push(vertex);
}

...

materials[i] = new THREE.PointCloudMaterial({size:size});
particles = new THREE.PointCloud(geometry, materials[i]);

我没有挖掘所有代码，但是我已经将粒子数设置为2米，根据我的理解，生成5点云，所以2m * 5 = 10m粒子，我得到了大约30fps。

Answer 3

我建议尝试使用pixi框架（如上面评论中所述）。

它有webgl渲染器，一些基准非常有希望。

http://www.goodboydigital.com/pixijs/bunnymark_v3/

它可以处理所有动画精灵。如果您的应用程序仅显示正方形，并且没有动画，并且它们是非常简单的精灵（只有一种颜色），那么它将提供比上面的演示链接更好的性能。

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

EDIT1：第二版：这是我在开始时和滑块更改时所做的事情：

3 个答案: