Using Skybox takes time to display. Is it a usage problem?

[cx20]

I am using Skybox in the sample below. However, it takes a considerable time to display it compared to without using Skybox. It is 4 to 5 seconds to experience.

I tried it in the following two environments, but both are felt late. 

PC1: ThinkPad X260 + Windows 10 Version 1709 (OS Biuld 16299.371) + Intel(R) HD Graphics 520 

PC2: Desktop PC + Windows 10 Version 1803 (OS Build 17133.73) + NVIDIA GeForce GTX 660

Is the usage incorrect? I will be saved if you give me advice.

https://cx20.github.io/gltf-test/examples/babylonjs/index.html?model=Duck&scale=1

// Skybox
var cubeTexture = new BABYLON.CubeTexture(
    "../../textures/cube/skybox/",
    scene,
    ["px.jpg", "py.jpg", "pz.jpg", "nx.jpg", "ny.jpg", "nz.jpg"]
    );
scene.createDefaultSkybox(cubeTexture, true, 10000);

It seems it takes 4 to 5 seconds to display irrespective of cache with or without cache.

BTW, The following is a sample of Three.js. I am using Skybox, but it takes less than 1 second to display.

https://cx20.github.io/gltf-test/examples/threejs/index.html?model=Duck&scale=1

Edited April 12, 2018 by cx20
Corrected the mistake and add supplementary matter.

[Dad72]

Did you try like this:

this.skybox = BABYLON.Mesh.CreateBox("skyBox", 1000, scene);
this.skybox.isPickable = false;
this.skyboxMaterial = new BABYLON.StandardMaterial("skyBoxMaterial", scene);
this.skyboxMaterial.backFaceCulling = false;
this.skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("data/TropicalSunnyDay", scene);
this.skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
this.skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
this.skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
this.skyboxMaterial.disableLighting = true;
this.skybox.material = this.skyboxMaterial;

 

[aWeirdo]

@cx20 
It doesn't seem to be a loading (network) issue, but script execution.

You can try without PBR (is it really needed anyway  ?)

scene.createDefaultSkybox(cubeTexture, false, 10000);

 

[cx20]

@Dad72 I tried the advice you got and confirmed that it will speed up

@aWeirdo I tried with the second argument of createDefaultSkybox() set to false. However, it seems that the display speed hardly changes.

When I tried variously, I confirmed that it will be delayed when setting environmentTexture. I could not understand why it would happen

BTW, since I want to test the glTF model of PBR, I would like to activate PBR

 

[Guest]

As soon as you set a skybox with createDefaultSkybox, you are enabling the environment texture for all PBR material.

This will force the engine to compute spherical harmonics for it (and it is a long process but hopefully we will soon be able to have them stored in gltf with KHR_Env;)) in order to produce correct IBL settings

If you do not want this lag, call the code provided by Dad (I will add a new parameter in the createDefaultSkybox to avoid setting up the env texture as well :))

 

Note: you can avoid checking the manifest with with engine.enableOfflineSupport = false

[cx20]

@Deltakosh 

Does it mean that it takes time to be displayed because the spherical harmonics calculation is done when environment texture is set?

If so, is it because the spherical harmonics function is not calculated because the display of the next sample is fast? In the sample below Babylon.js v3.0 seems to be used.

https://sbtron.github.io/BabylonJS-glTFLoader/?model=Hourglass

 

Quote

Note: you can avoid checking the manifest with with engine.enableOfflineSupport = false

Thank you for the good information. I would like to add this setting to the sample.

[bghgary]

@cx20 The fastest way to get an environment texture loaded is to precompute the environment texture into a DDS using IBLBaker. The instructions for this are here:

http://doc.babylonjs.com/how_to/physically_based_rendering#creating-a-dds-environment-file-from-an-hdr-image

Here is a playground that creates a skybox and loads a glTF: https://www.babylonjs-playground.com/#2IK4U7#1

[MackeyK24]

I get a similar issue when using a PBRMaterial to render a Six-Sided Cube Texture with 2048 images, it takes almost 30 seconds.

If I use StandardMaterial it loads instantly.

Note, this is WITHOUT seeing scene.environmentTexture. Just simply switching the material on the skybox mesh from StandardMaterial To PBRMaterial.

Anybody know whats the deal when using skybox with par and it taking a really long time to load the scene ???

 

[Guest]

This is what I just mentioned. If you use createDefaultSkybox it will set the environment texture for you. Then any PBR object will try to use it for its reflection texture and then it will force the computation of harmonics.

The best options is obviously the one mentioned by @bghgary

But you can also now set the 4th parameter of createDefaultSkyBox to false

[MackeyK24]

Yo @Deltakosh was that last response for me ???

If so... I am not using ANY scene.environmentTexture and I am not calling createDefaultSkybox... and I am not using any HDR

