Created a simple scene with a cube in it. Able to see the color of the containing element, (body), in the background.
Added an FXAA shader and the antialiasing works well. However the background is now black, so can no longer see the color of the background container.
Added the following code:
var target = new THREE.WebGLRenderTarget(512, 512);
var composer = new THREE.EffectComposer( renderer, target );
in order to set the effect composer render target format to THREE.RGBAFormat, rather than the default THREE.RGBFormat.
This makes the background work properly, but then there are black and white edges around the cube and the antialiasing does not look very good.
Repeated the above but used the Sepia shader instead of the FXAA shader. This works correctly. The cube looks sepia and the background containing element color is correct.
Are there any workarounds to allow antialiasing and transparent background?
Thanks for any help
I read your issue and there seems to be a good source that can solve or at least lead you down the right path. Go check out: https://github.com/mrdoob/three.js/issues/2125
Hope this helps.
Check my answer in https://stackoverflow.com/a/21056080/2482976
The FXAA needed to be updated to handle the transparent background
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?
It this possible? If so, I can't seem to locate any documentation around it.
You can do that to a limited amount by using a THREE.ShadowMaterial for the objects receiving the shadow. You might need to have a separate renderpass for shadow-rendering though. See here for an example:
https://codepen.io/usefulthink/pen/JrZOPw
Yes, alter the color of your shadow plane's material. I needed a slightly blue-ish tint to my shadows so used something like this:
var material = new THREE.ShadowMaterial({opacity: .7, color: '#003'});
I'm trying to render a scene and then have a half-transparent post-processing effect rendered on top of it. I'd like to make it work with effect composer so I can later use more passes easily.
My basic structure is this:
composer = new Three.EffectComposer renderer
composer.addPass renderPass
composer.addPass transparentPass
composer.addPass copyPass
copyPass has renderToScreen = true, transparentPass is my custom fragment shader with each pixel's alpha is set to 0.5 and loaded with ShaderPass.
I've tried blending, depthTest and transparent for the shaderMaterial.
Also tried alpha and premultipliedAlpha options for renderer, autoClear off.
I'm getting either the scene from renderPass with nothing else or the transparentPass on any renderer.clearColor I choose. Not the composite of both. What do I need to set to make this work?
Thank you.
EDIT:
Here is a codepen example:
http://codepen.io/Eskel/pen/PzaOWb?editors=0010
And the code of my shader:
http://eskel.cz/js/three79/RGBAShader.js
It shows all white (and not a rotating cube underneath) even though all pixels are rendered with alpha channel set to 0.5. Should I mix it with the tDiffuse render target in the shader or is there a way to make the shaderPass transparent?
It's a really late response, but maybe it would help someone.
In constructor ShaderPass creates internal ShaderMaterial and we should set this material's transparency to true:
copyPass.material.transparent = true
I have recently imported both .blend and .fbx files into my game, and I would like to change their color in-game. To color them, I am using diffuse shaders, and have tried this command:
gameObject.GetComponent<MeshRenderer>().material.color = Color.red;
as well as this command:
gameObject.GetComponent<MeshRenderer>().material.SetColor("_Color", Color.red);
For some reason, both of these work perfectly on pre-generated Unity cubes, but not on my models, even though they have the mesh renderer component. Any suggestions?
There could be several reasons why your code doesn't work.
I would recommend changing the color of your object in the Editor, if it works - your objects are fine.
_Color is just a label, that usually marks the Main Color. Open your shader and check if the label _Color exists or not. Please check this from unity documentation http://docs.unity3d.com/ScriptReference/Material.SetColor.html
maybe you are changing the _Color of the parent object, but the material you are looking at belongs to the child object.
I am trying to implement webgl for my game. The problem is I use multiple canvases, and my webgl enabled canvas is semi-transparent over my terrain canvas (which is drawn once and just moves with the player). Here is a picture:
I've searched for the past 2 hours on google and can't find anything that has helped.
I have tried:
getContext("experimental-webgl",{alpha: false});
This just hides the terrain completely (now all black), but my webgl drawn objects have the correct color.
gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
gl.pixelStorei(gl.UNPACK_COLORSPACE_CONVERSION_WEBGL, false);
Neither of these did anything noticeable.
gl.clearColor(0, 0, 0, 0)
Didn't affect the outcome, still looks like the screenshot above.
Everything else here: http://games.greggman.com/game/webgl-and-alpha/
Nothing seems to work. Why is what is drawn on the canvas semi transparent? There is no CSS affecting the canvas element.
Figured it out! I am using WebGL-2D, which is a javascript file that adds the context2D API to webGL. So if I call drawImage, it actually handles that with webgl. In the getContext definition I had to change:
gl.colorMask(1,1,1,0);
to
gl.colorMask(1,1,1,1);
The colorMask() method specifies whether red, green, blue, and alpha can or cannot be written into the frame buffer.
I have no idea why it was 0 before.