GitHub globe like scene with flying lines - Windows platform fix

[roland]

Hi!

GitHub Globe like demo using GreasedLine - refresh your browser please if you visited the page before

RolandCsibrei/babylonjs-meshline/blob/v2/src/demos/flyingLines.ts

GreasedLine beta coming shortly

R.

[Evgeni_Popov]

I get an error in the console.log:

Offending line [309] in vertex code: uniform mat4 projection;
Error: VERTEX SHADER ERROR: 0:309: 'projection' : redefinition

The projection matrix is declared inside the Scene structure but it is also redeclared later on just before the attributes:

uniform Scene {
    mat4 viewProjection;
    mat4 view;
    mat4 projection;
    vec4 vEyePosition;
};
...
uniform sampler2D colors;
uniform mat4 worldViewProjection;
uniform mat4 projection;
in vec3 previous;
in vec3 next;
in float side;
in float width;
in float counters;

You should simply remove the projection uniform from your material and everything should be ok.

[roland]

Hello!

That it’s not the case on Mac. It works correctly. If I remove projection from the uniforms I get

BJS - [11:33:34]: Error: VERTEX SHADER ERROR: 0:244: ‘projection’ : undeclared identifier
ERROR: 0:247: ‘projection’ : undeclared identifier

However I can confirm that on Windows machine I got the same error as you.

A bug in BJS?

Thank you!

R.

EDIT: To get the demo quickly running I am setting projection2 instead so it works on all platforms.

[Evgeni_Popov]

This probably has something to do with WebGL1 / 2. In WebGL1, ubos are not supported, so the Scene structure won’t be defined. Using projection2 instead of projection is probably the easiest solution!

[roland]

To tell you the truth the scene looks like 100x better on the Mac’s retina display so I’m quite happy you’ve found the error so I had to start the scene on a FullHD Windows based notebook and I saw the differences. Now I can tune it a bit more to give it a more appealing look on FHD.

Thanks!

[sebavan]

This is pretty pretty pretty !!! flying lines are awesome !!! can not wait for all the mesh line greatness to come into the framework

[roland]

It’s like carying a big rock so I’d like to get rid of it ASAP and release the GreasedLine stuff. Buuuuut I have new ideas to improve it every day

Now I had an idea to make the GreasedLine class as thin as possible and move any extractable code to the GreasedLineBuilder class. For example I don’t need to support Float32Array, Float32Array[], number[], number[][], Vector3[], Vector3[][] as input for the line points in the GreasedLine class itself, I just need number[][] and provide a factory method in the builder class which we can use with any supported input type. The conversion functions are now located in the GreasedLine class but with the factory they can be removed. GreasedLine will be as thin, raw and fast as possible and the GreasedLineBuilder is offering static convenience methods to tame the raw beast

[roland]

Hey @sebavan !
Do you know the answer what technique will be faster? If not, I must write some tests…

1. Sending the colors of the line parts as texture to the shader. Everytime I need to update the colors I need create a texture from the number array of the colors.

or

2. Sending an array of floats to the shader and everytime the number of colors changes I need to rebuiild the shader because I need to change the length of the uniform array in the shader.

So basically is it faster to update the texture or to rebuild the shader and set the float array?

Thanks!

R.

[Evgeni_Popov]

Rebuilding the shader will be much slower.

But you could use a fixed length array with a max size and pass the actual size as a uniform. Using a uniform array will limit you on the number of colors you can use because the maximum size of all uniform data is fixed (and GPU dependent and not very high - a few kilobytes). So, for greater generality and if the number of colors can be high, I would choose the texture path.

@roland

Everytime I need to update the colors I need create a texture from the number array of the colors.

Instead, you should always use the same texture and update it. Recreating a new texture each time can be expensive.

[roland]

Thanks a lot for the detailed information and for the cool tip with the max size uniform arrays! I’ll stick to the texture approach.

r.

[roland]

@Evgeni_Popov

Instead, you should always use the same texture and update it. Recreating a new texture each time can be expensive.

However this one sometimes includes changing the size of the texture that’s why I need to recreate the texture (I use update when the size remains the same) but this should happen only when initliaizing the line(s) and not every frame on the render loop.

[carolhmj]

Just wanted to say this is incredibly gorgeous

[roland]

Yummmy! :-). Thanks a lot!