FazBrowse GitHub Viewer | Trending |
URL:
| Home
Tools: [Download Repo ZIP]   [Original HTTPS Page]

Post-Process example by enzofrancescaHM · Pull Request #5648 · aframevr/aframe · GitHub

Post-Process example - #5648

Merged
dmarcos merged 60 commits into
aframevr:masterfrom
enzofrancescaHM:master
Feb 18, 2025
Merged

Post-Process example#5648
dmarcos merged 60 commits into
aframevr:masterfrom
enzofrancescaHM:master

Conversation

Copy link
Copy Markdown
Contributor

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

Copy link
Copy Markdown
Contributor

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

Copy link
Copy Markdown
Contributor Author

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.

Comment thread examples/post-process/index.html Outdated
Comment thread examples/post-process/index.html Outdated
Comment thread examples/post-process/bloom.js Outdated

Copy link
Copy Markdown
Contributor

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.

Comment thread examples/post-process/bloom.js Outdated

Copy link
Copy Markdown
Contributor

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 commented Jan 30, 2025

Copy link
Copy Markdown
Member

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

Copy link
Copy Markdown
Contributor Author

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.

enzofrancescaHM and others added 4 commits January 30, 2025 18:46
Typo

Co-authored-by: Noeri Huisman <8823461+mrxz@users.noreply.github.com>
deleted useless tick function

Co-authored-by: Noeri Huisman <8823461+mrxz@users.noreply.github.com>

dmarcos commented Jan 31, 2025

Copy link
Copy Markdown
Member

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

Comment thread examples/post-process/bloom.js Outdated
Comment thread examples/post-process/bloom.js Outdated
Comment thread examples/post-process/bloom.js Outdated
Comment thread examples/post-process/bloom.js Outdated
Comment thread examples/post-process/bloom.js Outdated
Comment thread examples/post-process/bloom.js Outdated
Comment thread examples/post-process/bloom.js Outdated
Comment thread examples/post-process/bloom.js Outdated
Comment thread examples/post-process/index.html Outdated
Comment thread examples/post-process/index.html Outdated
Co-authored-by: Vincent Fretin <vincent.fretin@gmail.com>
Comment thread examples/assets/models/fancy-car.glb Outdated

vincentfretin left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Choose a reason Spam Abuse Off Topic Outdated Duplicate Resolved Low Quality

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

dmarcos commented Feb 17, 2025

Copy link
Copy Markdown
Member

One more nit and ready to go:

#5648 (comment)

@@ -0,0 +1,36 @@
import AFRAME from 'aframe';
AFRAME.registerComponent('effect-controls', {
schema: {

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Choose a reason Spam Abuse Off Topic Outdated Duplicate Resolved Low Quality

Also the file uses 4 spaces indentation instead of 2

dmarcos commented Feb 18, 2025
edited
Loading

Copy link
Copy Markdown
Member

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

Copy link
Copy Markdown
Contributor Author

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 commented Feb 18, 2025

Copy link
Copy Markdown
Member

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 commented Feb 18, 2025

Copy link
Copy Markdown
Member

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

dmarcos merged commit 258de6c into aframevr:master Feb 18, 2025

Copy link
Copy Markdown
Contributor Author

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.

Copy link
Copy Markdown

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.

Copy link
Copy Markdown
Contributor

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.

Copy link
Copy Markdown

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.

This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

7 participants


Back | FazBrowse Home | New Git URL