Error: Cannot load cubemap because 6 files were not defined

igorroman777 · October 27, 2021, 8:35pm

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

PirateJC · October 27, 2021, 9:00pm

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:

sebavan · October 27, 2021, 9:03pm

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

Let s see if @RaananW has any other thoughts.

igorroman777 · October 28, 2021, 7:22am

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

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

RaananW · October 28, 2021, 9:05am

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.

igorroman777 · October 28, 2021, 11:05am

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.

RaananW · October 28, 2021, 12:15pm

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.

bghgary · October 28, 2021, 8:46pm

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 });

igorroman777 · October 30, 2021, 6:14pm

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);

igorroman777 · October 30, 2021, 7:24pm

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

bghgary · October 30, 2021, 10:30pm

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

igorroman777 · October 31, 2021, 7:20am

@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;

bghgary · November 1, 2021, 5:15pm

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.

igorroman777 · November 1, 2021, 5:35pm

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]);

bghgary · November 1, 2021, 7:00pm

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

Let me try Babylon React Native.

bghgary · November 1, 2021, 7:01pm

Are you sure the camera is pointing at the object?

igorroman777 · November 1, 2021, 9:20pm

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!);

bghgary · November 2, 2021, 12:42am

igorroman777:

  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 });

}}

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

igorroman777 · November 2, 2021, 8:32am

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 });
    });
  }

bghgary · November 2, 2021, 4:23pm

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?

Topic		Replies	Views
[React Native] engine.createRenderTargetCube - undefined is not an object (evaluating gl.TEXTURE_CUBE_MAP) Bugs react , babylon-native , render-target , ios	10	1201	August 11, 2023
Unable to load mesh Questions	4	383	March 23, 2023
Using BabylonJS with React Native Questions documentation , react	5	2054	June 20, 2019
importMesh of undefined from undefined version: undefined, exporter version: undefinedimportMesh has failed JSON parse Questions	2	3682	October 31, 2022
A strange one with BABYLON.CubeTexture Bugs material	1	543	July 1, 2019

Error: Cannot load cubemap because 6 files were not defined

Related topics