Dynamic Texture Performance

[lothar]

Hello,

 

I am new to this forum and first want to thank for a lot of helpfull posts!

 

Maybe someone can help me with this one:

 

I've started with http://www.babylonjs-playground.com/#9U086#4 (I believe created by iiceman, thanks!) and tried to use fabricjs to paint on the canvas. To allow user interaction I've send the events from the Bayblonjs canvas to the fabricjs canvas translated like this:

var pickResult = scene.pick(scene.pointerX, scene.pointerY);var texcoords = pickResult.getTextureCoordinates(); if (texcoords) {    var clicked_x = texcoords.x;    var clicked_y = texcoords.y;    var posX = (clicked_x * textureWidth) | 0;    var posY = (textureWidth - clicked_y * textureHeight) | 0;    var rect1 = canvas.upperCanvasEl.getBoundingClientRect();    var clientX = posX + rect1.left | 0;    var clientY = posY + rect1.top | 0;                      var evt = document.createEvent("MouseEvents");   evt.initMouseEvent(name, true, true, window, 1, screenX, screenY, clientX, clientY, event.ctrlKey, event.altKey, event.shiftKey, event.metaKey, event.button, canvas.upperCanvasEl);    return evt;}

I was surprised that this works.

 

Sorry i didn't figured it out how to make a playground example with fabricjs, instead I have an example here: http://www.steidle.net/playground/webgl/shirt/test.html

 

But my problem is that it is smooth in chrome, slow in firefox and IE, unusable in Mac Safari.

 

Does someone have a idea how i could get better performance?

 

The Part where the texture get updated is only called when the underlying fabricjs canvas changes:

canvas.on('after:render', function () {   UpdateTexture();});

best regards,

 

Lothar

 

 

[iiceman]

Hallo Lothar,

 

really nice idea and it it seems to work very well in chorme. Looks cool and has a nice handling ... that's pretty impressive, good job!

 

About the performance: are you sure that it's a babylon problem? I just check out http://fabricjs.com/ and moved that robot image there around a bit. It seems to have the same problem: very smooth with chrome, very laggy with firefox.

 

So maybe you can isolate the problem or try another way of drawing on the canvas? If I have time I'll try to make a playground with that fabric js thing and see if it happens, too, when preforming simple things like in the above playground.

[fenomas]

Profiling in Firefox makes it look like ~3/4 of the time is being spent in BJS's engine#updateDynamicTexture. Unfortunately, it looks like that method isn't doing much except calling gl methods, so I don't know what might speed it up...

[lothar]

Hello iiceman,

 

Thanks for your answer. Didn't thought about the obvious...

 

I've added a checkbox to turn the texture update off at http://www.steidle.n...shirt/test.html - when you click "show hidden" and move the text around on the right canvas and then turn the update off and move it around - it doesn't seem like it is faster in IE but it seems faster in Firefox.

So it seems it is a mixture between slower fabricjs in NON-Chrome and slower "what ever happen when calling update on dynamic texture" in NON-Chrome.

 

best regards,

Lothar

[iiceman]

I tired to play around with your fabricjs but I didn't really understand it yet and I don't have enough time to play with it. But I made a playground that at least seems to be able to use the fabricjs stuff: http://www.babylonjs-playground.com/#9U086#31

 

If you can use that to show the problem in  a playground I am sure people will check it out and can help you find a solution

[lothar]

Thanks for Setting up. I added the stuff here: http://www.babylonjs-playground.com/#9U086#32
Don't know why it first says fabricjs not defined - so you have to press run again.
 
When you view it in Firefox and Chrome you see the difference.
 
Edit: Created a second one just for fun: http://www.babylonjs-playground.com/#9U086#33 (wanted to see what happens with a lot of elements)

[iiceman]

That's really super cool!

 

Can you try that out: http://www.babylonjs-playground.com/#9U086#34

 

It seems better for me. I was actually just playing around and changed the update after render to a interval based update:

// Update Texture when fabricjs canvas changedsetInterval(function () {    groundTexture.update();}, 10)

[lothar]

Good finding!
 
I wasn't aware that "after:render" was called so many times....
 
But now the texture is updated 100 Times per second no matter if there is a change or not ?

 

Wouldn't it better to do it like this:
 

var timeout = 0;fabricCanvas.on('after:render', function () {	    if (timeout==0) {	        	timeout = setTimeout(function () { groundTexture.update();timeout=0 }, 10);    }    else {	            }});

http://www.babylonjs-playground.com/#9U086#35

 

What do you think?

 

Thanks for you help.

[iiceman]

Sure, seems good to me. So does that actually solve the problem? Did you test in IE, too?

[lothar]

It's not as good as in Chrome but alot better than before. Thanks for you help!

[ozRocker]

I know this is old.  I'm trying to do the same thing but the playground doesn't work.  I fixed the link to the fabric.js file so there's a new playground here http://www.babylonjs-playground.com/#9U086#114 but what isn't working is moving around the fabric objects.  clientX and clientY seem to be correct because the mouse overs are in the right spot but the position of the "text" element has some big offset that's throwing it completely off.  I don't know what this offset is or even when to apply it.  Any ideas?

Edited January 16, 2017 by ozRocker
Updated playground to use latest fabric.js version

[dbawel]

    Texture.update(invertY); ?

DB

EDIT - Never mind - I misunderstood the issue. I have good performance on all devices from android to IOS - so I will look further.

[ozRocker]

I found a problem in the _translateObject() function which is what moves the object.  The position seems to alternate from valid position to invalid position like this:

left: 202  top: 710
left: 1180  top: 243
left: 201  top: 710
left: 1179  top: 243
left: 197  top: 710
left: 1177  top: 243
left: 194  top: 710
left: 1175  top: 243

I can do a quick fix for this instance by filtering out "left" values greater than 1,000 which results in a working playground here http://www.babylonjs-playground.com/#9U086#116

However, that's just a temporary fix.  Still trying to find the root of the problem.

Edit:

I have a feeling this is getting called twice for every movement, like the "mousemove" event is triggered twice

[ozRocker]

I tracked down where its being called twice and its in the "_onMouseMove" function in the fabric library.

I changed that function to this:

    fabric.Canvas.prototype._onMouseMove = function (e) {
		if (arguments.callee.caller === null) {
			return;
		}
	  !this.allowTouchScrolling && e.preventDefault && e.preventDefault();
      this.__onMouseMove(e);
    }

I was just mucking around, trying to find the calling function.  _onMouseMove gets called by the getEvent() function we previously specified, but it gets called again and the calling function is null (wtf??) so I just made it return when that happens, and it works!  So I'm still not sure why this gets called twice (once from getEvent() and another from somewhere unknown) but I stopped that happening and it works in all cases http://www.babylonjs-playground.com/#9U086#117