solved Newb can't use PBR material (TS/Webpack)

[Manhattan]

Hi, I'm taking a rather big bite here since I haven't really used TypeScript before, and I have very limited experience with JS and node in general. So I'm not really sure where the fault lies, but I'm pretty sure it's something stupid easy. 

The problem I have is this:

Uncaught TypeError: Cannot read property '_environmentBRDFTexture' of undefined
    at Function.e.GetEnvironmentBRDFTexture (babylon.js:1)
    at t [as constructor] (babylon.js:1)
    at t [as constructor] (babylon.js:1)
    at new t (babylon.js:1)
    at t.Creation.createMaterial (Creation.ts:28)

This error appears any time I try to create a new PBR material - happens with any PBR material. Specific line from where the error originates is simply this:

var material: PBRMetallicRoughnessMaterial = new PBRMetallicRoughnessMaterial(name,GLOBAL.scene);

StandardMaterial works just fine.

I am using webpack with ts-loader to bundle the JS, as well as TypeScript Compiler, for verification only. My webpack.config.js is pretty much copy-paste from the docs:

const path = require('path');

module.exports = {
    entry: {
        app: './src/game.ts'
    },
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'game.js'
    },
    resolve: {
        extensions: ['.ts', '.tsx', '.js']
    },
    devtool: 'source-map',
    plugins: [

    ],
    module: {
        rules: [{
            test: /\.tsx?$/,
            loader: 'ts-loader',
            exclude: /node_modules/
        }]
    }
}

And this is my tsconfig.json:

{
  "compilerOptions": {
    /* Basic Options */
    "target": "es5",
    "module": "commonjs",
    "noResolve": false,
    "noImplicitAny": false,
    "removeComments": true,
    "preserveConstEnums": true,
    "sourceMap": true,
    "experimentalDecorators": true,
    "isolatedModules": false,
    "lib": [
      "dom",
      "es2015.promise",
      "es5"
    ],
    "declaration": true,
    "outDir": "./tscverify",
    "strict": true,
    "types": [
      "babylonjs",
      "babylonjs-gui",
      "babylonjs-materials"
    ],
  }
}

Help?

[Guest]

Hello!

how are you importing babylonjs?

[Manhattan]

20 hours ago, Deltakosh said:

Hello!

how are you importing babylonjs?

Hi! :)

I have babylonjs installed via NPM, and I import it like this:
 

import {
    Scene,
    Vector3,
    HemisphericLight,
    Mesh,
    MeshBuilder,
    PBRMetallicRoughnessMaterial,
    StandardMaterial,
    Color3,
    ArcFollowCamera
    } from 'babylonjs';

 

[Guest]

So this should work

Can you share your project?

[Manhattan]

1 hour ago, Deltakosh said:

So this should work

Can you share your project?

Of course I could  I'm simply playing around, trying to familiarize myself with both Babylon as well as TypeScript, nothing confidential here.

And I would, except...
I tried all sorts of different bundlers, thinking maybe my WebPack config messed something up. Since nothing worked, I spent some time playing around with other stuff as well.

And now when I went pack to clean the project up a little bit from all the stuff I tried, in order to share it here - PBR material now started to work...

As far as I'm aware - everything is exactly the same. And it's not like I tried to reverse something significant, it's a really small "demo" of a sphere and PBR material. Except now it works. 
I feel bad for having learned nothing of it, and bothering others with a question about it. ?

I must say though, simply looking at the forums, your support is admirable @Deltakosh, and I appreciate it.

I will add the source files, still. Everything except the forest.hdr from the playground. If for nothing else, then just to show how simple the project really is.

project.zip

[Guest]

No worry as long as it works, it is cool

[ssaket]

Hi @Manhattan,  Welcome to the forum.

I too was recently playing with babylonjs-webpack and had faced the same issue.  It is because you don't have babylonjs-materials in your node_modules.

More details can be found on - https://www.npmjs.com/package/babylonjs-materials

After this, when you do npm build, you might see some warnings regarding external libs like cannon, earcut, omio.

To resolve them, refer to this awesome doc - https://doc.babylonjs.com/features/npm_support  

[ssaket]

posting the updated project as I don't have anything better to do

 

demoproject.zip

[Guest]

lol thanks