best way to create a 500x500X1000 cube

[Biz]

I am very new to babylon and have been reading through tutorials and playing in the playground.  I am trying to create a representation of seismic data and am having trouble with performance. I have tried creating my own mesh using vectors and vector order and just a wireframe but  hit a size limitation at 100X1000 just trying to create a plane.  Chrome crashes after that.  But even at 100X100 plane size the rendering is so slow as to be unusable.  I also tried creating separate planes and positioning using the .position property along the xyz axis.  it works but has same issues as when creating mesh.  I see something in playground using particles that looks promising but before I invest to much time in that I was hoping someone could point me in the right direction as to the most efficient way to do something like this.  Thanks for any info you can provide.

[dbawel]

Large Box

http://www.babylonjs-playground.com/#1XFXGB#0

To create a plane, just set you clipping for the camera to be able to view te object.

http://www.babylonjs-playground.com/#1A2BHA#0

 

DB

 

[Biz]

thanks.  so looking at the box example in the playground but do not see how i could assign 1000x1000 different colors to any given side of the box to represent my data.  my understanding is it has to be done with submesh and materials, which i think is where the performance issue comes into play.

[JohnK]

Hi Biz and welcome not really clear on your needs. It would be useful if you could produce an image illustrating what you want and how it represents the sort of data you mean. As they say - a picture is worth 1000 words. A rough drawing or a link to an image something similar on the web maybe?

[Biz]

Hi John,

this is a test i did with a plane and a bitmap from actual data using babylon. it is only in 3 colors but will eventually be in many colors looked up in a color map.   i need to be able to hover over the plane and determine what amplitude value triggered the color displayed at that position. dont think this can be done using a bitmap.

[Biz]

Here is something else I tried that works but performance is so slow it is not acceptable.

numTraces=100;

numZ=500;

var zz = 0;
            for (i = 0; i < numTraces; i++) {
                zz = 0;
                for (z = 0; z < numZ; z++) {

                    var amplitude = response.Traces.Values[z];
                    //if (z < 1400)
                    //    continue;
                    var square = BABYLON.Mesh.CreatePlane("square", .1, scene);

                    square.position = new BABYLON.Vector3(i * .1, zz * .1, 0);
                    zz++;

                    //square.material = setMaterial(amplitude);
                    square.material = redWireframeMaterial;

                }
            }

[JohnK]

Have a look at ground from height map  this could be one way that might be of use.

And do a search for terrain in this forum some of the ideas overlap. Instead of randomising to generate a terrain use your data.

[dbawel]

It appears your calculations are destroying your cache at the proportions you're implying - all browser related. Simply add in a cam min and cam max distance to avoid firing too many rays for rendering, and you should be able to accomplish the scene. Just a thought...

DB

[Biz]

dbawel,

thanks.  i am using an arcRotateCamera so i set the upper and lower radius limit both to 30.  some improvement but still pretty slow (plus no zoom in and out).

Will have a look at ground from height map.

[Biz]

John, dbawel,

Thanks for you help.  I have a lot to learn but am much closer now.  Creating a ground mesh from height map seems to do the trick.  The mesh I get is 500x1000 is the performance is great.  Do not understand why the mesh I created 100x100 is so slow but I think I can work with the ground mesh.

 

[fenomas]

You're just trying to render 3D data as a 2D plane of colors, right? Not as a 3D volume?

If so the most performant way would presumably be to bake the colors into a 500x1000 texture (using Canvas, or manually if you like), and render that texture on a single plane that's been scaled up to 500x1000. Reading back the value on mouseOver can be done by using Babylon's pick function, which can tell you the UV coordinates where a mesh was struck, and looking up that UV value in the plane of values used to make the texture.

As for why your 100x100 version didn't work, it sounds like you were creating 10,000 separate meshes, which is a lot (and 9999 more than it sounds like you need  )

[Biz]

fenomas,

thanks for the advice.  I have written a test and show the code and results below.  

Some questions if you do not mind.

why does the chessboard not take up the entire canvas?

how do the bu, bv values relate to the x,y i used to build the chessboard?

 

 

 

 

function TEST() {
            //alert("TEST ");
            var w = 80;
            var h = 80;
            var x = 0;
            var y = 0;
            var dynTex = new BABYLON.DynamicTexture("dyntex", {width:w, height:h}, scene, true);
            var texCon = dynTex.getContext();
            for (var row = 0; row < 8; row++) {
                y = 0;
                for (var column = 0; column < 8; column++) {
                    if (row % 2 == 0) {
                        if (column % 2 == 0) {
                            texCon.fillStyle = "red";
                        }
                        else {
                            texCon.fillStyle = "white";
                        }
                    }
                    else {
                        if (column % 2 == 0) {
                            texCon.fillStyle = "white";
                        }
                        else {
                            texCon.fillStyle = "red";
                        }
                    }

                    texCon.fillRect(x, y, 10, 10);
                    y += 10;
                }
                x += 10;
            }
            
            dynTex.update();
            var square = BABYLON.MeshBuilder.CreatePlane("square", 1, scene);
            square.scaling.x = w;
            square.scaling.y = h;
            square.position.x = 0;
            square.position.y = 0;
            var seisMaterial = new BABYLON.StandardMaterial("seismic", scene);
            seisMaterial.diffuseTexture = dynTex;
            square.material = seisMaterial;
            
            square.actionManager = new BABYLON.ActionManager(scene);
            square.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPickTrigger, function (alertMe) {
                var pickResult = scene.pick(scene.pointerX, scene.pointerY);
                alert('bu='+pickResult.bu + ' bv='+pickResult.bv);

            }));
        }

[fenomas]

9 minutes ago, Biz said:

why does the chessboard not take up the entire canvas?

how do the bu, bv values relate to the x,y i used to build the chessboard?

1. My guess is that it has to do with BJS using power-of-two sizes internally - try making the canvas 128x128, or 256x256?

2. UV coords map to the texture - one corner of the texture is 0,0, the other is 1,1. Just scale them up by whatever you need.

[Nabroski]

why you dont using a scale ratio e.g 1:100, works since ~800years, webgl should handle it without exception. i image i open a webpage and wait for 3hours til a large cube appears on my screen. ...
https://en.wikipedia.org/wiki/Scale_(map)
 

[Biz]

Thanks to everyone on this thread for your help.  I have something I can work with now.  Needs some work but the basics are there.