# Camera.update() es6 treeShaking?

**URL:** https://forum.babylonjs.com/t/camera-update-es6-treeshaking/21681
**Category:** Questions
**Created:** [June 15, 2021, 9:02am UTC](https://forum.babylonjs.com/t/camera-update-es6-treeshaking/21681 "2021-06-15T09:02:08Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![samevision](https://avatars.discourse-cdn.com/v4/letter/s/73ab20/32.png) [@samevision](https://forum.babylonjs.com/u/samevision)
#### Post date: [June 15, 2021, 9:02am UTC](https://forum.babylonjs.com/t/camera-update-es6-treeshaking/21681/1 "2021-06-15T09:02:08Z")

</div>

Hello everyone,

my question is short but I can’t figure it out on my own:

What dependency do I have to import to be able to use camera.update()?

Thank you very much 🙂

---

<div class="post-metadata">

### Author: ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)
#### Post date: [June 15, 2021, 9:15am UTC](https://forum.babylonjs.com/t/camera-update-es6-treeshaking/21681/2 "2021-06-15T09:15:44Z")

</div>

That depends on the camera you are using, but if you are importing the camera you actually want to use it will be imported automatically.

Do you have any issues with tree shaking and the camera class?

---

<div class="post-metadata">

### Author: ![samevision](https://avatars.discourse-cdn.com/v4/letter/s/73ab20/32.png) [@samevision](https://forum.babylonjs.com/u/samevision)
#### Post date: [June 15, 2021, 9:18am UTC](https://forum.babylonjs.com/t/camera-update-es6-treeshaking/21681/3 "2021-06-15T09:18:44Z")

</div>

I am using arcRotateCamera:

> import { ArcRotateCamera } from “@babylonjs/core/Cameras/arcRotateCamera”

I try to render the scene on demand. To do that I have to call camera.update() in the render loop to check if there are new inputs. But this doesn’t work if I just import the camera. If I import the whole package it works fine:

> import { ArcRotateCamera } from “@babylonjs/core”

---

<div class="post-metadata">

### Author: ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)
#### Post date: [June 15, 2021, 10:21am UTC](https://forum.babylonjs.com/t/camera-update-es6-treeshaking/21681/4 "2021-06-15T10:21:23Z")

</div>

First one would be cleaner, of course 🙂

What exactly doesn’t work? does it fail silently? does it show any error in the console? can you reproduce this somehow and provide a code example?

---

<div class="post-metadata">

### Author: ![samevision](https://avatars.discourse-cdn.com/v4/letter/s/73ab20/32.png) [@samevision](https://forum.babylonjs.com/u/samevision)
#### Post date: [June 15, 2021, 10:30am UTC](https://forum.babylonjs.com/t/camera-update-es6-treeshaking/21681/5 "2021-06-15T10:30:32Z")

</div>

Since I only want to render the scene if the user made some inputs I call camera.update() in renderLoop: [https://www.babylonjs-playground.com/#UD9LU6#41](https://www.babylonjs-playground.com/#UD9LU6#41)

If I import the camera via the full path “@babylonjs/core/Cameras/arcRotateCamera” I can’t interact with the scene. So I assume that camera.update() is the problem here. I noticed that it works fine if I import gamepadManager in addition to the camera:

> import { GamepadManager } from “@babylonjs/core/Gamepads/gamepadManager”

I don’t know why that works.

The console doesn’t show any errors.

---

<div class="post-metadata">

### Author: ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)
#### Post date: [June 15, 2021, 6:53pm UTC](https://forum.babylonjs.com/t/camera-update-es6-treeshaking/21681/6 "2021-06-15T18:53:11Z")

</div>

> [@samevision](#):
>
> “@babylonjs/core/Cameras/arcRotateCamera”

Is that the only import in your app?

---

<div class="post-metadata">

### Author: ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)
#### Post date: [June 16, 2021, 12:42pm UTC](https://forum.babylonjs.com/t/camera-update-es6-treeshaking/21681/7 "2021-06-16T12:42:01Z")

</div>

Sounds like this should just work, @samevision, do you have a repro we could look at ?

---

<div class="post-metadata">

### Author: ![samevision](https://avatars.discourse-cdn.com/v4/letter/s/73ab20/32.png) [@samevision](https://forum.babylonjs.com/u/samevision)
#### Post date: [June 16, 2021, 7:22pm UTC](https://forum.babylonjs.com/t/camera-update-es6-treeshaking/21681/8 "2021-06-16T19:22:26Z")

</div>

No I import a lot of modules but all by their specific path. Everything works fine except for camera.update().

How would you recommend to create a repro with treeshaking? I will try so set it up on git and will post it here later.

---

<div class="post-metadata">

### Author: ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)
#### Post date: [June 17, 2021, 8:03am UTC](https://forum.babylonjs.com/t/camera-update-es6-treeshaking/21681/9 "2021-06-17T08:03:47Z")

</div>

> [@samevision](#):
>
> No I import a lot of modules but all by their specific path. Everything works fine except for camera.update().

Nothing special is happening in camera.update. And if there was something missing you should have seen a warning in the console. Needs to be debugged…

> [@samevision](#):
>
> How would you recommend to create a repro with treeshaking? I will try so set it up on git and will post it here later.

I am not sure how you build your project, but that would be the best way 🙂 build your project with sourcemaps, or provide the repository if possible. that would help a lot.

---

<div class="post-metadata">

### Author: ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)
#### Post date: [June 18, 2021, 7:30pm UTC](https://forum.babylonjs.com/t/camera-update-es6-treeshaking/21681/10 "2021-06-18T19:30:27Z")

</div>

Sharing the repo on Github will be by far the fastest way to troubleshoot for us

---

<div class="post-metadata">

### Author: ![njaldea](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/njaldea/32/23440_2.png) [@njaldea](https://forum.babylonjs.com/u/njaldea)
#### Post date: [April 9, 2022, 2:45pm UTC](https://forum.babylonjs.com/t/camera-update-es6-treeshaking/21681/11 "2022-04-09T14:45:50Z")

</div>

I experience this as well in my personal project.

if i do

```auto
    // import { ArcRotateCamera } from '@babylonjs/core/Cameras/index.js';

```

it works

but if i do

```auto
    import { ArcRotateCamera } from '@babylonjs/core/Cameras/arcRotateCamera.js';

```

onViewMatrixChangedObservable doesn’t seem to fire.

i have to import this to make it work

```auto
    import * as NecessaryImport from '@babylonjs/core/Gamepads/Controllers/poseEnabledController.js';

```

---

<div class="post-metadata">

### Author: ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)
#### Post date: [April 9, 2022, 7:28pm UTC](https://forum.babylonjs.com/t/camera-update-es6-treeshaking/21681/12 "2022-04-09T19:28:21Z")

</div>

cc @RaananW

---

<div class="post-metadata">

### Author: ![njaldea](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/njaldea/32/23440_2.png) [@njaldea](https://forum.babylonjs.com/u/njaldea)
#### Post date: [April 9, 2022, 10:35pm UTC](https://forum.babylonjs.com/t/camera-update-es6-treeshaking/21681/13 "2022-04-09T22:35:24Z")

</div>

for reproduction, I am doing it in svelte.  
hopefully it will still matter

> **[@nil-/3d camera bug • REPL • Svelte](https://svelte.dev/repl/0c6d77877b8142ec84569964532a1922?version=3.47.0)**
>
> Cybernetically enhanced web apps

Please see Canvas.svelte (2nd tab of the repl)

adding/removing `import {} from '@babylonjs/core/Gamepads/Controllers/poseEnabledController.js';` seems weird for me as it somehow affects the other components/js files.

---

<div class="post-metadata">

### Author: ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)
#### Post date: [April 11, 2022, 10:26am UTC](https://forum.babylonjs.com/t/camera-update-es6-treeshaking/21681/14 "2022-04-11T10:26:13Z")

</div>

Hey,

I am not sure where the @nil-/3d code come from, but looking at the npm package, it seem to me like there is something wrong in the way the camera is being handled there.

This piece of code (in the Camera.svelte file):

```auto
function onViewUpdate() {
    context.render();
}
function updateCamera() {
    camera.update();
}
camera.onViewMatrixChangedObservable.add(onViewUpdate);
context.scene.onAfterRenderObservable.add(updateCamera);
context.scene.onPointerObservable.add(updateCamera);
camera.attachControl(context.canvas, true, false);
context.render();

```

Seems a bit off. Only render the context when the camera view has changed but update the camera after a render was triggered.

You can also see that the camera is actually moving when you drag the mouse around but doesn’t update because the context is not being rendered (try dragging the camera around and then changing something in the UI - you will see the camera changes).

The PoseEnabledController is WebVR-oriented controller type. the only reason it does what you expect it to do is probably the update function that forces a certain change that you expect. But it’s very hard to debug, beca7use the dev environment is not easily debuggable TBH.

But again, the way I see it, since you have this function in “Context”:

`afterUpdate(() => this.renderCheck());`

It only checks if it should render after the context has updated. since there is no true reason for the context to update, it will not render.

---

<div class="post-metadata">

### Author: ![njaldea](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/njaldea/32/23440_2.png) [@njaldea](https://forum.babylonjs.com/u/njaldea)
#### Post date: [April 13, 2022, 12:33am UTC](https://forum.babylonjs.com/t/camera-update-es6-treeshaking/21681/15 "2022-04-13T00:33:30Z")

</div>

hello RaananW,

that is my personal project to sveltize babylonjs, and for me to learn babylon at the same time.  
it is rendering only when there is a change in the scene and in the camera (viewMatrixChanged…).

onPointerObservable calls camera.update()  
thus movement via mouse events will move the camera, and it should emit onViewMatrixChangedObservable.  
onViewMatrixChangedObservable then calls scene.render to update the canvas

This is true on my personal project  
I simply import the whole camera and it works.

```auto
import { ArcRotateCamera } from '@babylonjs/core/Cameras/index.js';

```

but if i only import arcRotateCamera only  
onViewMatrixChangedObservable is not invoked even with mouse events

```auto
import { ArcRotateCamera } from '@babylonjs/core/Cameras/arcRotateCamera.js';

```

the only way for me to “fix” the issue without importing the whole camera is to import:

```auto
import * as NecessaryImport from '@babylonjs/core/Gamepads/Controllers/poseEnabledController.js';

```

which looks weird because it means that it probably modifies some global “state”/object that babylon is using.

i think i can create a very small example in babylon’s sandbox for this. I’ll be right back with it…

---

<div class="post-metadata">

### Author: ![njaldea](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/njaldea/32/23440_2.png) [@njaldea](https://forum.babylonjs.com/u/njaldea)
#### Post date: [April 13, 2022, 12:59am UTC](https://forum.babylonjs.com/t/camera-update-es6-treeshaking/21681/16 "2022-04-13T00:59:38Z")

</div>

Hello, I am back 😃  
sorry for being persistent.

here is the minimal reproduction but using svelte repl as i need to “emulate” tree shaking

> **[repro • REPL • Svelte](https://svelte.dev/repl/6ae13012bd874ec0a4348d93676514c2?version=3.47.0)**
>
> Cybernetically enhanced web apps

please go to impl.js and toggle the commented import code

```auto
// import { ArcRotateCamera } from '@babylonjs/core/Cameras/arcRotateCamera.js';
import { ArcRotateCamera } from '@babylonjs/core/Cameras/index.js';

```

---

<div class="post-metadata">

### Author: ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)
#### Post date: [April 13, 2022, 3:14pm UTC](https://forum.babylonjs.com/t/camera-update-es6-treeshaking/21681/17 "2022-04-13T15:14:00Z")

</div>

adding @sebavan and @RaananW (don’t hold your breath as they are both on vacation)

---

<div class="post-metadata">

### Author: ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)
#### Post date: [April 18, 2022, 1:56pm UTC](https://forum.babylonjs.com/t/camera-update-es6-treeshaking/21681/18 "2022-04-18T13:56:24Z")

</div>

I am currently seeing this in the repro ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/8/0/80850b9db5ee6fc3fca93f6678148fb26317a2fb.png)

About the code update won t trigger the onViewMatrixChangedObservable only getViewMatrix does if there was an actual change. You should call update then getViewMatrix to force triggering the event.

---

<div class="post-metadata">

### Author: ![njaldea](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/njaldea/32/23440_2.png) [@njaldea](https://forum.babylonjs.com/u/njaldea)
#### Post date: [April 19, 2022, 2:44am UTC](https://forum.babylonjs.com/t/camera-update-es6-treeshaking/21681/19 "2022-04-19T02:44:45Z")

</div>

@sebavan thanks!  
i’m not sure why the repro fails on your end. 😕

anyway. i did try to do it this way.

```auto
scene.onPointerObservable.add(() => {
    camera.getViewMatrix();
    camera.update();
});

```

it does work even with the other import commented out

```auto
// import {} from '@babylonjs/core/Gamepads/Controllers/poseEnabledController.js';

```

but still the question remains that `poseEnabledController.js` somehow affects the camera with/without its inclusion (import)

anyway, i’ll use this instead to force update the camera and trigger the observable.  
I’ll leave it to the OP, and you guys decide what to do with this.

Thanks a lot!!!

---

<div class="post-metadata">

### Author: ![njaldea](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/njaldea/32/23440_2.png) [@njaldea](https://forum.babylonjs.com/u/njaldea)
#### Post date: [April 19, 2022, 10:02pm UTC](https://forum.babylonjs.com/t/camera-update-es6-treeshaking/21681/20 "2022-04-19T22:02:59Z")

</div>

Just want to add some clarifications.  
I just found out the part of the code that adds some “functionality” to the scene.

```auto
import {} from '@babylonjs/core/Culling/ray.js';

```

`createPickingRayToRef` is “changed(?)” by importing ray.js…  
and when it is called, at the end before return, `camera.getViewMatrix()` is called.

anyway  
that clears everything to me, why there is a behavior difference between importing `ray.js` vs not importing `ray.js`.  
I am not sure why it is designed this way, if it is intentional, or it is a “bug” that should be fixed.  
at least now, it is not “magical” anymore.

Thanks for helping reach this understanding. 🙏

[Next page](https://forum.babylonjs.com/t/camera-update-es6-treeshaking/21681.md?page=2)
