Merging polygons with dynamic textures

[Mrso92 0]

Hello to all of you. 

First of all I want to explain what I do. 

I am building location by passing Vertexes and name of the location(PolygonMeshBuilder for location and material for it). Then I add this specific location into array, remove it from the scene at end and shortly afterwards I merge it. With them I do not have any problems whatsoever.

However I do have horrendous performance issues with  location names. Here I am using the following steps:

-new DynamicTexture  => drawText on it =>new StandardTexture=> diffuseTexture and opacityTexture taking previously created dynamicTexture. Shortly afterwards I apply it to a new PolygonMeshBuilder method that again takes objects. 

I was hoping that I will mitigate it too by merging meshes but I was wrong. The same number is replicated all over again in various axes. 

Where is my probable mistake?

Thanks

[JohnK 991]

Hi and welcome to the forum. It would be very helpful if you could produce a simple playground to show the problem.

[Mrso92 0]

Thank you very much. I will try to put up something afterwards but this is how it rolls generally:

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

// Ver=[{X:sth;Y:sth;Z:sth;}

       designName(location);

}

function designName(location)

{ 

let text = new BABYLON.DynamicTexture("top", { width: 256, height: 256, invertY: true }, this.scene, true);

text.hasAlpha = true;

text.drawText(location.Description, 50, 100, "bold 50px Arial", BABYLON.Color3.Black().toHexString(), "transparent");

 

let mText = new BABYLON.StandardMaterial("", this.scene);

mText.diffuseTexture = text;

mText.opacityTexture = text;

mText.useAlphaFromDiffuseTexture = true;

 

let name = new BABYLON.PolygonMeshBuilder("", location.Vertexes, this.scene).build();

name.material = mText;

name.material.freeze();

locationsNames.push(name);

if (optimizationOn)

{

this.scene.removeMesh(nome);

}

}

if (locations.length !== 0) {

BABYLON.Mesh.MergeMeshes(locationsNames, true, true);

}

 

 

 

[JohnK 991]

Ciao, lei è italiano? Imparo l'italiano ma conosco molto poco

Are you trying to do something similar to this?

If not please make a picture to show what you want.

Note a merged mesh does not merge materials. When you merge meshes the material for the merged mesh is the material of the first mesh.

If you want to group the meshes together so that they move as one then use transformNode as a parent

[Mrso92 0]

Thanks for your prompt reply and idea, I was not aware of that fact, I know realize where my problem lies. Nope it is just related to the fact that I got tons of same text all over again due to fact that you outlined(look at the image). 

I tried to quickly change the name of the variables in English and result was pretty hilarious.

Non sono Italiano, vivo in Italia(sono Serbo). Anch'io non sono molto bravo(pensavo se siamo allo stesso livello) ma si impara con tempo, in realtà è davvero facile. Se serve a Lei ho tanti "materiali" in Inglese per imparare, posso inviarli in DM. 

 

EDIT: 

 I've tried both with your and parent method. Parent=> createInstance =>delete sort of worked but again I get bad FPS.  

[JohnK 991]

A picture showing what you want to achieve or better still a playground would help us help you.

[Mrso92 0]

Thanks for your kind response. It is a bit difficult to replicate the playground. There's a picture that has been attached. Essentially my problem is that I cannot merge all these different letters like you've already said  the material for the merged mesh is the material of the first mesh. Hence I get replicated R1ones all over the place. 

[JohnK 991]

The following playgrounds are an attempt to produce a lot of labels with different text on with a fast fps. To do this I used the solid particle system for #1 and #2 using a dynamicTexture and for #3 an external image.

In both #1 and #2 I created a dynamic texture and used a loop to fill it with numbers, each number being in a cell of the same size. I then created a plane in proportion to the cell size, built an SPS where each particle is a copy of this plane. By adjusting the particle uvs by mapping the index of the  particle to its position on the dynamicTexture I created labels for each number. PG #1 show these particles arranged in order. PG #2 shows that you can position each label (particle) as you want.

However increasing the numbers by using even 30 * 30 seemed to slow down the production of the dynamicTexture too much. So using Excel I created an image of 44 * 44 numbers (obtaining its width and height from checking the image properties) and used this to create an SPS of 1916 labels in PG #3. You can see that the fps is quite good. Because of the quick way I obtained the image I was not able to use one with a transparent background but this should be possible. Hope that this technique can be used to produce what you need.

https://www.babylonjs-playground.com/#6WSFI8#1

https://www.babylonjs-playground.com/#6WSFI8#2

https://www.babylonjs-playground.com/#6WSFI8#3

[Mrso92 0]

I have tried to apply some suggestions and I have looked a bit into the official guide and there it says that if I am building immutable things(which I am) I should stop after SPS.buildMesh. 

But at the end all I get is flickering texture.

https://playground.babylonjs.com/#LE1BSK#13

I am probably missing something..

Thanks

[JohnK 991]

Still want to solve the flickering without re-positioning. Until a couple of days ago I thought it was the only solution then I came across multi-scenes  so tried this as a solution https://playground.babylonjs.com/#LE1BSK#14 which seems to be a possible solution.

Also came across this thread

which might or might not offer you a solution.

[Mrso92 0]

That problem does not bother me that much anymore, I have resolved it within the acceptable limits although I will try this method thank you very much. The problem I am having right now is performance related. Essentially I have some problems with understanding of how SPS works. 

