-
-
Notifications
You must be signed in to change notification settings - Fork 4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Post-Process example #5648
base: master
Are you sure you want to change the base?
Post-Process example #5648
Conversation
Where does all those 1087 lines of code comes from? |
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. |
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. |
Didn't we agree from supermedium/three.js#20 to use |
Whatever yields 90fps with the simpler code and least amount of dependencies |
pmndrs does not work in VR at the moment. I have opened tickets there, but at the moment no one is working on it. |
Typo Co-authored-by: Noeri Huisman <[email protected]>
deleted useless tick function Co-authored-by: Noeri Huisman <[email protected]>
I merged THREE changes and updated A-Frame so should work on top of master. Can you put the examples under Thanks so much for all the effort |
examples/post-process/bloom.js
Outdated
this.scene = this.el.object3D; | ||
this.renderer = this.el.renderer; | ||
this.camera = this.el.camera; | ||
this.composer = new EffectComposer(this.renderer); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Instead of recreating EffectComposer
, RenderPass
and UnrealBloomPass
each update, they can be created once in init
and only updated here.
examples/post-process/bloom.js
Outdated
}, | ||
bind: function () { | ||
const render = this.renderer.render; | ||
const system = this; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nitpick: this isn't a system, probably better to name it self
.
examples/post-process/bloom.js
Outdated
* Unreal Bloom Effect | ||
* Implementation for A-Frame | ||
* Code modified from Akbartus's UnrealBloomPass.js | ||
* https://github.com/akbartus/A-Frame-Component-Postprocessing |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Given that the source is MIT licensed, the original copyright and license notice should be included.
examples/post-process/index.html
Outdated
"imports": { | ||
"aframe": "../../dist/aframe-master.module.min.js", | ||
"three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js", | ||
"three/addons/": "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/" |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It should be
"three": "../../../super-three-package/build/three.module.js",
"three/addons/": "../../../super-three-package/examples/jsm/",
like https://github.com/aframevr/aframe/blob/master/examples/boilerplate/importmap/index.html
so it uses the three version from node_modules.
examples/post-process/index.html
Outdated
shadow="type: pcfsoft; autoUpdate: true" | ||
background="color:black;" | ||
renderer="anisotropy:4; stencil:true; alpha:false; colorManagement:true; exposure:1.0;" | ||
bloomm="threshold: 1.0; strength: 0.6; radius: 1; exposure: 1.0"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Does the example still work? there is two m here.
Just know my PR was intended as a targeted fix and it will need to be reinstated eventually, and your avoidance specifically is why I put a $10,000 bounty and threw in the towel on the space and three.js entirely. |
@CodyJasonBennett any simple PR we can take in out fork while it’s discussed? |
No, I never got a chance to finish work there. For now, you can try tweaking the bloom kernel, upsampling to reduce overall throughput, and/or reducing the target framerate to minimize reprojection. Ideally, this would be done progressively since high-end headsets are modestly powerful in sustained performance, so you can get away with more bandwidth-hungry graphics in games. |
Is the current approach sensible for Quest 3 or is it something we should also improve? Wonder how much effort should go to Quest 2 |
If someone with a Quest 2 can suggest a few improvements on this example it will be super appreciated |
It looks good to me, and I outlined some options that I know allow compromise for low-powered devices. As I said, we'll later use pmndrs/postprocessing here. Ideally, without hacks if upstream improves. |
Yeah. thanks for the suggestions. Looking for someone with a Quest 2 handy that can test and commit some code to improve. We can have a path specific for low powered headsets (Maybe only Quest2 only worth considering?) |
Quest 3 also doesn't make framerate :-\ |
What example have you tried and how are you profiling? This example https://incluverse.eu/examples/bloomtest5.html gives me 90fps on Quest3 with the OVR Metrics Tool HUD |
I'd like to put a $500 bounty on this PR to be championed by those who are not affiliated with Meta and therefore have no ulterior incentive to shut down work that does not gain them vendor support. Thanks. |
That's the one I tried yesterday and it ran at 45. |
I'd be happy to personally issue headsets to reviewers if that helps to profile, but I will not entertain Rik any further. |
With OVR Metrics tool? My screen recording with https://incluverse.eu/examples/bloomtest5.html showing 90fps on Quest 3 90fps.mp4 |
Got my hands on a Quest 2. https://incluverse.eu/examples/bloomtest5.html yields 30fps in VR mode |
Can someone confirm my results with the OVR Metrics Tool HUD and https://incluverse.eu/examples/bloomtest5.html? Quest 3: Stable 90fps If we can bring those Quest2 FPS up we can merge this. Separate paths for Quest 2 and 3 would be acceptable. Once this merge. At first, instead of having a generic post-processing API we can have effects (built-in or in examples) that know perform well in VR. Starting with this bloom. |
If this isn't simply the result of reprojection and/or supersampling (remember MSAA is enabled, could have needless attachments and/or resolves), then I propose disabling post-processing for Quest 2 outright until we use a performant implementation like in pmndrs/postprocessing. Again, if this entire PR hinges around an unmaintained bloom effect from an example with suboptimal parameters, then it will never get completed except by pure accident. I will put a $500 bounty on the completion of this PR and can issue headsets to anyone willing, but I will not let Rik shoot down yet another PR, as I have reason to believe it's not in good faith nor in alignment with my contacts at Meta who should be working with us in the first place. |
Thanks so much. What's prevent us from using the Is there a |
This are my stats on a Quest 3 when that page is running: |
Who is your contact at Meta? |
Felix, who maybe promptly emailed earlier today. You'll have to explain to him why this has been in stasis for the past few years since they specifically asked me about this in New York, and I couldn't say whether there was ever any plan to reinstate changes rather than shut it down entirely. You've lost my trust entirely since it looked either in bad faith or not entirely transparent, and I'm simply tired of the distrust and dysfunction within Meta. You need to talk to each other and get out of your own way, and most of all, not thwart the ecosystem at large. That should also answer the question as to why you can't use pmndrs/postprocessing or any implementation as they are inherently broken without my fixes. |
Thanks for testing. How do you get those logs? Is then OVR Metrics Tool not a good way to measure FPS? |
Thanks. Can you list what additional fixes are needed? Happy for A-Frame to be the guinea pig and hopefully we can address some of the upstream concerns with working examples. |
I think you need to read and try my original PR, which has many breakdowns and examples. mrdoob/three.js#26160 |
Thanks! Felix and I sit next to each other and we already talked this through. I'm hoping to fix these performance issues during the three.js redesign. It seems they're willing to add a proper foundation so we can get efficient postprocessing. I certainly will pressure the w3c immersive group to add APIs to help here. |
I believe OVR metrics reflects what this service is reporting. |
In A-Frame we now have part (all?) of the changes in that PR: supermedium/three.js@3bc7bc0 What other PRs / changes we need on our side to implement |
Interesting. I think we are seeing different results for some reason. This is what I see with your command, Quest 3 and https://incluverse.eu/examples/bloomtest5.html Result matches what I see in the OVR Metrics Tool HUD. I'm in v72 if that makes any difference.
|
So instead you want people to test that all is well on everything, including emulator, but breaks on your devices? This isn't just post-processing, but anything offscreen rendering, and renderer state is permanently broken! Who are you to even decide this for everyone? Should we do feature detection to disable the most requested feature in three.js for iPhone too? I'm sure Apple themselves would be happy to see their own pages no longer work. My entire career in real-time graphics has been on handheld mobile/TBDR, and even without post-processing, I've used these (currently broken) codepaths to simply compromise and perform basic upsampling or blitting, which people should be doing in XR also. I couldn't disagree more with this notion, as you are actively gatekeeping in the process and preventing the rest of us from further improving this area. If you really want to shut down or remove anything, it should be three's (unmaintained) upstream implementation, not the whole ecosystem with it. That is why I find this in bad faith since the strategy here is self-sabotaging in my view, and I'm not willing to believe either of you didn't observe nor foresee this, nor acknowledge that this could be a simple combination of poor parameters.
There are no other PRs on our side; they must be made in pmndrs/postprocessing, and they can't be done without upstream improvements. This is what I mean by the ecosystem being in stasis, and it doesn't stop there but anything that uses offscreen rendering (shadows, impostors, LUTs -- although these should probably be parametric functions aside from color grading). Most of Drei is affected, for instance, and it would take many months to fix all the components. |
I'm happy to take those improvements if there's a reasonable path to maintain them until upstream concerns are resolved |
I don't think you understood what I meant, but those libraries I maintain in Poimandres, and upstream means three.js or mrdoob/three.js#26160, which is among the simplest PRs I've made to three.js and by far the most valuable at $10,000 since I thought that would motivate people to repeat my own work and see past this nonsense. It's not the most complicated to research or repeat, and the changes are still exhaustive today. I put an additional $500 here since I feel the same responsibility with aframe, and I only see Rik shutting this down no matter what I do myself. All of my time has been wasted, and I preach to deaf ears. Not letting that continue to happen. |
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