I am simply serializing a CUBE mesh with a PBR material assigned to it using regular png images files as the six sided cube texture.

 

  "materials": [
    {
      "customType": "BABYLON.PBRMaterial",
      "directIntensity": 1.0,
      "emissiveIntensity": 0.5,
      "environmentIntensity": 1.0,
      "specularIntensity": 0.5,
      "cameraExposure": 1.0,
      "cameraContrast": 1.0,
      "microSurface": 1.0,
      "albedoTexture": null,
      "ambientTexture": null,
      "opacityTexture": null,
      "reflectionTexture": {
        "customType": "BABYLON.CubeTexture",
        "filtered": true,
        "boundingBoxSize": null,
        "boundingBoxPosition": null,
        "name": "TestAnim_Skybox",
        "level": 1.0,
        "hasAlpha": false,
        "getAlphaFromRGB": false,
        "coordinatesMode": 5,
        "isCube": true,
        "uOffset": 0.0,
        "vOffset": 0.0,
        "uScale": 1.0,
        "vScale": 1.0,
        "uAng": 0.0,
        "vAng": 0.0,
        "wAng": 0.0,
        "wrapU": 1,
        "wrapV": 1,
        "coordinatesIndex": 0,
        "isRenderTarget": false,
        "renderTargetSize": 0,
        "mirrorPlane": null,
        "renderList": null,
        "animations": null,
        "extensions": [
          "_px.png",
          "_py.png",
          "_pz.png",
          "_nx.png",
          "_ny.png",
          "_nz.png"
        ],
        "samplingMode": 3,
        "noMipmap": false
      },
      "emissiveTexture": null,
      "reflectivityTexture": null,
      "bumpTexture": null,
      "lightmapTexture": null,
      "metallicTexture": null,
      "useLightmapAsShadowmap": false,
      "refractionTexture": null,
      "ambient": [
        0.0,
        0.0,
        0.0,
        1.0
      ],
      "albedo": [
        1.0,
        1.0,
        1.0,
        1.0
      ],
      "reflectivity": [
        1.0,
        1.0,
        1.0,
        1.0
      ],
      "reflection": [
        1.0,
        1.0,
        1.0,
        1.0
      ],
      "emissive": [
        0.0,
        0.0,
        0.0,
        1.0
      ],
      "roughness": null,
      "metallic": null,
      "useAmbientOcclusionFromMetallicTextureRed": false,
      "linkRefractionWithTransparency": false,
      "useRoughnessFromMetallicTextureAlpha": false,
      "useRoughnessFromMetallicTextureGreen": true,
      "useMetallnessFromMetallicTextureBlue": true,
      "useAlphaFromAlbedoTexture": false,
      "useEmissiveAsIllumination": false,
      "useMicroSurfaceFromReflectivityMapAlpha": false,
      "useAutoMicroSurfaceFromReflectivityMap": false,
      "useSpecularOverAlpha": false,
      "useRadianceOverAlpha": false,
      "usePhysicalLightFalloff": false,
      "indexOfRefraction": 0.66,
      "invertRefractionY": false,
      "emissiveFresnelParameters": null,
      "opacityFresnelParameters": null,
      "disableLighting": true,
      "twoSidedLighting": false,
      "maxSimultaneousLights": 4,
      "sideOrientation": 1,
      "alphaCutoff": 0.4,
      "transparencyMode": null,
      "name": "sceneSkyboxMaterial",
      "id": "03e374bc-eaa1-4465-b935-10f2f3940a75",
      "backFaceCulling": false,
      "wireframe": false,
      "alpha": 1.0,
      "alphaMode": 2
    },

 

Any ideals here

 

 

[Guest]

You have a reflectionTexture in a PBR material so harmonics have to be computed.

To avoid computing them at runtime check  @bghgary answer

[MackeyK24]

But im using png files as six sided skybox ... so are you saying those too would have get converted to six dds files

Or

Should i just use standard material for skybox...

What is the advantage of using PBR Material for skybox mesh

[MackeyK24]

When I load a dds from the exporter. I serialize the dds file as a CubeTexture. So I guess usage would be more like this:

pbr.environmentTexture = new BABYLON.CubeTexture("textures/TropicalSunnyDay.dds", scene);

is that IN ANY WAY LESS THAN

pbr.environmentTexture = BABYLON.CubeTexture.CreateFromPrefilteredData("/textures/environment.dds", scene);

Do you LOOSE anything by serializing a .dds as a CubeTexture rather than using actual runtime code BABYLON.CubeTexture.CreateFromPrefilteredData

Yo @Deltakosh

I guess I answered my question, YES, YOU NEED The PREFILTERED OPTION on Construction

UPDATE: I added a PR to add support for CubeTexture.Parse to support parsedTexture.prefiltered. That should give the SAME EXACTE results as calling BABYLON.CubeTexture.CreateFromPrefilteredData("texture.dds")

[cx20]

@bghgary I understood that using the DDS file will make loading of the environment map faster.

However, since I do not have enough knowledge about DDS files, I would like to investigate a bit.

[MackeyK24]

Holy Crap... this works REALLY good... Really fast.. Both CPU and GPU... Can bake Skybox dds with 1 mipmap and bake radiance for reflections with how ever mips...I think it defaults to 8 but you can change that in export... And it works both MAC and WINDOWS...

https://github.com/dariomanesku/cmftStudio

 

 

[MackeyK24]

On 4/13/2018 at 8:52 AM, bghgary said:

@cx20 The fastest way to get an environment texture loaded is to precompute the environment texture into a DDS using IBLBaker. The instructions for this are here:

http://doc.babylonjs.com/how_to/physically_based_rendering#creating-a-dds-environment-file-from-an-hdr-image

Here is a playground that creates a skybox and loads a glTF: https://www.babylonjs-playground.com/#2IK4U7#1

Yo @bghgary ... Do you know why the IBLBaker justs opens a command prompt window for a split second then immediately closes...

I am using Windows 8.

I am trying to see if cmftStudio handles what IBLBaker does... But have NEVER been able to get IBL Baker to even open.... I also tried a BootCamp Partition and loaded Windows 10...

Still cant run IBLBaker... That is why i am looking at getting cmftStudio to work as another cubemap tool. Plus it works on mac too

 

[bghgary]

16 hours ago, MackeyK24 said:

command prompt window for a split second then immediately closes

@MackeyK24 Make sure the vc_redist (vc_redist.x64_msvc2015.exe) is installed. Are you running a 32-bit OS by any chance? If it's none of these, your best bet is to run the debug version (IBLBakerd.exe) and see if it outputs something useful. All else fails, need to debug it with a native debugger (like Visual Studio).