I want to achieve the following results (https://playground.babylonjs.com/#LE1BSK#9)where all locations and names meshes are within the SPS mesh. Here I tried to resolve the problem using your methods but I fail:

https://playground.babylonjs.com/#LE1BSK%2313

I would be really grateful for any help because by using the merge mesh method I have long load times(with lots of locations) and that is quite an irritating.

Thanks again John

 

P.S I have tried the new solution and it resolved flickering . Thank you very much for finding it.

[JohnK 991]

Will help with SPS when I am a bit clearer on why you want a multitude of labels. In your PGs they are just put together as one large rectangle. At some point will you want them to separate? That cannot be true as you are merging them. Do you just want a way of writing a range of text on a dynamicTexture?

Here is a way to write labels with dynamicTexture https://playground.babylonjs.com/#3M37JC#3

Also GUI might be another possibility, check out @Wingnut's solutions in this thread

[Mrso92 0]

I will try to be more precise this time. From the server I always get this Location object from server through which I iterate and merge all of them in order to achieve better performance. The problem occurs when there are many locations and obviously they increase (they are all purged and then "re- rendered" on each reload). Each location should have this Descrizione property value in the form of mesh "nome"(it is not just R1, it may include additional text) directly  embedded on this large rectangle respecting its borders. 

Hence location rectangle should contain this text description, I can't put them into one large plane because of the vertices and their boundaries that I have to respect.

I will try to look at the suggestion but for the moment being I just want to have locations in the SPS, maybe I could solve name when that part becomes a bit clearer.

Thanks

P.S

I will try to use multi materials to set nome texture for locations mesh.

[JohnK 991]

OK not there yet, lot of work to do on sizing  and positioning and I have simplified and removed the grid but hopefully getting close to what you need and something for you to work with

https://playground.babylonjs.com/#LE1BSK#15

[Mrso92 0]

Thank you very much. I hope I will get it running by  the end of the night!!

[Mrso92 0]

Essentially out of the box already everything is working(I just removed unnecessary positioning) but I think that I may have pushed the system to its boundaries...

I got this dreadful black texture all over the place once I get over the certain number of location. You can see the code in the attachment just paste it in the playground(I can't save it it is too big). Locations are already set in the right order but there is this issue.. I have tried all sort of things but none is functioning(I also could not find anyone with my problem). 

Thanks again for this

playground.html

[JohnK 991]

The issue is that the width of the dynamicTexture is too big. If you reduce the fontsize to 12

let fontsize = "12";

then you will get the labels.

[EDIT just found this that you could use to get more accurate positioning when placing text https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/measureText]

var expWidth = Math.ceil(Math.log10(totalWidth)/Math.log10(2));
var expLatitude = Math.ceil(Math.log10(totalAltitude/Math.log10(2)));
var expHeight = Math.ceil(Math.log10(fontsize)/Math.log10(2))
width = Math.pow(2, expWidth);
height = Math.pow(2, expHeight);
altezza = Math.pow(2, expLatitude);

The reason for setting the width and height as a power of 2 is because the dynamicTexture sets the width and height to powers of 2 since you have generateMinMaps set to true (variable after scene)

http://doc.babylonjs.com/api/classes/babylon.dynamictexture#constructor

and the only way to make sure you position the text correctly on the dynamicTexture and relate to the uv values is to have the width and height you set for it not to be changed by the constructor,

Eg if you set the width to 100  or to 130 with generateMinMaps = true then the actual width of the dynamicTexture will be 128. The alternative would be to read the actual width and height of the dynamicTexture after construction and change width and height to these values. Just  make sure that width and height were rounded up and not down.

Since the dynamicTexture has only two dimensions I am not sure why you need altezza to be a power of 2?

This is why I said

Quote

lot of work to do on sizing  and positioning

since changing fontsize changes sizing and proportion. You do not have to use * fontsize, you could use a fraction for some fraction so * fonsize * fraction

I placed all the text on one row of the dynamicTexture since this is easiest to do. You could take the number of locations find its square root and split into rows and columns, say there were 120 locations, sqrt is 10.999, integer part is 10 so 120/10 = 12 so say 12 columns and 10 rows. For each row calculate the totalRowWidth and totalWidth would be the maximum of those. The totalHeight would be rows * fontsize. Then you can write 12 locations per row changing the  'y' value per row. This MAY stop the issue.

By the way I still do not have a direct answer to this question.

On 5/4/2018 at 2:33 PM, JohnK said:

Will help with SPS when I am a bit clearer on why you want a multitude of labels. In your PGs they are just put together as one large rectangle. At some point will you want them to separate? That cannot be true as you are merging them. Do you just want a way of writing a range of text on a dynamicTexture?

If the answer is just a rectangle then the above method of extending the rows could mean that the dynamic texture created could just be used as the material for one plane.

[Mrso92 0]

Thank you very much and sorry for not answering,  I am a bit busy this week. Will update you asap about results. 

[Mrso92 0]

I was looking for something to improve a look and help me orientate more precisely  within the system so I have tried to add an hole to the locations(transparent). Something like this:

 

I was wondering whether or not there is some method to this within one dynamic material or I need to create an two types of materials standard one and dynamictexture.

Thanks again