AssetManager & sceneOptimizer contribution

[GameMonetize]

Thanks a lot Pierre and no rush!

[Pierre Glibert]

Hi @Deltakosh ,

Here we go ! The new GradingSceneOptimizer alpha version is here :

1. Demo : https://playground.babylonjs.com/#9IXPB8#7 ( Open console to see what it append )
2. Doc : https://github.com/pierreglibert/Extensions/tree/master/gradingSceneOptimizer ( Read it to know more about it )

 

Some BAAAD tricks I did for the alpha version  :

1. Particles :

I added "originalEmitRate" property on the particle system to keep the original emit rate. 

https://github.com/pierreglibert/Extensions/blob/master/gradingSceneOptimizer/ts/gradingSceneOptimizer.ts#L324

Do you think it's possible to add it ?

 

2. Textures & RenderTargetTextures :

You said me that about "CreateResizedCopy" : "scale is a destructive operation. It will rescale the container by creating a new one".

So, I added "originalTexture" property on texture to keep the original texture in memory.

https://github.com/pierreglibert/Extensions/blob/master/gradingSceneOptimizer/ts/gradingSceneOptimizer.ts#L598

For example, whit it, it's possible to do that : scale texture from 1024px to 256px for a low grade and resize it to original (1024) for the best quality grade without reload.

Do you think it's possible to integrate it ? Or is it a bad idea for memory reason ?

The other solution, it's to reload texture if we need to enlarge it ... But we need to wait the reload.

 

Wrong shadows  :

Sometimes there is blur, sometimes not  : https://playground.babylonjs.com/#9IXPB8#7

https://github.com/pierreglibert/Extensions/blob/master/gradingSceneOptimizer/ts/gradingSceneOptimizer.ts#L352

 

What do you think about GradingSceneOptimizer ?

We will talk about performance later

 

Thanks in advance for your time

Pierre.

[GameMonetize]

Hey!

1. This makes hardly sense in the ParticleSystem itself. Why not saving it locally in the optimizer? Same for point 2 actually

2. Clearly not a good idea because of the immense amount of memory required

 

 

I really like the optimizer. We can leverage it with another idea: setting the engine.setHardwareScalingLevel() to a better value (like 0.5) when we can

Ping @Sebavan and @davrousas we chatted about it recently

 

just a question though: I'm not sure we need addUI. This could be done by the inspector I guess.

 

 

So this is really good. Let's fix the last detail and I will move it into the core

[Sebavan]

Nicccceeeee !

Yup, the hardware scaling level would be an amazing trick to put in as it can be really tricky to set depending on the target device.

[Pierre Glibert]

Hi @Deltakosh & @Sebavan 

Thanks for your reply. I'm happy you like it

I'm ok for the point 1 & 2 and I will correct this.

 

1. setHardwareScalingLevel :

for the "engine.setHardwareScalingLevel()", you can already specify it in grade parameter > renderSize > devicePixelRatio :

doc : https://github.com/pierreglibert/Extensions/tree/master/gradingSceneOptimizer#custom-optimization-parameters-

parameter : https://github.com/pierreglibert/Extensions/blob/master/gradingSceneOptimizer/ts/gradingSceneOptimizer.ts#L227

function : https://github.com/pierreglibert/Extensions/blob/master/gradingSceneOptimizer/ts/gradingSceneOptimizer.ts#L386

But in my case, I put 2 and you 0.5 for the high density pixel devices ... Do you prefer 0.5 ? I can change it if you want 

Also, if you prefer "HardwareScaling" than "devicePixelRatio" or "devicePixelDensity" ... say me

 

2. addUI :

I will remove it. It was for the demo.

 

PS : Like I said in a previous post, I'm working on a bigger 3D project. That will be a really good opportunity to test it in depth before move it into the core 

 

[Sebavan]

Sounds good to me as it can do it dynamically :-)

[GameMonetize]

This is cool

please send a PR then  (Hardwarescaling is consistent with the API naming)

[Pierre Glibert]

Hello community .

I give you some news about the new optimizer :

# Benchmark scene  : https://github.com/pierreglibert/Extensions/tree/master/gradingSceneOptimizer#benchmark-score-cpu-and-gpu-recommended-features-

# Roadmap : https://github.com/pierreglibert/Extensions/tree/master/gradingSceneOptimizer#roadmap-

 

Have a nice day

[Pierre Glibert]

Hi @Deltakosh

Some questions :

1. About particules

Is there a way to redraw directly particules when we decrease the "emitrate" ?

At the moment, the engine wait the dead of particule to dispose it.

But, for performance reason, we need to redraw instantaneous to get directly more fps on optimizer.

Is it possible ? 

 

2. About textures

I try to create a system to reload textures with different size based on url.

The problem is that the url can be a blob ( like when you load an GLTF, all textures url become a blob).

So, the true asset url is lost ... I can't reload it on the fly to increase the size.

Is it a way to capture the true url or to keep it on texture class ?

 

3. About material

I want to create a function to switch from pbr to standard material.

does it already exist ? If not, I will create it.

 

Have a nice day,

Pierre.

 

ps : I saw gpuParticleSystem in source code. Is it new ?

[Guest]

(gpuParticles is the new feature I try to work on :))

1. This is not supported but I'm not opposed to add an option for that

2. When a texture is loaded from a Blob, the internal texture will keep the buffer data and you can call internalTexture._rebuild() to recreate the content. (Not sure if this is what you want though)

3. This is a risky one  They are not really compatible per se. Furthermore, what could be the use case?

[Pierre Glibert]

hey @Deltakosh ! Thanks for your answer

 

1. 

That will be good to add a function to do that like :

// stop and reset particles system
particlesSys.reset();

// restart particles system
particlesSys.start();

Is it easy to do ?

 

