ActionManager and pointer events not suppoorted when creating my own bundle with ES6

Questions
1

Hello! I’m using Babylon Core and GUI version 4.2.0

Problem:
My scene has a bunch of meshes with action managers to handle OnPickTrigger and OnPointerOverTrigger. Everything works great if I use the babylon min file from the dist folder on GitHub or the CDN but they stop working if i use my own bundle. @sebavan I think there must be some import that I’m missing.

What I am doing:
I create my own bundle because of file size constrains; to do so, I have a js file that imports the required modules from node_modules and then use rollup to create the final min.js file.

rollup exports everything as an iife under the name BABYLON. Later own I call BABYLON.Engine, BABYLON.Scene there are no console errors and everything works as expected except that the events are never raised, meshes for example do not respond to pointer events, nor show the mouse cursor as a pointer. I am unable to reproduce this in the playground because the files are already loaded.

Example:

package.json

 "dependencies": {
        "@babylonjs/core": "4.2.0",
        "@babylonjs/gui": "4.2.0"
    },
    "devDependencies": {
        "@rollup/plugin-node-resolve": "7.0.0",
        "rollup": "1.16.2",
        "rollup-plugin-terser": "^7.0.2"
    }

index.js


import '@babylonjs/core/Materials/Textures/rawTexture';
import '@babylonjs/core/Materials/Textures/dynamicTexture';
import '@babylonjs/core/Shaders/layer.vertex.js';
import '@babylonjs/core/Shaders/layer.fragment.js';

import {ActionManager} from '@babylonjs/core/Actions/actionManager';
import {ExecuteCodeAction} from '@babylonjs/core/Actions/directActions';
import {Animation} from '@babylonjs/core/Animations/animation';
import {ArcRotateCamera} from '@babylonjs/core/Cameras/arcRotateCamera';
import {Engine} from '@babylonjs/core/Engines/engine';
import {Effect} from '@babylonjs/core/Materials/effect';
import {Material} from '@babylonjs/core/Materials/material';
...
import {VertexBuffer} from '@babylonjs/core/Meshes/buffer';
import {Mesh} from '@babylonjs/core/Meshes/mesh';
...
import {Scene} from '@babylonjs/core/scene';
import {AdvancedDynamicTexture, Button, Control, Line, Rectangle, Slider, TextBlock} from '@babylonjs/gui/2D';

const GUI = {
  AdvancedDynamicTexture,
  Button,
  Control,
  Rectangle,
  Slider,
  TextBlock,
  Line
};

export {
  Engine,
  Scene,
  ArcRotateCamera,
...
  ActionManager,
...
  Animation,
  ExecuteCodeAction,
  VertexBuffer,
  GUI
};
2

Please try to not use BABYLON as it conflicts with the UMD hack we have in place, could you try renaming to another variable ?

@RaananW also had trouble with rollup and might be able to provide his workaround.

1 Like
3

I did experiment with rollup a few months ago and managed to get the scene to render, but i never finalized the update in my bootstrap project. would you be able to share your project so I can help you debug?

4

Thanks @RaananW!
I created this small example with the most basic form of the problem, you can follow the instructions in the README file on how to create your own bundle.
I’m attaching a zip folder, let me know if there is a better way to share this.

babylon rollup example.zip (1.1 MB)

2 Likes
5

@RaananW have you had any luck?

6

hi @joselea - I’ll share some ideas since this thread stalled. Are you trying to bundle with your project - otherwise I see you are missing externals?

{
   external: [...Object.keys(pkg.peerDependencies || {})],
   plugins: [...]
}

this project keeps the babylon as a vendor bundle in rollup config:
react-babylonjs/rollup.config.js at master · brianzinn/react-babylonjs (github.com)

If you bundle babylon with your project you can end up with some odd code as there are places in the code that will fail on some instanceof checks if you have babylon loaded twice with some misconfiguration!

I did a hacky not too long ago for somebody in the forum trying to bundle babylon from source and I used rollup:
babylon-ssg-rollup/rollup.config.js at main · brianzinn/babylon-ssg-rollup (github.com)

7

So sorry, i was away for 2 weeks.

I have some catching up to do, it’s on my todo list.

2 Likes
9

Thank you for the pointers @brianzinn!
I tried modifying the project i provided in the zip folder above with different rollup configurations following the two examples you provided, unfortunately the actionManager is still not responding.

10

@joselea I have a few working examples with externals using rollup, so just to make sure it’s not the rollup config - what is your code like - here is an example that I use that works:

 mesh.actionManager = new ActionManager(mesh._scene)
    mesh.actionManager.registerAction(
      new SetValueAction(
        ActionManager.OnPointerOverTrigger,
        mesh.material,
        'wireframe',
        true
      )
    )
    mesh.actionManager.registerAction(
      new SetValueAction(
        ActionManager.OnPointerOutTrigger,
        mesh.material,
        'wireframe',
        false
      )
    )
11

Better late than never - for future reference the Ray class is missing, which is required for picking.

When you import the ray:

import { Ray } from "@babylonjs/core/Culling/ray";

and export it in your index.js, the events will trigger as expected:

image
image1838×1392 199 KB

6 Likes
13

Thank you so much @RaananW this fixed the problem!

2 Likes