When I apply any Pass to EffectComposer http://prntscr.com/u0io3g I get teeth on the edges, when without extra passes everything is smoothed out http://prntscr.com/u0ipbt
The default anti-aliasing of WebGL does only work if you directly render to screen (or the default framebuffer). When using EffectComposer, you have two options:
Apply an FXAA pass at the end of your pass chain.
Create the EffectComposer with instances of THREE.WebGLMultisampleRenderTarget (does not work with WebGL 1).
Below are two examples that demonstrate the usage of FXAA and multisampled render targets with three.js.
https://threejs.org/examples/webgl_postprocessing_fxaa.html
https://threejs.org/examples/webgl2_multisampled_renderbuffers
Related
NOTE: It appears I oversimplified my initial question. See below for the edit.
I'm trying to combine the technique shown in the clipping/stencil example of Three.js, which uses the stencil buffer to render 'caps' when clipping geometry, with an EffectComposer-based rendering pipeline, but I am running into some difficulties. A fiddle demonstrating the problem can be found at https://jsfiddle.net/2vc76ajd/1/.
The EffectComposer has two passes: a RenderPass and a ShaderPass using CopyShader (see code below).
composer = new EffectComposer(renderer);
composer.addPass(new RenderPass(scene, camera));
var shaderPass = new ShaderPass(CopyShader);
shaderPass.enabled = false;
composer.addPass(shaderPass);
The first renders the scene as usual, the latter merely copies the rendertarget onto a fullscreen quad. If I disable the ShaderPass everything works as intended: the geometry is clipped, and cutting planes are drawn in a different color:
When the ShaderPass is enabled by clicking the 'copy pass' checkbox in the upper right, however, the entire cutting plane gets rendered, rather than just the 'caps':
Presumably there is some interaction here between offscreen render targets and stencil buffers. However, I have so far been unable to find a way to have subsequent render passes look the same as the initial render. Can anyone tell me what I am missing?
EDIT: While WestLangley's answer solved my initial problem, it unfortunately doesn't work when you're using an SSAOPass, which is what I was doing before trying to simplify the problem for the question. I have posted an updated fiddle at https://jsfiddle.net/bavL98hf/1/, which includes the proposed fix and now toggles between a RenderPass or an SSAOPass. With SSAO turned on, the result is this:
I have tried setting stencilBuffer to true on all the render targets used in SSAOPass in addition to the ones in EffectComposer, but sadly that doesn't work this time. Can anyone tell me what else I am overlooking?
I need to generate proceduraly in a shader a texture and get it back in my javascript code in order to apply it to an object.
As this texture is not meant to change over time, I want to process it only once.
I think that GPUComputationRenderer could do the trick but I don't figure out how and what is the minimal code that can achieve this.
I need to generate proceduraly in a shader a texture and get it back in my javascript code in order to apply it to an object.
Sounds like you just want to perform basic RTT. In this case, I suggest you use THREE.WebGLRenderTarget. The idea is to setup a simple scene with a full-screen quad and a custom instance of THREE.ShaderMaterial containing your shader code that produces the texture. Instead of rendering to the screen (or default framebuffer), you render to the render target. In the next step, you can use this render target as a texture in your actual scene.
Check out the following example that demonstrates this workflow.
https://threejs.org/examples/webgl_rtt
GPUComputationRenderer is actually intended for GPGPU which I don't think is necessary for your use case.
After sorting out the issues in this question, I was finally getting image data from my render target. BUT, that image data does not seem to use anti-aliasing. (It also doesn't seem to have any alpha values where 0 < a < 255, but that may be a different issue).
I saw in this thread that anti-aliasing isn't available for render targets, but that was in 2011. Is that still the case? Do I need to employ post-process anti-aliasing if I want it for my render target?
This issue is present in both r76 (what I'm using from my previous question) and even the latest, r86.
Here's an example image, if it helps. The gray background is the image rendered to the main canvas, while the transparent background comes from the render target. You can really see the aliasing on the edges between the faces.
this answer is some late (3 years later) but, in this discussion is the solution: https://discourse.threejs.org/t/why-is-a-custom-fbo-not-antialiased/1329.
With the next release of three.js (R101), it’s possible to use a new type of render-target to solve this problem. WebGLMultisampleRenderTarget enables the support of multisampled renderbuffers. You can now perform “render-to-texture” and have an antialiasing render result. A post-process AA like FXAA is not necessary anymore.
Important: It’s required to use a WebGL 2 rendering context since multisampled renderbuffers is a WebGL 2 feature. -
thanks for reading.
I have a WebGLRenderTarget that I render to. At a subsequent stage in the rendering process I use that texture as input to a shader.
I would like to be able to use that same render target with multiple wrappings/filterings. I have looked some at the internals of three.js, and am not sure that it is possible.
It seems like in webGL I would be able to just bind the same texture multiple times with different parameter settings. I figure I can fork three.js to support a new type of texture that just uses another texture with new parameters, but wanted to see if there was some way I could do this without forking.
Thanks in advance!
Within my current MATLAB GUI project, i have two axes objects. The first is used by the workaround "uibutton" (I don't use GUIDE) in order to display a LaTeX-formula (as far as I know, only axes labels are capable to use LaTeX whereas normal static text fields aren't...). The other axes object is used to actually plot a 3D-function.
The program has the following steps:
the first axes creats the LATEX-formula (e.g. f(x)=).
User enters a function in the edit field after the LaTeX-formula (e.g. f(x)=a+b).
User presses a "plot"-button.
3D-function is plotted in the second axes object.
Problem:
As soon as the 3D-function is plotted, the nicely rendered LaTeX-formular becomes crisp. Is there any way to prevent this from happening?
http://i42.tinypic.com/348pq2u.png (See picture for problem demonstration)
Check your figure properties before and after you draw the 3D plot
get(gcf, 'renderer')
My guess is that plotting the 3D function changes the renderer from the default ("painters") to another (likely OpenGL). Matlab's Latex rendering does not seem to play well with zbuffer or OpenGL (these produce bitmaps rather than line art).
You may be stuck if painters can't render your 3D graphics properly, but you can try to force it by setting the renderer manually back to painters
set(gcf, 'renderer', 'painters')