Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Render Texture: draw method doesn't render display object with filter if parent is shifted #1088

Open
Adolio opened this issue Aug 2, 2021 · 8 comments
Labels

Comments

@Adolio
Copy link
Contributor

Adolio commented Aug 2, 2021

Hi Daniel,

Me again 🙄...

I found an issue related to drawing a display object with a filter assigned to it. Apparently the matrix is not correctly computed when the parent (root) is shifted. Happily I have a piece of code to reproduce it easily.

I'm still trying to implement a post-effect stack and this issue is really blocking me because I cannot render my whole scene into a RenderTexture to then apply extra FragmentFilters or a custom MeshStyle.. 😬 (edit: I found a workaround, see next comment)

I hope this is fixable 🤞

Best,
Aurélien


Description

When rendering a DisplayObject with a FragmentFilter applied on it in a RenderTexture, the object position is not correct if the parent of the object is shifted.

Code to reproduce

The following code reproduces the issue on my side:

package
{
	import starling.animation.IAnimatable;
	import starling.core.Starling;
	import starling.display.Image;
	import starling.display.Quad;
	import starling.display.Sprite;
	import starling.filters.BlurFilter;
	import starling.filters.GlowFilter;
	import starling.textures.RenderTexture;

	public class PostEffectTest extends Sprite implements IAnimatable
	{
		private var _renderingTexture:RenderTexture;
		private var _renderingImage:Image;
		private var _camera:Sprite
		private var _entity:Quad;

		public function PostEffectTest()
		{
			var offset:Number = 100; // set to 0 and it works as expected

			// camera
			_camera = new Sprite();
			_camera.x = -offset;

			// entity
			_entity = new Quad(100, 100, 0xff0000);
			_entity.alignPivot();
			_entity.x = offset + Starling.current.stage.stageWidth * 0.5;
			_entity.y = Starling.current.stage.stageHeight * 0.5;
			_entity.filter = new GlowFilter(0x00ff00); // remove this line and it works
			_camera.addChild(_entity);

			// render
			_renderingTexture = new RenderTexture(800, 480, false);
			_renderingTexture.clear(); // might prevent Error #3605: Sampler 0 binds an invalid texture. (https://github.com/Gamua/Starling-Framework/issues/1087)
			_renderingImage = new Image(_renderingTexture);
			_renderingImage.filter = new BlurFilter();
			addChild(_renderingImage);

			// animation setup
			Starling.current.juggler.add(this);
		}

		public function advanceTime(passedTime:Number):void
		{
			_entity.rotation += Math.PI * passedTime;

			_renderingTexture.draw(_camera);
			_renderingImage.setRequiresRedraw(); // required to update the image
		}
	}
}

Here is the faulty result with an offset of 100 applied on the camera (-) and the entity (+):

withFilter

If the offset is set to 0 you get the expected result:

withoutOffset

If the GlowFilter applied to the entity is removed then you get the correct result (obviously without the expected filter):

withoutFilter

@Adolio Adolio changed the title Render Texture: draw method doesn't render display object with filter Render Texture: draw method doesn't render display object with filter if parent is shifted Aug 2, 2021
@Adolio
Copy link
Contributor Author

Adolio commented Aug 3, 2021

I just found a workaround and probably the root cause of this issue 😀

Apparently the transform of the root display object is not took into account when this later object is not added to the stage while drawing (but only for DisplayObjects with filters).

Workaround

addChild(_camera); // adding the drawn object to the stage solves the issue!
_renderingTexture.draw(_camera);
removeChild(_camera); // remove the drawn object to prevent rendering it twice

@PrimaryFeather Is this the intended behavior?

@Gamua Gamua deleted a comment from MNiceback Aug 3, 2021
@PrimaryFeather
Copy link
Contributor

PrimaryFeather commented Aug 3, 2021

Haha, Aurélien, what are you doing to me? This is the worst possible combination to debug, filter plus render texture! 😂

I just tried to debug your sample to get to the root of the issue. It definitely has something to do with the object not being part of the stage, though I haven't been able to exactly put my finger on the problem.

When the current render target is a render texture, the fragment filter logic should replace all stage-related values with those of the render texture, as it effectively becomes the viewport in that case. I think I remember hitting a wall in that area, as my comment in this line shows.

In that case, the only solution would have been a breaking change in the DisplayObject class, which is a no-go, so I decided to postpone this change for Starling 3.0. 😉

To be honest, I'm not 100% sure it's exactly this issue. I'll try to look into it again with a clear head — getting my mind into this matrix stuff again is not easy. 🤪 But it seems very likely, and that your workaround fixes the problem indicates that it's connected.

At least you've got a workaround now!
The other thing you could do instead is to not use a render texture, but instead add a filter to your root object (whatever is "Starling.root") instead. In that case, every object can stay on the stage, and the FragmentFilter class can even optimize the filter bounds and not draw anything that's outside the stage.

However, if that's an alternative depends on what exactly you want to achieve.

@MNiceback
Copy link

MNiceback commented Aug 3, 2021 via email

@PrimaryFeather
Copy link
Contributor

PrimaryFeather commented Aug 3, 2021 via email

@Adrian-S
Copy link

Adrian-S commented May 3, 2022

I'm having the same issue, or similar.

When I apply a ColorMatrixFilter on and ImageLoader the image disapears. If I apply it on it's parent it works but has unexpected results (stuff gets moved around).

All gets drawn to a RenderTexture, and workaround did not work for me.

I will probably need to create multiple color textures for this. Is there a way to apply a filter to a texture and get a new texture out of it?

@PrimaryFeather
Copy link
Contributor

PrimaryFeather commented May 3, 2022

When I apply a ColorMatrixFilter on and ImageLoader the image disapears. If I apply it on it's parent it works but has unexpected results (stuff gets moved around).

Did you try adding the filter only in the Event.COMPLETE event handler? Perhaps the filter gets drawn too soon, while there's no texture data available yet?

In any case, here is a simple utility function that allows you apply a filter directly to a texture.

@Adrian-S
Copy link

Adrian-S commented May 3, 2022

I gave it a 2 seconds timeout where I can see the object rendered corectly, then it's drawn and replaced with the texture.

For me it's a sort of cache where I reduce the number of objects from 35 (up to 80) to just 7. I've allready generated a new texture, but the utility function could help too.

Thank you.

@PrimaryFeather
Copy link
Contributor

PrimaryFeather commented May 3, 2022

I gave it a 2 seconds timeout where I can see the object rendered corectly, then it's drawn and replaced with the texture.

Hm, okay. Sorry for the troubles – this is absolutely something that should work. I hope I'll find the time to take another look at this problem.

For me it's a sort of cache where I reduce the number of objects from 35 (up to 80) to just 7. I've already generated a new texture, but the utility function could help too.

Okay! It's definitely a smart idea to use RenderTextures as a cache to simplify the scene. 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

4 participants