2.

Suppose that we have 3 grades for textures : LOW(128px), MIDDLE(512px) and HIGH(1024px). 

If optimizer start with LOW and upgrade to HIGH, I need to dispose the LOW texture and load the HIGH textures.

But with blob url, it's impossible.

In other way, I can't keep the bigger texture in blob to resize it when I want for memory reason.

Perhaps can we add a property like "assetOriginUrl" ?

 

ps :

I do that because I want to introduce a smart loading asset based on grade/distance.

For exemple, in LOW grade, you just need the essentials assets to get more performance and a fast loading.

If the optimizer upgrade to MEDIUM, it load the asset for this grade, etc ...

I think that it's important because we are on web. We need an optimizer for fps and also for time loading.

 

3.

It was just an idea to see if I can improve performance when I disable reflexion and refraction channels (so all pbr material).

Because, my meshes become black if I disable it. 

 

What do you think about all points ?

[Guest]

1. Will be in next commit

2. When I receive a blob I have no way to know the original url

3. PBR takes the main source of lighting from reflection so you cannot cut it

[Pierre Glibert]

1. #superman 

2. Yes of course, but is it babylon that creates the blob ? if yes, we can save the asset url before ...

3. ok.

[Guest]

2. Yes true. Is it the case in your case? Can you point me where in the code it is happening?

[Pierre Glibert]

Yes, I find it here https://github.com/BabylonJS/Babylon.js/blob/master/loaders/src/glTF/2.0/babylon.glTFLoader.ts#L1344

I searched too on "Babylon.js/src/Loading/" but there is no Blob call.

In fact, I see this "blob problem" while I tested gltf...

So... hello again @bghgary

On 05/02/2018 at 4:26 PM, Pierre Glibert said:

2. About textures

I try to create a system to reload textures with different size based on url.

The problem is that the url can be a blob ( like when you load an GLTF, all textures url become a blob).

So, the true asset url is lost ... I can't reload it on the fly to increase the size.

Is it a way to capture the true url or to keep it on texture class ?

Can you help me ? Why do you use blob ?

[bghgary]

@Pierre Glibert Blob is used in glTF loader to support onProgress callbacks. My understanding is that progress is not reported when using URLs directly.

[Pierre Glibert]

@bghgary did you try this ? 

    var xobj = new XMLHttpRequest(),
        percentage;
        
    xobj.open('GET', yourUrl, true);

    // progress
    xobj.onprogress = (e) => {

      // to get %
      percentage = Math.round((e.loaded / e.total) * 100);

      onProgressCallback(e);
    };

    xobj.onreadystatechange = function () {

      // loaded
      if (xobj.readyState === 4 && xobj.status === 200) {
          onLoadedCallback();
      }
      // error
      else if (xobj.status === 404) {
          onErrorCallback();
        
      }
      // onAbort
      else if (xobj.status === 0) {
          onAbortCallback();
      }

    };

    xobj.send(null);

 

Like the first post of this topic, you will see that we need to add the code above for loading function and assetmanager in Babylon.

Did you use loading system of babylon ?

[bghgary]

@Pierre Glibert The loader is calling BABYLON.Tools.LoadFile which does effectively what you described. From there, it creates an object URL with a Blob of the returned data in order to pass the data to a BABYLON.Texture object.

[bghgary]

Maybe what we can do is change the Texture class to add a flag to do this work inside the object and report progress, then the Texture object will have the correct url.

[Pierre Glibert]

ok I see ... Can you send me the line where the blob is created ?

[bghgary]

https://github.com/BabylonJS/Babylon.js/blob/master/loaders/src/glTF/2.0/babylon.glTFLoader.ts#L1344

[efxlab]

On 05/02/2018 at 4:26 PM, Pierre Glibert said:

2. About textures

I try to create a system to reload textures with different size based on url.

The problem is that the url can be a blob ( like when you load an GLTF, all textures url become a blob).

So, the true asset url is lost ... I can't reload it on the fly to increase the size.

Is it a way to capture the true url or to keep it on texture class ?

Same issue there using GLTF format. Maybe we can create a texture in fly and assign the new one to material ?

[Pierre Glibert]

Hi @Deltakosh & @bghgary

I have one last question about the URL issue :

What's the difference between .babylon and .gltf loader about texture and blob url ?

Because, when I load a .babylon, I have the right url of the asset but not with a gltf ...

 

I see that .babylon loader use engine.createTexture() : https://github.com/BabylonJS/Babylon.js/blob/master/src/Engine/babylon.engine.ts#L3133 then tools.loadImage() https://github.com/BabylonJS/Babylon.js/blob/master/src/Tools/babylon.tools.ts#L485

It return an internalTexture.

 

For .gltf loader, you use your own image loader : https://github.com/BabylonJS/Babylon.js/blob/master/loaders/src/glTF/2.0/babylon.glTFLoader.ts#L1329

 

14 hours ago, bghgary said:

Maybe what we can do is change the Texture class to add a flag to do this work inside the object and report progress, then the Texture object will have the correct url.

So, if I understand you don't use engine.createTexture() because "onProgess" not exist on the returned internalTexture... 

That's why you created your own image loader ?

If it's that, like you said, we need to add some observable on internalTexture : onProgess, onAborted, ...

 

I think that it would be good to use same method for all loader ...

What do you think ? 

 

@efxlab We need the right url to do that ... We will fixe this

 

Have a nice day

 

PS : @Deltakosh The reset function for particle work fine ! thanks

[efxlab]

hey @Pierre Glibert why : scene.meshe.material.diffuseTexture = new BABYLON.Texture(texture, scene); won't work on glTF loader ?

[Pierre Glibert]

@efxlab What do you try to do ? Can you create a playground ?

http://www.babylonjs-playground.com/