Error: Unsupported babylon environment map version "2"

Questions
,
1

Hello,
I’d need to export a .env file to set as environment texture.
I’m setting it with this cubeTexture instance as written in the docs:

this.scene.environmentTexture = new CubeTexture("./assets/images/configurator/environment2.env", this.scene);

And it works fine when using your example .env texture (country.env).

I tried to generate a .dds texture through this process ( Resource → BabylonJS Documentation )

  • Downloaded IBLBaker app
  • Loaded an hdr texture
  • Saved the environment

Then I followed your steps about creating a compressed environment texture using the Sandbox (Doc → Using An HDR Environment For PBR | Babylon.js Documentation )

  • Uploaded a PBR scene
  • Uploaded the generated .dds file
  • Exported the .env texture

But, when i load it i get this error (that didn’t occurred with the country.env):

Error: Unsupported babylon environment map version "2"

In fact, when I open in the text editor the .env, the first part has this infos:

{"version":2,"width":256,"imageType":"image/png","irradiance"....ecc

while the country.env one has:

{"version":1,"width":128,"irradiance"...ecc

I’ve searched for solutions but couldn’t find a way to have a final .env texture with the version 1.

Do you have some advice, by any chance?

Thank you very much in advance

2

Two solutions:

  1. (preferred) You upgrade your code to the latest preview so you benefit as well from our latest improvments.
  2. you could use the code snippet from this answer: .env conversion from .hdr throws an error - #6 by sebavan
2 Likes
3

Hello @sebavan and thank you for your fast answer.
I tried both of your solutions but encountered some problems:

  1. I’m using Angular framework with typescript. The library I had installed was this:
"@babylonjs/core": "^4.2.0",
"@babylonjs/inspector": "^4.2.0",

I updated the library to the latest alpha as you suggested:

    "@babylonjs/core": "^5.0.0-alpha.60",
    "@babylonjs/inspector": "^5.0.0-alpha.60",

but now i’m getting some blocking errors while serving the app (and probably other more once the app is served):

Schermata 2021-11-11 alle 09.50.28
Schermata 2021-11-11 alle 09.50.281836×490 62.9 KB

The following, are the dependencies of this project. Do you know if Babylon relies on some of them that need to be updated too?

  "dependencies": {
    "@angular/animations": "~11.0.9",
    "@angular/cdk": "^11.1.0",
    "@angular/common": "~11.0.9",
    "@angular/compiler": "~11.0.9",
    "@angular/core": "~11.0.9",
    "@angular/forms": "~11.0.9",
    "@angular/localize": "^9.0.6",
    "@angular/material": "^11.1.0",
    "@angular/platform-browser": "~11.0.9",
    "@angular/platform-browser-dynamic": "~11.0.9",
    "@angular/platform-server": "~11.0.9",
    "@angular/router": "~11.0.9",
    "@babylonjs/core": "^5.0.0-alpha.60",
    "@babylonjs/inspector": "^5.0.0-alpha.60",
    "@ckeditor/ckeditor5-build-classic": "^19.0.0",
    "@ng-bootstrap/ng-bootstrap": "^6.0.0",
    "@nguniversal/express-engine": "^11.0.1",
    "@ngx-translate/core": "^12.1.2",
    "@ngx-translate/http-loader": "^4.0.0",
    "@types/jquery": "^3.3.32",
    "bowser": "^2.9.0",
    "ckeditor4-angular": "^1.1.0",
    "domino": "^2.1.6",
    "express": "^4.15.2",
    "font-awesome": "^4.7.0",
    "gsap": "^3.1.1",
    "jquery": "^3.4.1",
    "localstorage-polyfill": "^1.0.1",
    "locomotive-scroll": "^3.3.9",
    "ngx-auto-unsubscribe": "^3.0.1",
    "ngx-infinite-scroll": "^8.0.1",
    "ngx-slick-carousel": "^0.4.7",
    "rxjs": "~6.5.4",
    "scrollmagic": "^2.0.7",
    "scrollmagic-plugin-gsap": "^1.0.4",
    "slick-carousel": "^1.8.1",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1100.7",
    "@angular/cli": "~11.0.7",
    "@angular/compiler-cli": "~11.0.9",
    "@angular/language-service": "~9.0.1",
    "@nguniversal/builders": "^11.0.1",
    "@types/express": "^4.17.0",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.1.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.0.2",
    "ws": "^7.4.4",
    "xmlhttprequest": "^1.8.0"
  }

Or could it be a Typescript problem?

  1. After failing with the first way I tried the second process, but after the download of the downgraded version, the new .env seems to lose the main part, so it doesn’t read it correctly and throws an error:
����֖6{"version":1,"width":0,"irradiance":null,"specular":{"mipmaps":[],"lodGenerationScale":0.8}}

It’s only made of this line of code…

Thank you :slight_smile:

4

I guess you should update your version of typescript, @RaananW could help with this ?

1 Like
5

This would be my answer as well. What version of typescript are you using?

TypeScript 4.4 should have this defined.

1 Like
6

@sebavan @RaananW thank you to the both of you!
I was using 4.0.2, now i’ve updated it to the latest version (4.4.4) and it works perfectly.
Thanks again for the support :sunny:

3 Likes
7

Well thanks for this…I had the same error, tried updating typescript…and now the build environment is broken. And I’m in hell…

8

We are not controlling TS updates unfortunately but I am not sure why it would break your entire environment. Could you share a repro as this might be helpful to help you ?

9

Yeah I know. Just had lots of problems getting across the whole modern javascript thing. I’m going to recreate the environment today I’m sure I can fix it.

10

Ok - I rebuilt the entire environment, then put in my code. installed all the dependencies…and now I am getting the same error! argh…

I am using the snowpack template referenced here; Snowpack community template

Below is the error - anyone getting this? any ideas how to fix it?

PS E:\xampp\htdocs\mc> npm start

@ start E:\xampp\htdocs\mc
snowpack dev

[13:56:13] [snowpack] ENOENT: no such file or directory, open ‘E:\xampp\htdocs\mc\node_modules.cache\snowpack\build@babylonjs\core@4.2.0@babylonjs\core.js’
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ start: snowpack dev
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\User\AppData\Roaming\npm-cache_logs\2021-12-17T01_55_13_593Z-debug.log

11

Ok - multiple rebuilds later… something causes npm to do a big build which breaks everytime, and from then on I get the errors above whenever I run ‘npm start’

I started from scratch using the snowpack template referred to in my previous posts;

  1. that works and shows a basic babylon sphere
  2. I copied in my code apart from index.js. This still works but shows a basic babylon error - not sure what thats about.
  3. I then add in my index.js (which imports all the classes and starts the app). This does some big build, repeating the section below and then just hangs reloading the page.
  4. after this I stop it and restart and always get the error referred to in the previous email.
  5. It looks like my code imports the shaders from @babylon/materials, and in building them everything breaks - including my build environment.
  6. very very stuck now - why would something in babylon break everything???

[17:17:08] [snowpack] + @babylonjs/core/Shaders/ShadersInclude/clipPlaneVertexDeclaration@4.2.0
[17:17:09] [snowpack] + @babylonjs/core/Shaders/ShadersInclude/fogVertexDeclaration@4.2.0
[17:17:09] [snowpack] + @babylonjs/core/Shaders/ShadersInclude/instancesVertex@4.2.0
[17:17:09] [snowpack] + @babylonjs/core/Shaders/ShadersInclude/bonesVertex@4.2.0
[17:17:10] [snowpack] + @babylonjs/core/Shaders/ShadersInclude/fogVertex@4.2.0
[17:17:10] [snowpack] + @babylonjs/core/Shaders/ShadersInclude/shadowsVertex@4.2.0
[17:17:11] [snowpack] + @babylonjs/core/Shaders/ShadersInclude/clipPlaneVertex@4.2.0
[17:17:11] [snowpack] + @babylonjs/core/Misc/decorators@4.2.0
[17:17:11] [snowpack] Error: EPERM: operation not permitted, lstat ‘E:\xampp\htdocs\mc\node_modules.cache\snowpack\build@babylonjs\core@4.2.0@babylonjs\core.js’
at Object.lstatSync (fs.js:1115:3)
at rimrafSync (E:\xampp\htdocs\mc\node_modules\rimraf\rimraf.js:288:20)
at E:\xampp\htdocs\mc\node_modules\rimraf\rimraf.js:336:39
at Array.forEach ()
at rmkidsSync (E:\xampp\htdocs\mc\node_modules\rimraf\rimraf.js:336:26)
at rmdirSync (E:\xampp\htdocs\mc\node_modules\rimraf\rimraf.js:329:7)
at fixWinEPERMSync (E:\xampp\htdocs\mc\node_modules\rimraf\rimraf.js:207:5)
at rimrafSync (E:\xampp\htdocs\mc\node_modules\rimraf\rimraf.js:308:28)
at E:\xampp\htdocs\mc\node_modules\rimraf\rimraf.js:336:39
at Array.forEach () {
errno: -4048,
syscall: ‘lstat’,
code: ‘EPERM’,
path: ‘E:\xampp\htdocs\mc\node_modules\.cache\snowpack\build\@babylonjs\core@4.2.0\@babylonjs\core.js’
}
[17:17:11] [snowpack] Error: EPERM: operation not permitted, lstat ‘E:\xampp\htdocs\mc\node_modules.cache\snowpack\build@babylonjs\core@4.2.0@babylonjs\core.js’
[17:17:11] [snowpack] [500] /_snowpack/pkg/@babylonjs.materials.Gradient.v4.2.0.js
[17:17:11] [snowpack] + @babylonjs/core/Materials/materialDefines@4.2.0

12

Pretty sure the issue is not with Babylon itself but rather the build setup. Could you share a repo where we can repro the issue ?

13

rimraf is the cross platform rm -Rf. Can it be a permissions issue? It looks odd that the package names are suffixed with “.js”. I have to confess that I didn’t take this very far as it was primarily a proof of concept to see speed benefits over webpack.

14

SOLUTION: ok after lots of messing around it turns out to be a problem with the latest release of snowpack. I must have done an update or something, and it got the latest release and introduced this issue. There are tickets about it in snowpacks github. Rolling back to version 3.8.6 from 3.8.8 fixed everything!

Now all works perfectly - maybe when trying to update typescript I updated snowpack…(?)

2 Likes