Sign in to follow this  
Manhattan

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

Recommended Posts

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?

Share this post


Link to post
Share on other sites
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';

 

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.