Examples: Add transition effect.

[linbingquan]

Related issue: #XXXX

Description

refactor Transition to RenderTransitionPass.js.

If this PR has any problem, please tell me.

[Mugen87]

For testing: https://rawcdn.githack.com/linbingquan/three.js/dev-transition/examples/webgl_postprocessing_crossfade.html

With this refactoring the FPS falls into the 40-50 FPS range during the transition. With the existing version on dev, I get straight 60 FPS. Do you mind having a look?

[linbingquan]

For testing: https://rawcdn.githack.com/linbingquan/three.js/dev-transition/examples/webgl_postprocessing_crossfade.html

With this refactoring the FPS falls into the 40-50 FPS range during the transition. With the existing version on dev, I get straight 60 FPS. Do you mind having a look?

Thank you for your test. I repeated the same situation on my laptop.

TBH, my laptop is not high performance, only has 30FPS. The difference in values is not significant.

I checked the code, I found unnecessary animate() and removed it, call renderer.setAnimationLoop( animate ) at the end.

I tested them locally and the FPS values were close, but I am not sure it will solve the problem.

[Mugen87]

I tested them locally and the FPS values were close, but I am not sure it will solve the problem.

The latest version seems to be fixed 👍 .

[mrdoob]

Should we rename webgl_postprocessing_crossfade.html to webgl_postprocessing_transition.html?

[Mugen87]

Sounds good to me!

[linbingquan]

Should we rename webgl_postprocessing_crossfade.html to webgl_postprocessing_transition.html?

Let me to do it.

[Mugen87]

@linbingquan It seems the effect is broken after the first transition, see https://threejs.org/examples/webgl_postprocessing_transition.

Do you mind having a look?

[Mugen87]

This is actually a regression of #28391 since tween.js now animates the transition parameter differently.