Violation warnings when using observable

good day, I have en observable of this kind going:
derObs=scene.onAfterRenderObservable.add(() => {… etc

and sometimes i get in the console things like this:
15[Violation] ‘requestAnimationFrame’ handler took ms
scheduler.development.js:147 [Violation] ‘message’ handler took 296ms

I guess its probably because of the amount of processing that im doing in each cycle,
is there any way to slow down the speed of the cycles of the observable? so that it executes its cycle slower or something similar?

much appreciated as well any other advice to optimize operations to prevent these Violations

thank you :slight_smile:

I specially get the Violation] ‘requestAnimationFrame’ handler took ms

any advice to reduce these issues? slowing down the observable function? and if so, how?

I have detected the exact thing that produces the problem,
I am updating a couple of states through redux in every pass of the observable loop and that seems to just produce this animationframe violations, if i take them away they go away,
so mmm I could try to update them less times or if there is a way to make the observable loop go slower let me know thank you :slight_smile:

interestingly, I dont have such problem with for example a pointermove event, I can update states of redux and I dont get such warnings; it happens to me specifically with the scene.onAfterRenderObservable.add(() => { event; maybe that event executes much faster; so yeah I wonder if I can slow it down somehow

things are improving after using this

derObs=scene.getEngine().onEndFrameObservable.add(() => {

instead of
derObs=scene.onAfterRenderObservable.add(() => {

is it because onEndFrameObservable executes less often than onAfterRenderObservable?

I still get them from time to time though,
are these warnings something to worry about if they dont slow down performance much?
of course with the previous event they were slowing down performance too much and then its not good, its clear; with the new event performance seems pretty good although the messages still happen from time to time

again this only happens to me with these observables events, doesnt happen with pointermove events for example never

The best idea is to never block the RAF (requestAnimationFrame) which is the pump used to generate the rendering frames

so you can still use onAfterREndering or onBefore but do something like that:

scene.onAfterRenderObservable.add(() => {
setTimeout(() => {
// Your code
}, 0);

it will help run your code OUTSIDE of the RAF frame


@Deltakosh very interesting, so you mean putting my code inside
setTimeout(() => {
// Your code
}, 0);

but with 0 milliseconds as parameter? why does that help? 0 doesnt that mean that it executes immediately?

it will be executed on the next micro-frame (eg. outside of the current loop)

1 Like

wow so interesting, i will give it a try thank you :slight_smile:

@Deltakosh yes now the requestanimationframe violations dont happen anymore awesome, now only from time to time I get one of these:

[Violation] ‘message’ handler took 163ms

and sometimes also one of these
[Violation] ‘setTimeout’ handler took 51ms

are these anything to worry about?

@Deltakosh yes basically I have replaced RequestAnimationFrame violations for setTimeOut violations,

is there any other way to slowdown one of these observable events to tax less the system? thank you :slight_smile:

Just setup a counter and do your things if (counter % 2 == 0) (will do your work on a 30fps basis, providing your code execute at 60fps), or (counter % 4 == 0) (do it on a 15fps basis) for eg.

1 Like

@Evgeni_Popov yeah I did that, thats what I already did, I was wondering if there was any other way, I guess I am now just trying to optimize all as much as possible but it seems unavoidable to get some of these violation warnings sometimes, I notice that when the laptop just slows down for any other reason they may appear, its quite normal I guess in a way, thank you again :wink:

I have never seen them, but I’m on a desktop…

scene.onBeforeRenderObservable, scene.onAfterRenderObservable and engine.onEndFrameObservable occurs have the same frequency: one time per frame, meaning 60 times a second if you’re at 60fps.

Apart from the counter, you can make some code run less often by simply using a setTimeout(yourcode, delay_ms) with delay_ms > 16.7ms (or setInterval instead of setTimeout).

1 Like

@Evgeni_Popov thank you, is the frame rate of the scene something that we can modify? maybe setting it to 30 instead of 60?

No, the base framerate can’t be changed I think, it’s the frequency with which the browser is calling requestAnimationFrame.

However, you can try something like: How can I set a custom FPS?

1 Like