FBO / Copying Stage Texture

[autr]

Hello, this is not an issue per-se, so apologies if this would be better posted on the forum.

Expected Behavior

I’ve been struggling a while now to find a way to “copy” the stage / canvas texture and reuse it as an input texture.

The end goal is to create video feedback effects (similar to “trails”) - where the previously drawn frame is used inside the stage with filter shaders.

In non-JS creative coding frameworks the flow would be: create FBO -> render stage into FBO -> use FBO texture.

Current Behavior

With PIXI I’ve tried following various multiple canvas, ping-pong buffer and dual PIXI.Renderer examples, but get two outcomes:

• Error: Source and destination textures of the draw are the same - ie. seems maybe just a reference to the same texture?
• No feedback is happening - ie. the input texture is not actually the-previously-drawn-frame

Possible Solution

I had success with: extract base64 -> load into canvas -> load canvas into Texture - but this is obviously very slow.

Would love to know how best to use PIXI.Renderer to get this outcome.

Steps to Reproduce

Referencing some other issues, in case others are also trying to work this out:

#5216
#5259
#5411
#1366
#4552

Thank you!

Environment

Chromium 93
pixi.js ^6.1.3
MacOS

[ivanpopelyshev]

Hi! pixi-layers has inherent double-buffering, ping-pong stuff: https://pixijs.io/examples/#/plugin-layers/trail.js

its using renderTextures inside, so yeah, its possible, its just you did something wrong, not everyone can do double-buffering ;)

there's no "copy texture" in pixi, you have to 1. make a sprite with texture 2. call renderer.render(spriteWithFirstTexture, {renderTexture: secondTexture } );

Summary:

1. its possible through renderTexture, people did it many times, its in plugin
2. if it doesnt work for you, if you got this error - please post whole demo, I can tell you what is wrong with it

[autr]

Thanks @ivanpopelyshev ! I see this trails example is from v4/v5 and using flags like useDoubleBuffer and useRenderTexture, but this isn't in v6, so I am trying again with RenderTexture.

My code is a bit spread out, so I'll try my best to show it.

I pass the texture from each source into the uniforms of a shader which is applied to a single Graphic object on the stage:

// setup...


		let w = window

		console.log(`[App] 🐣  running setup...`)

	    PIXI = w.PIXI = (await import('pixi.js'))

	    PIXI.settings.TARGET_FPMS = 1000 / 30

	    let {width,height} = $_project

		let _app = w._app = new PIXI.Application({
			view: onscreen,
			antialias: false,
			transparent: true,
			resolution: 1,
			autoStart: false,
			preserveDrawingBuffer: true
		})

		let _container = w._container = new PIXI.Container()

		await _app.renderer.resize(width, height)

		$_uniforms.RENDERSIZE =  [ width, height ]

		let _loader = w._loader = new PIXI.Loader()
		await _loader.reset()

		$_inited.pixi = true

		let _graphics = w._graphics = new PIXI.Graphics()
		_graphics.beginFill(0xFFFF00)
		_graphics.drawRect(0, 0, width, height)


		let _texture = w._texture = PIXI.RenderTexture.create({ width, height })

		_container.addChild( _graphics )
		_app.stage.addChild( _container )

		let ticker = PIXI.Ticker.shared
		ticker.add( delta => {
			_app.renderer.render( _app.stage )
			_app.renderer.render( _app.stage, { renderTexture: _texture } )
		});

// later...


$_uniforms[ 'INPUT' ] = w._texture

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.