aframe
aframe copied to clipboard
aframevr
Introduce postprocessing API
This is a proposal for a built-in post-processing API. Setting up post-processing in a comprehensive manner that works well in 2D and VR modes is not trivial to do. It requires tight integration with the render loop. A built-in effects API will help raise the visual quality of the content and will make very easy for everybody to experiment with the different effects while ensuring good performance. At first we would not have a public API for user defined effects since many are not suitable for stereo rendering. By providing the effects we can control how and what order are applied to guarantee consistent results and FPS. Once we settle on an API we can consider open it up.
The API is built by defining effect- prefixed scene level components for each effect. The order they are applied is fixed and independent on how and when they are defined. e.g:
<a-scene effect-bloom="strength: 1.6" effect-sepia background="color: black">
<a-box color="white" position="0 1.6 -2"></a-box>
</a-scene>
This PR just contains a bloom and sepia effects but I will expand before merge. I would love to hear what effects people want to see first.
This PR just contains a bloom and sepia effects but I will expand before merge. I would love to hear what effects people want to see first.
SSAO please!
Having functionality based on a prefix and HTML attribute ordering is a bit magic. I would define the order effects: effects-bloom, effects-sepia.
The order does NOT depend on attribute position. The order is fixed and will be documented. e.g: 1. tint, 2. vignette, 3. sepia, 4. bloom... it won’t be user configurable
Sketchfab also has a fixed effects order: https://help.sketchfab.com/hc/en-us/articles/115000728943-Post-Processing-Filters?mobile_site=true
I would love to hear what effects people want to see first.
Santa is coming! :D My wish list, in order: SSAO, Screen space reflections, Chromatic Aberration, Noise/grain.
This is awesome and will give webVR visuals a much needed push! feiss's list is pretty much it, I think those are the most needed (SSAO above all). As a super low-priority one I'd suggest a glitch/digital distortion effect.
I would love to see effects related to simulations of how people would see aframe experiences with various vision problems. Filters for viewing red/green color blindness would be the first one I would appreciate! Reference: Be Kind to the Color Blind
THANK YOU!!!!! SSAO, Screen Space Reflections, Chromatic Abberation, Motion Blur would definitely be wanted. PLEASE PLEASE ADD DoF for 2D!!!!!
Looks great, color grading/tonemapping/color curves or however you like to call it would be high on the list for me.
Based on some basic paint.net effects I like, my favorites are:
Artistic - Ink, Oil, and Pencil Blurs - Gaussian, Motion, Radial Distortion - Crystalize, Tile Reflection, Dents Style - Edge Detect, Emboss
All should be animatable! :)
looks very nice but why not use the soucecode from Threejs examples as import ? like the https://github.com/mrdoob/three.js/blob/dev/examples/js/postprocessing/UnrealBloomPass.js
it would be possible with the webpack three plugin https://github.com/mrdoob/three.js/issues/9562#issuecomment-415022483
or maybe using this threejs https://github.com/vanruesc/postprocessing i only add some findings to this PR
some more shaders https://github.com/libretro/glsl-shaders
Hello, is this project still going on or did you drop it? We'd like to integrate post processing into our application (mainly for ssao and aa) and we'd like to know if it's possible or you stopped working on it because it's not feasible.
Any chance you could release the API just with bloom & sepia working? Been trying to get this working using aframe-effects.js to no avail :(
Thanks for all your hard work on making A-frame as great as it is!
I'm trying to implement/adapt the SSAO pass from the three.js example, but I cant seem to be able to get the depth texture. This is the snippet of my code in the render function:
this.quad.material = this.basic; this.basic.map = readBuffer.texture; renderer.render(this.scene, this.camera, this.beautyRenderTarget, true); this.depthRenderMaterial.uniforms[ 'tDepth' ].value = this.beautyRenderTarget.depthTexture;
The render target is initialized as following:
this.beautyRenderTarget = new THREE.WebGLRenderTarget( this.width, this.height ); this.beautyRenderTarget.texture.format = THREE.RGBFormat; this.beautyRenderTarget.texture.minFilter = THREE.NearestFilter; this.beautyRenderTarget.texture.magFilter = THREE.NearestFilter; this.beautyRenderTarget.texture.generateMipmaps = false; this.beautyRenderTarget.stencilBuffer = false; this.beautyRenderTarget.depthBuffer = true; this.beautyRenderTarget.depthTexture = new THREE.DepthTexture(); this.beautyRenderTarget.depthTexture.type = THREE.UnsignedShortType;
I tried to render the depth texture but it's all black. What am I doing wrong?
This is definitely something that's important and I wanted to poke this again. It's critical for something like water, where you want to have subsurface light scattering based on depth buffer as well as reflection from the surface. Three.js, however, requires a modification to the core rendering loop to access the post-processing code in this. Ideally, it would allow the render passes to be done in a user specified order. It would be a perfect place to have a kind of,
<!-The order of the elements could then tell you the order of applying the effects, top to bottom.->
<a-effects>
<a-effect effect-ssao></a-affect>
<a-effect effect-custom></a-effect>
<a-effect effect-bloom:"strength: 1.6"></a-affect>
<a-effect effect-sepia></a-affect>
</a-affects>
I suppose this isn't super critical however, as long as creators can get access to the effect composer, we can always include a parameter that allows the user to specify the order of post-processing effects. I know there's a bit of a problem waiting for the whole DOM to load with this, as I've had similar issues with the experimental version of a-sky-forge which is going to a more custom XML format to avoid giant inline commenting issues, but it's much easier to read as the number of applied post processing stages can become non-trivial and being able to comment out or swap around effects like the above could be really intuitive to how the render passes are applied.
Well at least that seems due in r112, that will be a nice Christmas present :D.
This work depends on mrdoob/three.js#15840
@dmarcos it seems that mrdoob/three.js#15840 got closed.
Now that's what I wanna hear! What an awesome birthday present :D. Gonna have so much fun with this ^_^. Both my sky and water could use some post-processing magic.
https://github.com/mrdoob/three.js/pull/15840 was closed in favor of https://github.com/mrdoob/three.js/pull/18846 which is still open
Huge :+1: for this! Aframe offers dynamic shadows, PBR materials, and so much to let you not only create a scene but one of high visual quality. But without post-processing effects like ambient occlusion, bounce lighting, bloom, depth of field, motion blur and so on... the work is only half done and a creator remains limited in terms of realism. I really hope this or a similar PR makes it in some form to unlock the full potential of what Aframe can be used for.
Still depends on THREE work as mentioned in https://github.com/aframevr/aframe/pull/3645#issuecomment-602113248
https://github.com/vanruesc/postprocessing works fine with threejs and aframe in webxr
wups this was not right it does not work in webxr for now
