Importing Canvas2D to project

[Panuchka]

I am struggling with a similar problem like in this thread, but the solution provided here seems not so ideal...

I have many modules in my game, and if I use Babylon.js in any of those, I import it using:

import Babylon from 'babylonjs'

So there isn't any good way to include Canvas2D similarly? I understand it is somehow baked to Babylon.js, but how do I use it? I'm downloading all the dependencies from the npm, including Babylon.js. Then I bundle everything using Webpack.

Ideally, I would like to use Canvas2D (for example) like this:

import Babylon from 'babylonjs'
import Canvas2D from 'babylonjs'

Please help, I've been scratching my head for hours now...

[Nikos123]

I just use a vanilla Canvas so I don't need to depend on babylon.

[GameMonetize]

Can you try to add something like that at the end of canvas2d file:

if (((typeof window != "undefined" && window.module) || (typeof module != "undefined")) && typeof module.exports != "undefined") {
    module.exports = BABYLON.Canvas2D;
};

[brianzinn]

If you are using NPM, I don't think 'babylonjs' includes Canvas2D. Canvas2D is a separate file that you can get from here: https://github.com/BabylonJS/Babylon.js/tree/master/dist

I've been scratching my head for days, so 'hours' isn't so bad!!  Even if you get the import Canvas2D then I suspect you will get issues with loading.  If you get it working, please let us know how.  Cheers.

[Panuchka]

Why isn't Canvas2D included here in the npm package at all?
https://www.npmjs.com/package/babylonjs

@Deltakosh I can try that, but the Canvas2D should be included to the npm first! Can you do that?

[brianzinn]

I think Canvas2D was split off in November to reduce size of babylonjs, but it would be great if it was included in the npm!

[brianzinn]

Also, maybe you have done it to simplify your imports, but if you use explicit imports (instead of default) might be a good practice.
ie: import { Mesh, Vector3, Color3 } from 'babylonjs'

Since you are using webpack, explicit imports will reduce the size of your generated javascript.  If your editor has ESLint then it will pickup on unused/missing imports.

[GameMonetize]

It will be included for 3.0: https://github.com/BabylonJS/Babylon.js/blob/master/Tools/Npm/package.json

[Panuchka]

Is there ETA for 3.0?
If the full release is far far away in the future, could we have 3.0 alpha/beta builds in npm too? Or include Canvas2D for 2.5?

If I can't get this to work, I guess I have to do the UI using html/css I would prefer using just Babylon.js though, with Canvas2D.

[GameMonetize]

Let me update the npm version for 2.5 with canvas then

[GameMonetize]

Ok actually I prefered publishing a 3.0.0-alpha version

 

[brianzinn]

Is there any intention to also include babylon.inspector.bundle.js with the 3.0 npm?  Thanks.

[GameMonetize]

Sure! Please update the npm package here: https://github.com/BabylonJS/Babylon.js/blob/master/Tools/Npm/package.json

[HugoMcPhee]

I'm facing a similar issue but trying to import the glTF File Loader,
Would it be okay to include the loaders in the npm package aswell?
Or would it be better to have a separate npm repository for the plugins?

If making them available through npm isn't an option, Is there some way to import the SceneLoader from the glTF loader?

In a es2015 project - glTF loader worked fine following the tutorials ( by including it as a script in index.html)
but with a typescript project the same thing isn't working

Is there a recommended way to "import" a babylonjs plugin?

Thanks
 

[brianzinn]

i don't know a recommended way, but I just copied the .ts file from babylonjs source and modified it be removing any "BABYLON." references. Then my code was just this:

SceneLoader.RegisterPlugin(new OBJFileLoader())
        
SceneLoader.ImportMesh(...)

Anyway, I'm sure this isn't the recommended way, but will get you going until you find something hopefully better.

[GameMonetize]

No problem to add them to the npm package. Please do a PR to update the package desc:

https://github.com/BabylonJS/Babylon.js/tree/master/Tools/Npm

[Andy Zhuang]

On 06/04/2017 at 0:33 AM, Deltakosh said:

Ok actually I prefered publishing a 3.0.0-alpha version

 

Hi, @Deltakosh, it still not contain Canvas2d in the latest release in NPM (https://www.npmjs.com/package/babylonjs)

I need this to work.

[GameMonetize]

Yep I replaced it with gui

[Andy Zhuang]

14 hours ago, Deltakosh said:

Yep I replaced it with gui

I am confusing. Why remove Canvas2D? Cann't we keep both?

[GameMonetize]

It is not removed. Just moved to Extensions repo.

Canvas2D is still a great framework but the main contributor is sick so I needed to remove Canvas2D from the main repo to not block the release of Babylon.js 3.0

So yes we will definitely keep both.

[Andy Zhuang]

Thanks for clearing. 

Now I get the extensions repository: https://github.com/BabylonJS/Extensions