So this is like my 12th and final try upgrading from 3.1.a5 to newest stable babylon version. I am closer than I’ve been before, but I’ve been working on upgrading it all week and am at the point where I need to ask for help. – If you remember from before, I’ve been version locked at 3.1.alpha5 for over a year now. I’ve tried upgrading probably 12 times, and everytime there would always be huge FPS issues. (like half frame rate is best I ever got, and at worst, many memory leaks and <10 FPS).
So the good news is, it’s at least able to hit 60FPS sometimes now. The bad news is performance still sucks compared to 3.1a5 overall, and on top of that I have other bugs I still haven’t quite figured out (the performance increase is likely also due to the many fixes/optimizations I’ve done since my initial tries also) – I could open a bunch of threads but I figure centralizing it and tagging @Deltakosh and @sebavan would be the most humane thing to do, rather than clutter the forum with a bunch of topics explaining ^ every time. If you’d rather have me open a bunch of topics instead LMK.
Before we get to any general performance issues, there are still a few outright broken things I’d like to solve so I’ll post those first, and I’ll number each so you can just respond to the number. And I won’t post all of them at once. – Also I’ll create a PG for things I can create a PG for, after I ask the question, because there may or may not be an obvious answer to some of them.
1. Animation events no longer firing for me – Actually haven’t dug into this one too far, but basically I have a method like this: (which works 100% of the time in 3.1, but works 0% of the time in 4.0.3 for some reason
Object.defineProperty(BABYLON.Animation.prototype, "$$onPercentCompleted", {
value: function(percentage, callback) {
let max_frame = this.getHighestFrame(),
target_frame = _.round(max_frame * percentage);
let _event = new BABYLON.AnimationEvent(target_frame, callback, true);
this.addEvent(_event);
return this;
}
});
//example of use below, basically never hits 0.5 % and thus never completes the promise I'm resolving within the animation
return new Promise((resolve,reject) => {
this.attack_animations.move_back.$$onPercentCompleted(0.5, () => {
console.log('on 0.5 % complete');
resolve()
});
});
^ I figure it might be something obvious that was changed as I know there were a lot of things added to animations, but does anything obvious stand out that could have changed and cause that not to work any more?
2. General GUI issues, but mainly, AdvancedDynamicTexture not updating, particularly in my main full screen texture.
I’ve had to do the following several times, which I didn’t have to do previously, but the biggest source of confusion is why I have to do the onAfterNextRender callback to get it to update properly.
this.gui = BABYLON.GUI.AdvancedDynamicTexture.CreateForMesh(this.mesh, 300, 100, false);
this.gui.backFaceCulling = true;
this.rectangle_control = new BABYLON.GUI.Rectangle();
this.text_control = new BABYLON.GUI.TextBlock();
this.text_control.text = "whatever"
this.rectangle_control.addControl(this.text_control);
this.gui.addControl(this.rectangle_control);
this.scene.onAfterRenderObservable.addOnce(() => {
this.gui.markAsDirty();
});
everytime I change the button text, and after I initially set the text, I have to run the addOnce callback or it not only won’t update, but will actually show up blank, even though the underlying text block has the same text value. Any idea what that could be off the top?
3. Video Texture various issues
Lets call this a placeholder as I’ll have to dig into it futher, but basically video textures are playing slower, throwing uncaught errors, and are failing to play to completion and or are freezing when played. (The large majority of my videos I lazy load, but it happens very fast because of electron/local, and I’ve had virtually no issues in 3.1.5 w/ the lazy load strategy). – Anyways I’ll post more when I’ve dug into it further, but one specific thing that tripped me up hard when debugging to bring up now:
Video texture got switched to use fat arrow function binding on the class itself, which binds the methods at runtime each time it’s instantiated, and makes it hell to debug, inherit from, or overwrite. Literally none of those 3 things can be done except for me workaround below, which is super hacky. – In case you’re not familiar with the issue this post describes fairly well Arrow Functions in Class Properties Might Not Be As Great As We Think
But to illustrate my issue directly, I was trying to debug _createInternalTexture method, so I find the source method in the code and paste compiled code in (paraphrasing code). – Never hits the first console.log
function _createInternalTexture() {
var _this = this;
console.log("CREATING INTERNAL TEXTURE", _this.name);
if (_this._texture != null) { }
}
Object.defineProperty(BABYLON.VideoTexture.prototype, "_createInternalTexture", {
value: _createInternalTexture
});
So I try to inherit from BABYLON.VideoTexture, replace all my references to BJSVT with my VT, and do the same, still no luck –
export class DMVideoTexture extends BABYLON.VideoTexture {
constructor(...args) {
super(...args);
}
_createInternalTexture() { console.log('still wont get hit') }
}
Later I realize the why, is because:
getEventListeners(myvideotexture.video).canplay[0].listener === myvideotexture._createInternalTexture
=> false
Because when you bind like
private _createInternalTexture = (): void => {
Not even a subclass will be able to override the method call. And you can override the method with defineProperty, but it won’t actually work at runtime, as it will call the first one bound anyways – So my immediate question here is, can we please stick to:
addEventListener('canplay', this._createInternalTexture.bind(this))
in the constructors, because it’s a literal nightmare to work with / debug / comprehend what is happening otherwise. You basically have to overwrite the entire constructor AND the method if you are adding an event listener this way, because the parent constructor will never call the overwritten instance method even though it’s the lowest member of the ancestry chain.
(the only way to do w/o overwriting entire constructor it is my stupid trick I finally figured out below which I’m currently resorting to)
function __createInternalTexture() {}
set _createInternalTexture(val) {
this.__createInternalTexture = __createInternalTexture.bind(this);
}
get _createInternalTexture() { return this.__createInternalTexture }
Anyways, there will be more to come but I’m tired and I figure I should probably annoy you with my questions in chunks rather than all at once 
