GaussianBlur Node lags behind one frame when used with Reflector

[NoxDawnsong]

Description

When using the GaussianBlur Node to blur the texture of a reflector (for example to simulate roughness), the blur causes the texture to be one frame behind. This is especially visible with fast and/or user-controlled movement.

Reproduction steps

1. Create Reflector
2. Pass Reflector to GaussianBlur
3. Pass result of this to outputNode of Material of geometry that shows the reflection

Code

import { gaussianBlur } from 'https://esm.sh/three/addons/tsl/display/GaussianBlurNode.js';
import {
  vec3, vec4,
  output, reflector,
  } from 'https://esm.sh/three/tsl';
import {
  Scene, PerspectiveCamera, WebGPURenderer,
  CircleGeometry, PlaneGeometry, Mesh,
  MeshBasicNodeMaterial, MeshPhongNodeMaterial,
  DoubleSide, Object3D,
  Vector3} from 'https://esm.sh/three/webgpu';
console.log("checkmate", gaussianBlur, reflector)

Object3D.DEFAULT_UP = new Vector3(0, 0, 1)

const scene = new Scene();
const camera = new PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

const renderer = new WebGPURenderer({antialias: true, alpha: true});
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

camera.position.y = -12
camera.position.z = 15;
camera.rotation.x = 0.6

const rimGeometry = new CircleGeometry(1.85, 128)
const rimMaterial = new MeshBasicNodeMaterial({ side: DoubleSide })

rimMaterial.colorNode = vec4(0.2, 1.0, 0.5, 1.0)
const rimMesh = new Mesh(rimGeometry, rimMaterial)

rimMesh.position.z = 0.1

scene.add(rimMesh)

const groundReflector = reflector({ resolutionScale: 1, generateMipmaps: true, bounces: false, samples: 4 });
const planeGeo = new PlaneGeometry( 300.1, 300.1 );

const blurDirect = gaussianBlur(groundReflector, 1, 1).mul(0.4)
const planeMaterial = new MeshPhongNodeMaterial( {
  					colorNode: vec3(1.0)
  				} )
planeMaterial.outputNode = blurDirect //groundReflector

const planeBottom = new Mesh( planeGeo, planeMaterial );

planeBottom.position.z = - 1.5;
planeBottom.add( groundReflector.target );

scene.add(planeBottom)



function resize() {

	const width = window.innerWidth;
	const height = window.innerHeight;

	camera.aspect = width / height;
	camera.updateProjectionMatrix();

	renderer.setSize( width, height );
  //renderer.render( scene, camera )
};

window.onresize = resize 

async function testRender() {
  await renderer.init()
  let frame=0;
  window.setInterval(()=>{
    frame++;
    camera.position.x=Math.sin(frame/2)*7;
    renderer.render( scene, camera )
  }, 1000)
}

testRender()

Live example

https://codepen.io/NoxDawnsong/pen/zxBMzvm

Screenshots

No response

Version

r182

Device

Desktop

Browser

Chrome

OS

Linux

[NoxDawnsong]

After putting some logs into the onBeforeRender of the reflector and updateBefore of the GaussianBlur, i confirmed my suspicion that these are called in the wrong order. The GaussianBlur renders first, thus processing outdated data.

I will attempt calling the reflectors onBeforeRender manually to see wether this does solve the problem, although i'd still need to prevent the automatic call afterwards, least i give away rendertime.

[NoxDawnsong]

Unfortunately, just putting groundReflector._reflectorBaseNode.updateBefore(renderer, scene, camera) before the render-call does not work there.

I might try to implement a Reflector that blurs its texture itself instead.