Jump to content

Dynamic Texture Performance


Recommended Posts



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,





Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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...

Link to comment
Share on other sites

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,


Link to comment
Share on other sites

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 :)

Link to comment
Share on other sites

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)

Link to comment
Share on other sites

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 {	            }});



What do you think?


Thanks for you help.

Link to comment
Share on other sites

  • 1 year later...

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 by ozRocker
Updated playground to use latest fabric.js version
Link to comment
Share on other sites

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.


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

Link to comment
Share on other sites

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) {
	  !this.allowTouchScrolling && e.preventDefault && e.preventDefault();

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


Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...