Error: Cannot load cubemap because 6 files were not defined

Questions
,
1

I have a problem.
I make my app on android and babylon.js react native:

    "@babylonjs/core": "5.0.0-alpha.57",
    "@babylonjs/loaders": "5.0.0-alpha.57",
    "@babylonjs/react-native": "0.4.0-alpha.39",
    "@expo/vector-icons": "12.0.5",

I import glb-fie with PBRMatarial for Reflections. This Reflections works well in sandbox.

But in the app Reflections does not work anymore. I am trying this:

import '@babylonjs/core/Materials/Textures/Loaders/ddsTextureLoader';
import "@babylonjs/core/Meshes/meshBuilder";
import '@babylonjs/core/Materials/standardMaterial';
import "@babylonjs/loaders/glTF";
...

scene.createDefaultEnvironment();

But I get the:

 LOG  BJS - [22:24:58]: Babylon Native (v5.0.0-alpha.57) launched
 ERROR  Error: Cannot load cubemap because 6 files were not defined
2

Hey @igorroman777

It’s always most helpful if you can provide a playground for us to look at it. It is very difficult to help troubleshoot without one.

That said, please check out this thread and see if it helps:

Also this doc page should help as well as it talks about skyboxes and the 6 cube faces needed to create one:

1 Like
3

You d need to add the support for env texture and for the helper function I guess:

import '@babylonjs/core/Materials/Textures/Loaders/envTextureLoader';
import '@babylonjs/core/Helpers/sceneHelpers ';

which is strange as env loader should be imported already by sceneHelpers :slight_smile:

Let s see if @RaananW has any other thoughts.

1 Like
5

@sebavan @RaananW
unfortunately, that didn’t help. The problem has remained:

 ERROR  Error: Cannot load cubemap because 6 files were not defined
6

This specific error is only present when using the native engine. Are you using babylon native to compile your code? Sorry, should have read from the beginning - yes you are.

@bghgary - is there any reason you can see that this could happen? This error is called in createCubeTexture of the native engine if there are no files defined, but the createDefaultEnvironment should provide the file (URL) needed for it to work.

7

I have tried like this:


      // Add the environment manually, instead of createDefaultEnvironment function- use Image tag
      const envTexture = CubeTexture.CreateFromPrefilteredData('https://playground.babylonjs.com/textures/environment.dds', scene);
      envTexture.name = "envTex";
      envTexture.gammaSpace = false;
      scene.environmentTexture = envTexture;

unfortunately, that didn’t help. The problem has remained.

8

I don’t think it is your issue, I think it is more an issue with how babylon native is analyzing the file provided. But I might be wrong.
I am sure @bghgary can shed some light on that when he is available later today.

9

Unfortunately, we don’t have the code path for creating skyboxes working yet. By default, creating the environment will create a skybox. If you disable that, then it will work.

scene.createDefaultEnvironment({ createSkybox: false });
10

Yes, there is no error. But glb model is no longer shown.

And that doesn’t work for react native:

pbr.environmentTexture = BABYLON.CubeTexture.CreateFromPrefilteredData("/textures/environment.dds", scene);
pbr.metallicRoughnessTexture = new BABYLON.Texture("/textures/mr.jpg", scene);
11

@sebavan @bghgary
how to show the reflection for baybylonjs react native?

12

If you use the .env format, it should work. Other formats are not supported yet.

13

@bghgary @sebavan

The code has the same effect as createSkybox: false:
It runs without errors, but the GLB model is not shown.


      // scene.createDefaultEnvironment({ createSkybox: false });

      // // Add the environment manually, instead of createDefaultEnvironment function- use Image tag
      const envTexture = CubeTexture.CreateFromPrefilteredData('https://playground.babylonjs.com/textures/environment.env', scene);
      //const envTexture = CubeTexture.CreateFromPrefilteredData("app:///textures/environment.env", scene);
      envTexture.name = "envTex";
      envTexture.gammaSpace = false;
      scene.environmentTexture = envTexture;
