Viewport Texture pixelation/bluriness

ksjogo

Hey everyone, I did build a custom scene transistion into my app. When leaving a scene I grab the current rendered texture like this

    var oldTex = GetViewport().GetTexture();
     var oldWidth = oldTex.GetWidth();
     var oldHeight = oldTex.GetHeight();
     var scalex = 480.0f / oldWidth;
      var scaley = 320.0f / oldHeight;
      var img = oldTex.GetData();
      img.FlipY();
      var tex = new ImageTexture();
      tex.CreateFromImage(img);
      Global().LastSceneSnapshot = tex;
      GetTree().ChangeScene(scene);

The next scene will grab the tex and do an animation with it. But due to the scene load flicker, I am also rendering it on top for a single frame:

         var layer = new CanvasLayer();
        layer.Layer = 99;

        var tmp = new Sprite();
        tmp.Texture = tex;
        tmp.Position = new Vector2(240, 160);
        tmp.Scale = new Vector2(scalex, scaley);
        GD.Print(tmp.Scale);
        layer.AddChild(tmp);

        GetTree().GetRoot().AddChild(layer);

        Global().LastSceneLayer = layer;
        Global().LastScene = this;

This works perfectly within the editor build, but I have a problem on web builds which is visible in the two attached images. Before the scene switch is trigger: before And then with the captured texture on top. after The web version has a weird bluriness within the captured texture. Does anyone have any tips on how to fix this?

TwistedTwigleg

Looking at the picture, it looks like the captured texture has linearly interpolation/filtering enabled. I think that is what is causing the blurry image, especially since it appears that ImageTexture objects have filtering enabled by default. You should be able to remove this by adding tex.flags = tex.FLAGS_MIPMAPS | tex.FLAGS_REPEAT after line 9 in the first code snippet.

ksjogo

Thank you for the pointer TwistedTwigleg, indeed setting the flags improved the rendering. I played a bit with different combinations and no flag/0 as value seems to look best.

I suppose there is no good way to fix the antialiasing of the text, as it is aliased/hinted for the the rendered position and even the larger viewport, whereas the texture I grab I then need to transform/sample down to my 480x320 design space.

TwistedTwigleg

How is the text rendered? Is it using a custom font and something like a Label node? If so, you should be able to turn filtering/anti-aliasing off with one of the checkboxes in the inspector when you are inspecting the Font resource.