Struggling with import es6 modules jungle - CubeTexture.CreateFromPrefilteredData

Questions
1

import { Engine } from ‘@babylonjs/core/Engines/engine’
import { Scene } from ‘@babylonjs/core/scene’
import { Mesh } from ‘@babylonjs/core/Meshes/mesh’
import { AssetsManager } from ‘@babylonjs/core/Misc/assetsManager’
import { ArcRotateCamera } from ‘@babylonjs/core/Cameras/arcRotateCamera’
import { PBRMaterial } from ‘@babylonjs/core/Materials/PBR/pbrMaterial’
import { StandardMaterial } from ‘@babylonjs/core/Materials/standardMaterial’
import { MirrorTexture } from ‘@babylonjs/core/Materials/Textures/mirrorTexture’
import { Texture } from ‘@babylonjs/core/Materials/Textures/texture’
import { CubeTexture } from ‘@babylonjs/core/Materials/Textures/cubeTexture’
import { Color3, Color4, Vector2, Vector3, Plane } from ‘@babylonjs/core/Maths/math’
import { PostProcess } from ‘@babylonjs/core/PostProcesses/postProcess’
import { Effect } from ‘@babylonjs/core/Materials/effect’
import { HemisphericLight } from ‘@babylonjs/core/Lights/hemisphericLight’

webpack
webpack867×645 203 KB

Hi, guys. I’m asking for directions. Compiling my project babylonjs I have an error on createPrefilteredCubeTexture. Probably missing the right line of import of the es6 module.

const envTexture = CubeTexture.CreateFromPrefilteredData('./textures/studio_256.env', scene)

Can anyone tell me which one?

2

Sure!

here is first a good doc to read: ES6 - Babylon.js Documentation

Then for your issue you need to import:

import { CubeTexture } from ‘@babylonjs/core/Materials/Textures/cubeTexture’
import { DDSTools } from ‘@babylonjs/core/Misc/dds’
2 Likes
3 
import { Engine } from '@babylonjs/core/Engines/engine'
import { Scene } from '@babylonjs/core/scene'
import { Mesh } from '@babylonjs/core/Meshes/mesh'
import { AssetsManager } from '@babylonjs/core/Misc/assetsManager'
import { ArcRotateCamera } from '@babylonjs/core/Cameras/arcRotateCamera'
import { PBRMaterial } from '@babylonjs/core/Materials/PBR/pbrMaterial'
import { StandardMaterial } from '@babylonjs/core/Materials/standardMaterial'
import { MirrorTexture } from '@babylonjs/core/Materials/Textures/mirrorTexture'
import { Texture } from '@babylonjs/core/Materials/Textures/texture'
import { CubeTexture } from '@babylonjs/core/Materials/Textures/cubeTexture'
import { Color3, Color4, Vector2, Vector3, Plane } from '@babylonjs/core/Maths/math'
import { PostProcess } from '@babylonjs/core/PostProcesses/postProcess'
import { Effect } from '@babylonjs/core/Materials/effect'
import { HemisphericLight } from '@babylonjs/core/Lights/hemisphericLight'
import { DDSTools } from '@babylonjs/core/Misc/dds'

package.json
“dependencies”: {
“@babylonjs/core”: “^4.0.3”
}

webpac-2
webpac-2687×618 227 KB

:frowning: @Deltakosh Thank you, but the problem persists, unfortunately. ps: with
“dependencies”: {
“babylonjs”: “^4.0.3”
}
the problem does not occur

4

Pinging @sebavan as he knows module better than me

1 Like
5

Could you try on “@babylonjs/core”: “^4.1.0-beta.4” ? and let me know if that works ?

If it doesnot would be amazing if you could share a repro on github or other ?

Thanks a lot

6

@sebavan thanks! here the github repo. Same issue with 4.10-beta.4

7

Here are the start of the changes you need.

You are trying to use env format so replace:

import { DDSTools } from ‘@babylonjs/core/Misc/dds’ by import ‘@babylonjs/core/materials/Textures/Loaders/envTextureLoader’;

also you want to use .babylon loader so you need: import ‘@babylonjs/core/Loading/Plugins/babylonFileLoader’;

I also commented out the debug layer part cause you would need more imports as explained in the documentation.

And to load an env you could directly do const envTexture = new CubeTexture(’./textures/studio_512.env’, scene); but please note you do not need env as you are not using PBR currently.

2 Likes
8

thanks @sebavan,

      const mirror = Mesh.CreateBox('mirror', 1.0, scene)
      mirror.scaling = new Vector3(550.0, 0.0, 550.0)
      mirror.material = new StandardMaterial('mirror', scene)
      mirror.material.reflectionTexture = new MirrorTexture('mirror', {
        ratio: 0.45
      }, scene, true)
      mirror.material.reflectionTexture.mirrorPlane = new Plane(0, -1.0, 0, -1.0)
      mirror.material.reflectionTexture.renderList = [mesh]
      mirror.material.reflectionTexture.level = 0.6
      mirror.material.reflectionTexture.adaptiveBlurKernel = 8
      mirror.position = new Vector3(0, -35, 0)

the only problem I have now (unlike the “legacy” import) is that the MirrorTexture is not displayed

skull

Here a demo with mirror texture active

9

What error do you see ?

10

You need to add import “@babylonjs/core/Meshes/Builders/boxBuilder”; as you are creating a box :slight_smile:

image
image1085×1170 108 KB

2 Likes
11

solved with

// import '@babylonjs/core/materials/Textures/Loaders/envTextureLoader'
import '@babylonjs/core/Loading/Plugins/babylonFileLoader'
import '@babylonjs/inspector'

now i see the MirrorTexture

12

Oh, ok! :slight_smile: more concise and straightforward to the point :pray: thanks

1 Like