14

This is working for me on Windows. Can you show more of your code or somehow give me a repro? Let me try this on Android.

15 
import { ShadowGenerator, StandardMaterial, CubicEase, EasingFunction, Animation, ScreenSpaceReflectionPostProcess } from '@babylonjs/core';
import { Texture } from '@babylonjs/core/Materials/Textures/texture';
import { CubeTexture } from '@babylonjs/core/Materials/Textures/cubeTexture';
import '@babylonjs/core/Materials/Textures/Loaders/ddsTextureLoader';
import '@babylonjs/core/Materials/Textures/Loaders/envTextureLoader';
import '@babylonjs/core/Helpers/sceneHelpers';

import "@babylonjs/core/Meshes/meshBuilder";
import '@babylonjs/core/Materials/standardMaterial';

// for compressed glb files
import '@babylonjs/loaders/glTF/2.0/Extensions/KHR_draco_mesh_compression';
import "@babylonjs/loaders/glTF";


  function importMesh(scene: Scene) {
    const modelsUrl = "app:///models/";
    const glbFile = "gallery/gallery_new2.glb";

    SceneLoader.ImportMeshAsync(null, modelsUrl, glbFile, scene).then(result => {

        scene.createDefaultEnvironment({ createSkybox: false });

}}

 useEffect(() => {
    if (engine) {
      const scene = new Scene(engine);
      setScene(scene);

      var camera = new FreeCamera("freeCamera", camStartPosition, scene);
      camera.setTarget(camTarget);
      scene.activeCamera = camera;
      setCamera(scene.activeCamera!);      
       var light = new HemisphericLight("light", new Vector3(1, 3, 1), scene);

      // Default intensity is 1. Let's dim the light a small amount
      light.intensity = Properties.scene.light.intensity
      setLight(light);

      scene.executeWhenReady(function(){
        setCameraDefault();
      });

      importMesh(scene);

    }
  }, [engine]);
16

Hmm, it’s working fine in Babylon Native directly. Android works too.

image
image1398Ă—890 67.7 KB

Let me try Babylon React Native.

17

Are you sure the camera is pointing at the object?

18

Without scene.createDefaultEnvironment({ createSkybox: false });
glb model is shown
can you show me your code?

     const camStartPosition = new Vector3(-3, 0.1, 0);
     const camTarget = new Vector3(10, 0.1, 0);

      var camera = new FreeCamera("freeCamera", camStartPosition, scene);
      camera.setTarget(camTarget);
      scene.activeCamera = camera;
      setCamera(scene.activeCamera!);
21

This code is missing a ending parenthesis for the .then continuation. Is this what is actually in your code?

22

my Code is:

function importMesh(scene: Scene) {
    const modelsUrl = "app:///models/";
    const glbFile = "gallery/gallery_new2.glb";

    SceneLoader.ImportMeshAsync(null, modelsUrl, glbFile, scene).then(result => {
      result.meshes[0].position.y = - 1.0;
      const mesh = result.meshes[0];
  
      _fetchAndScaleImages(scene, scalePicture);
      props.onSpaceDisplayed();

      scene.createDefaultEnvironment({ createSkybox: false });
    });
  }
23

Okay, I tried this in the default Playground app for BabylonReactNative on Android and added a line for the environment. Everything works fine.

      SceneLoader.ImportMeshAsync('', 'https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/BoxAnimated/glTF-Binary/BoxAnimated.glb').then(result => {
        scene.createDefaultEnvironment({createSkybox: false});
        const mesh = result.meshes[0];
        mesh.parent = transformContainer;
      });

Let’s rule out some more things. Can you try using the latest versions?

    "@babylonjs/core": "5.0.0-alpha.60",
    "@babylonjs/loaders": "5.0.0-alpha.60",
    "@babylonjs/react-native": "0.4.0-alpha.41",

If that still doesn’t work, can you provide a repo that reproduces this issue?

1 Like