BABYLON.RenderTargetTexture weird issue

[Nico]

Hi !

I'm playing with BABYLON.RenderTargetTexture, and I've got a weird issue with Internet Explorer...

First here is my code (I may do something wrong, since I've recently started playing with textures):

var texture = new BABYLON.RenderTargetTexture("wholeScene", 2048, myScene);texture.renderList = myScene.meshes;texture.render();//I've first putted some code here, but you can see the issue without any line of code.texture.dispose();

All is working well on all browser except IE...

I am trying this on BabylonJS demos, and it's working like a charm for some demos like Spaceship, Blender, or Train, but not working for Dude, Heart or Hillvalley (my favorite demo!).

After disposing the texture, the scene disappear, and the canvas seems to show only the clearColor. I first thought that the problem come from the renderLoop which seems to be stoped, but it still running...

The problem appears just after texture.render(), without texture.dispose(), the scene seems to freeze.

 

Thanks for reading,

Nico.

[GameMonetize]

Hello,

 

could you share an example on jsfiddle?

[Nico]

I've tried to make an example with the issue, but I can't reproduce it by creating basic scene on the javascript side...

The only way to reproduce it is to use BABYLON.SceneLoader.Load, but I can't make it work on JSFiddle :/

 

But I've made an temporary online version using basic babylon demos (Dude and Blender), available here

Here is my javascript code used to handle button click, renderTargetTexture generation, and scene loading :

var canvas = document.getElementById("renderCanvas");var engine = new BABYLON.Engine(canvas);var scene;var loading = document.getElementById("loading");var loadSceneNewScene = function(folder, file){    if(scene){        scene.dispose();        engine.stopRenderLoop();    }    loading.innerHTML = "Loading scene ...";    BABYLON.SceneLoader.Load(folder, file, engine, function(newScene){        scene = newScene;        scene.executeWhenReady(function(){                    scene.activeCamera.attachControl(canvas);                        engine.runRenderLoop(function(){                scene.render();            });        });    }, function(e){        if(e.loaded  == e.total){            loading.innerHTML = "";        }    });};var loadSceneButtonCallback = function(e){    var folder = e.currentTarget.getAttribute("data-folder");    var file = e.currentTarget.getAttribute("data-file");        loadSceneNewScene(folder, file);};document.getElementById("createTexture").addEventListener("click", function(e){    var texture = new BABYLON.RenderTargetTexture("wholeScene", 128, scene);    texture.renderList = scene.meshes;    texture.render();    texture.dispose();});var buttons = document.getElementsByClassName("loadScene");var length = buttons.length;for(var i = 0; i < length; i++){    buttons[i].addEventListener("click", loadSceneButtonCallback);}

I have also tried to load a scene (and unload previous scene) when you click on a button, but it doesn't work if you have already loaded Dude scene and if you try to load Blender scene, I've got WebGL errors on Chrome console, it doesn't work on Firefox, BUT it works on Internet Explorer here...

You can see what I get on chrome console :

[Nico]

I've just found something, not sure if it's the proper way to do, but it works :

var texture = new BABYLON.RenderTargetTexture("wholeScene", 2048, myScene);texture.renderList = myScene.meshes;texture.render();//I've first putted some code here, but you can see the issue without any line of code.texture.dispose();engine.restoreDefaultFramebuffer();

Using a renderTargetTexture imply using the framebuffer, and engine.unBindFramebuffer seems to do nothing in my case (my texture doesn't need mipmap).

Does an engine.restoreDefaultFramebuffer call must be done at the end of a renderTargetTexture render() method ?

I could be wrong since this solution is a big lucky guess

 

EDIT: After some tests, the only line I needed in the restoreDefaultFramebuffer method was "this._gl.bindFramebuffer(this._gl.FRAMEBUFFER, null);" it allows to "unbind" the framebuffer previously bound.

[Nico]

If it is the right way to do, could I send you a pull request with this code :

BABYLON.Engine.prototype.unBindFramebuffer = function (texture) {        if (texture.generateMipMaps) {            var gl = this._gl;            gl.bindTexture(gl.TEXTURE_2D, texture);            gl.generateMipmap(gl.TEXTURE_2D);            gl.bindTexture(gl.TEXTURE_2D, null);        }        //line added        this._gl.bindFramebuffer(this._gl.FRAMEBUFFER, null);    };

[GameMonetize]

Sounds good to me

 

Basically rendertexture are designed to be used during a render loop. You register your render texture and babylon.js will call the render for you and then restore the framebuffer

 

but with your update, things are smoother

[Nico]

I have read the BABYLON.RenderTargetTexture.prototype.render method once again, and if my fix is applied, if you manipulate texture with WebGL calls you won't be able to do this anymore, since the framebuffer will be cleared before the "onAfterRender" call :

BABYLON.RenderTargetTexture.prototype.render = function () {        if (this.onBeforeRender) {            this.onBeforeRender();        }        [...]        // Bind        engine.bindFramebuffer(this._texture);        [...]        // Render        this._renderingManager.render(this.customRenderFunction, this.renderList, this.renderParticles, this.renderSprites);        // Unbind        engine.unBindFramebuffer(this._texture);        if (this.onAfterRender) {            this.onAfterRender();        }    };

I think there is 2 solutions, if my fix is applied, you need to call onAfterRender before unBindFramebuffer, or, I can call manually "this._gl.bindFramebuffer(this._gl.FRAMEBUFFER, null);" on my onAfterRender function, in this case, my fix won't be needed.

[GameMonetize]

I think we can invert the call to onAfterRender