Jump to content

BABYLON.SceneOptimizer: Improving render quality?


Recommended Posts

I've been playing with BABYLON.SceneOptimizer. It's great to be able to reduce the render quality in response to low FPS. I'd also like to be able to UPGRADE the quality if the FPS recovers. For example, if I start running another application in the background that's keeping my computer busy, the render quality should decrease to compensate for the lower FPS. But once I close the background application and the FPS increases, I'd like to restore the old quality.


Some of the built-in optimization functions could be easily adapted to upgrade quality, but, if I'm reading the js code correctly, BABYLON.TextureOptimization permanently decreases the texture resolution. Is that right? In general, is there any way to use the existing BABYLON.SceneOptimizer to also upgrade quality when appropriate?


I've done some preliminary experiments, thinking I could store the original textures in an array for later restoring, but I can't even resize existing textures without going through BABYLON.TextureOptmization. Here's some example code: http://www.babylonjs-playground.com/#KYPUJ


Can anyone tell me why the texture is not being resized in the sample code?


Thanks for all your help!

Link to comment
Share on other sites

Well, that would definitely explain why it doesn't work! :) I assumed this function exists because of this code from BABYLON.TextureOptimization (babylon.sceneOptimizer.js):

    var TextureOptimization = (function (_super) {        __extends(TextureOptimization, _super);        function TextureOptimization(priority, maximumSize) {            var _this = this;            if (priority === void 0) { priority = 0; }            if (maximumSize === void 0) { maximumSize = 1024; }            _super.call(this, priority);            this.priority = priority;            this.maximumSize = maximumSize;            this.apply = function (scene) {                var allDone = true;                for (var index = 0; index < scene.textures.length; index++) {                    var texture = scene.textures[index];                    if (!texture.canRescale) {                        continue;                    }                    var currentSize = texture.getSize();                    var maxDimension = Math.max(currentSize.width, currentSize.height);                    if (maxDimension > _this.maximumSize) {                        texture.scale(0.5);                        allDone = false;                    }                }                return allDone;            };        }        return TextureOptimization;    })(SceneOptimization);

The "texture" variable, taken from scene.textures, isn't the same kind of texture used in materials, then?





Link to comment
Share on other sites

No worries Deltakosh! I know how hard it can be to keep track of so many functions, especially as a library gets more and more complex.


My plan isn't to scale up the image resolution. My plan is to store all the original textures in an array and then scale down from there (always from the originals) depending on the current FPS. But I can't get resized textures to appear on their respective meshes. I think it's likely I'm overlooking something obvious. This link illustrates my current (flawed) approach to resizing textures: http://www.babylonjs-playground.com/#KYPUJ


As you can see in the example, the texture on the sphere doesn't change when I resize. Thanks!

Link to comment
Share on other sites

  • 2 years later...

Seems silly to be following up two years after this question was originally posted, but I once again need to resize textures in babylonjs. If scale() does not apply to standard textures, then how is BABYLON.TextureOptimization able to scale all the textures in the scene? I'd now like to be able to create a function that resizes all the textures on the fly, independent of scene optimization. Something like resizeAllTextures(scene, maxWidth). Is it possible? This doesn't work:

for (var index = 0; index < scene.textures.length; index++) {
    var texture = scene.textures[index];            
    var currentSize = texture.getSize();
    var maxDimension = Math.max(currentSize.width, currentSize.height);
    var scale = 128.0 / maxDimension;
    if (scale < 1.0) {


Link to comment
Share on other sites

Very handy function! But it seems it has to be called early in the load process. See https://www.babylonjs-playground.com/#H52JTC#7

In that example, the first resize works great, but when I try to resize the textures again later (on click), it doesn't work. 

I show a settings page when the user starts my app. The scene begins to load immediately in the background. One of the options on the settings page is to use low-res textures. But by the time the user presses "Start" on that page, the load process in the background has progressed to the point that the texture resize doesn't work.

Does that make sense? Hopefully the PG example shows what I mean... Thanks!

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