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
Related
I need to post-process the scene that I rendered previously on textureA (as render target), with my custom shader and save the result to textureB (input:textureA, output:textureB). Therefore, I don't need a scene and a camera. I think it's too simple to even bother with three.js classes like EffectComposer, Shaderpass, CopyShader, TexturePass, etc.
So, how do I setup this computing-like post-processing in a simple way?
I've create for you a fiddle that shows a basic post-processing effect without EffectComposer. The idea behind this code is to work with an instance of WebGLRenderTarget.
First, you draw the scene into this render target. In the next step, you use this render target as a texture for a plane which is rendered with an orthographic camera. The code in the render loop looks like this:
renderer.clear();
renderer.render( scene, camera, renderTarget );
renderer.render( sceneFX, cameraFX );
The corresponding material of this plane is your custom shader. I've used a luminosity shader from the official repo.
Therefore, I don't need a scene and a camera.
Please do it like in the example. That's the intended way of the library.
Demo: https://jsfiddle.net/f2Lommf5/5149/
three.js R91
I'm trying to set a texture to an already existing mesh like this:
const texture = new THREE.Texture(canvas);
texture.needsUpdate = true;
(The source a HTML5 canvas and that part works ok.)
...
mesh.material[0].map = texture;
I can change the material color without any problems, but setting the texture doesn't change anything. I guess this is not how changing the texture should be done..? I'm using MeshPhongMaterial.
So, long story short: I want to be able dynamically change a texture of an mesh.
Edit:
I'm trying to set the texture to one of the materials of a Collada model that is loaded. By using dev tools I can see that the texture is there in the object, but it is just not visible. I can change the color of the same material without any problems. Sometimes I can see the texture appearing with wrong colors after a very long idle time (which is weird).
I'm new to coding and everyday I learn something new. I want to have a masked scene with other 3D objects, that are from other scenes, to be behind and around it. At this moment I'm stuck with a masked scene. Right now I have this working. As u can see the background is grey and other 3D objects, that are from other scenes and behind the masked scene, can't be seen because of it.
How can I make the backround from masked scene to be transparent with other 3D objects from other scenes?
I think it has something to do with the fragmentShader, because I can change the background color by changing this line "vec4 background = vec4(1.0, 1.0, 1.0, 0.0);",.
Thanks in advance for all the help!
Update
I understand that the background is transparent on this previous link, but I fail to create a new scene with new 3D objects that is visible and is outside the masked scene. Just helping me make a new scene on that previous link would help me out with my problem.
I want to render all the vertexes and the lines in the mesh.
I tried
1) A custom shader following this link
https://github.com/mrdoob/three.js/issues/2028
2) Set transparency with the material or like:
THREE.MeshNormalMaterial( { transparent: true, opacity: 0.5 } ),
3) Set ink material to the model in 3dMax and export to an obj file and load it in Threejs with objloader
None of them works fine.
Is there any solution to load mashes from 3dMax model (using objloader) and apply it with ink material in Threejs, just like what we can do in 3DMax?
See below as an example
http://makeitcg.com/wireframe-rendering-techniques-in-3ds-max/160/
First of all, Number 3) will NEVER work with OBJ, because obj will not export the ink shader from 3dsMax. And just to be clear, i don't think there is ANY way you can export the 3dsMax Shader.
Then, I don't understand what 2) is about. What do you want to achieve anyway? Do you want to set an object to be transparent? What does this have to do with Ink 'n Paint? Btw. i am not sure if transparency works for MeshNormalMaterial, i guess it should but Lambert and Phong will definetly work with transparency.
The problem is that you do not state what you want to achieve. From 1) it seems you want an outline around an object. For an outline see this example: http://stemkoski.github.io/Three.js/Outline.html or this one as a more advanced example: http://stemkoski.blogspot.de/2013/07/shaders-in-threejs-glow-and-halo.html
If you want to set transparent objects, well try MeshLambert or meshBasic material if MeshNormal does not work (i am not sure Right Now and can't check)
3) if you want to have a Ink 'n Paint shader, you need a Custom Shader. See examples here:
http://www.chromeexperiments.com/detail/cel-shader/
and already done with three.js here:
http://learningthreejs.com/data/THREEx/docs/THREEx.CelShader.html
Just apply the shader, see examples for setting up a ShaderMaterial.
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