Post-Process example

[enzofrancescaHM]

Description:
Minimal example to show the possibility of implementing Post-Processing in A-Frame.
NOTE: for Post-Processing to work also in VR mode, supermedium/three.js#20 must be implemented in supermedium three.
Changes proposed:
-index.html running a simple scene with simple geometries with and without emission
-bloom.js, a minimal implementation of Bloom effect

[vincentfretin]

Where does all those 1087 lines of code comes from?
You should be able to import the postprocessing library with an importmap, I advice you to base your example on the new importmap example https://github.com/aframevr/aframe/blob/master/examples/boilerplate/importmap/index.html and write a small bloom component of a few lines.
The bloom effect integration in r3f is just this https://github.com/pmndrs/react-postprocessing/blob/master/src/effects/Bloom.tsx

[enzofrancescaHM]

Where does all those 1087 lines of code comes from? You should be able to import the postprocessing library with an importmap, I advice you to base your example on the new importmap example https://github.com/aframevr/aframe/blob/master/examples/boilerplate/importmap/index.html and write a small bloom component of a few lines. The bloom effect integration in r3f is just this https://github.com/pmndrs/react-postprocessing/blob/master/src/effects/Bloom.tsx

Yes, thanks for pointing that, I completely missed the new feature of A-Frame to use importmap. Sorry for that, I've reduced the bloom.js to the bare minimum to work.

[vincentfretin]

Yes, thanks for pointing that, I completely missed the new feature of A-Frame to use importmap

That new importmap example exist since 2 days ago ;) I'm glad I did it so we can have a simpler example here without copying all the code.

[vincentfretin]

Didn't we agree from supermedium/three.js#20 to use
https://github.com/pmndrs/postprocessing that is more performant than the three/addons effect composer?

[dmarcos]

Didn't we agree from supermedium/three.js#20 to use https://github.com/pmndrs/postprocessing that is more performant than the three/addons effect composer?

Whatever yields 90fps with the simpler code and least amount of dependencies

[enzofrancescaHM]

Didn't we agree from supermedium/three.js#20 to use https://github.com/pmndrs/postprocessing that is more performant than the three/addons effect composer?

pmndrs does not work in VR at the moment. I have opened tickets there, but at the moment no one is working on it.

[dmarcos]

I merged THREE changes and updated A-Frame so should work on top of master.

Can you put the examples under showcase and rename to post-processing: showcase/post-processing?

Thanks so much for all the effort

[vincentfretin]

I added the enabled prop in bloom component. You can use it in effect-controls

[dmarcos]

One more nit and ready to go:

#5648 (comment)

[dmarcos]

Also the file uses 4 spaces indentation instead of 2

[dmarcos]

effect-controls.js not passing the linter. needs adjustments. Comments in line:

https://github.com/aframevr/aframe/pull/5648/files#diff-5b6886b808dbe9941cd2151cf409ba3909afe015f4cec532df22e66a0b6ffd68

FYI. Linter should not let you commit if everything working as expected in your local setup

[enzofrancescaHM]

yeah yeah, my bad, too many different projects with different setups. I usually run npm run lint:fix before committing, but for the 2 spaces indentation it is useless. Maybe we can add some prettier rules to the prettier rc like "prettier.tabWidth": 2, "prettier.useTabs": true,

[dmarcos]

yeah yeah, my bad, too many different projects with different setups. I usually run npm run lint:fix before committing, but for the 2 spaces indentation it is useless. Maybe we can add some prettier rules to the prettier rc like "prettier.tabWidth": 2, "prettier.useTabs": true,

@vincentfretin looks we don't have (lost?) indentation rules?

[dmarcos]

Thanks so much and for the patience. Usually first contributions don't get so involved 😄 Thanks for sticking to it and congrats

[enzofrancescaHM]

Thanks so much and for the patience. Usually first contributions don't get so involved 😄 Thanks for sticking to it and congrats

Thanks to you and this wonderful community. I use A-Frame extensively, it seems to me fair to return something back to the community.

[jywarren]

Hi all, congrats on this fantastic work. I had been trying to get depth of field (bokeh) working with a-frame for... several years! Now it does, and on top of the bloom effect example (both running together): https://jywarren.github.io/sfpc/blur

Just wanted to say thanks!

I'm going to try to get volumetric lighting / god rays working next, although seems that'll be a bigger challenge as i haven't seen an EffectComposer-based example of that yet, so it'll be more involved.

[cabanier]

Has this been tested on other VR devices such as PCVR and AVP?
I believe AVP works better if the experience exports a depth buffer.

[jywarren]

It works on a smartphone-based Google Cardboard. I don't have other VR devices to test on. But it's smooth on a Pixel 6a in stereo mode with both effects enabled, for what it's worth. I did file an issue - #5677 about screenshots as well.