My particles are not all rendering as transparent. In the below image you can see that some of the images are surrounded by a box of the background color (clip images behind them), while others are not (do not clip images behind them).
This is the PNG file I'm using:
I load the image and create the material like this:
cimage = THREE.ImageUtils.loadTexture( '/models/candy/c1.png' )
cmat = new THREE.ParticleSystemMaterial
size: 100
map: cimage
transparent: true
Why are the particles not all transparent?
I've found this related question but none of the solutions are really want I want:
depthWrite/depthTest = false: I want the particles to affect the depth, they should be overlapped correctly.
sortParticles = true: only works if one particlesystem is present, the squares still appear for other particle systems
alphaTest = 0.5: this comes closest, but the borders of the images are either not clean, or still have a background color.
You need to sort the particlesystem to get correct transparent levels.
particlesystem.sortParticles = true
When you have multiple particlesystems that are viewed together, then you have 3 options:
play around with the alphaTest property because that discards fragments that have an alpha less then defined
You can do is combine both particles systems and give it another shadermaterial. This makes it possible to sort them again as one.
The last option is to write your own postplugin in webglrenderer. (this is difficult)
Related
I'm trying to use a Shader material to create an area of transparency around my camera.
To achieve that, I'm checking if a vertex is inside a given radius, if so, I set its color with a custom opacity value < 1, such as 0.4.
This is working fine, but sometimes some transparent geometries are blocking the elements behind it. I took a look into the docs and some other similar question and figured out that usually we set the depthWrite = false and transparent = true only to transparent materials.
My problem is that I have only one material representing all my geometries but I want to set depthWrite = false; transparent = true to all vertices inside the radius and depthWrite = true; transparent = false to the ones outside it. Does anyone knows if this is something achievable or if there is another possible solution?
Thanks in advance
answering my own question! Hope this can help someone
It looks like it was not possible the way I was doing because I had only one material for the visible and transparent part.
Then, I decided to have 2 different shader materials rendering the same geometries, the visible and transparent ones, to set the depthWrite and transparent properties accordingly.
Also I discarded, using the fragment shader, the visible portion inside my transparent area and discarded the invisible one in the visible area.
It looks like it's working fine now
I have been experimenting with converting the custom attribute BufferGeometry example (https://threejs.org/examples/webgl_buffergeometry_custom_attributes_particles.html) into a fly through animation and I find that the sprites have dark backgrounds (and those that I create myself as well) if depthTest is set to true. See the image.
The sprite in the custom attribute example has a transparent background but this appears to be ignored when it is rendered if depthTest is set to true.
I have tried numerous custom blending rules but cannot find a way to remove the background, only to reduce the effect a bit. The background disappears if depthTest is set to false.
Is this a known limitation? Is there a work around?
I am modifying this question to add clearer images with a different ball sprite (also with a transparent background). This image has depthTest set to true for the custom ShaderMaterial used in the https://threejs.org/examples/webgl_buffergeometry_custom_attributes_particles.html three.js example.
By comparison, this uses multiple PointsMaterials from a different three.js example (https://threejs.org/examples/webgl_points_sprites.html), also with depthTest set to true and using the PointsMaterial map parameter for the sprite.
As you can see, the second PointsMaterial example works as expected. Because PointsMaterial only accepts one fixed size and color, I need to create 36 different point geometries to render this image.
I would prefer to use the custom shader in the first example (which has custom size and color attributes and requires only one geometry). Is there a way to define a custom shader to support depthTest like the PointsMaterial does?
WebGL has a depth buffer that's used to find out which pixels are hiding behind other pixels. If a pixel is hiding behind another, it doesn't get rendered. Typically that's what you would want, why would you waste GPU time rendering pixels you're never going to see? Consider the example depthbuffer below, white squares are closer to the camera, while darker squares are further away:
If there was a square hiding behind another one, you wouldn't see it in the depthBuffer, you'd only see the closest one. The depthBuffer doesn't know that your squares have partial transparency and you want some parts to be see-through. This is an issue in other realtime engines too, this is an example from Unity:
The squares that are closer are blocking part of the squares that are further away in the depthBuffer, so the occluded pixels don't get rendered. That's why setting depthTest to false is useful. You're basically telling the renderer to stop testing which pixels are behind others, and just render all of them. Here it is again with depthTest = false:
If you must set depthTest on, (for instance, if you want the sprites to hide behind a solid wall) you could set depthWrite to false on the sprite material. It would still check which pixels are behind others, but the pixels from the sprites wouldn't get written to the depthBuffer, so no sprite could block another sprite.
depthTest: true; // Tests pixel depth
depthTest: false; // Does not test pixel depth
depthWrite: true; // Writes pixel depth to depthBuffer
depthWrite: false; // Does not write pixel depth to depthBuffer
As far as blending mode, I prefer THREE.AdditiveBlending because it gives the particles a nice glowing effect when they accumulate one on top of the other. But that's up to you.
I have an existing WebGL canvas that is being rendered without using ThreeJS, and is for all intents and purposes a black box to me, apart from two facts: (1) I have access to the underlying webgl canvas DOM element and can position and resize it on the screen, and (2) I know the properties of the camera for the scene, and get updates on every render cycle for that camera.
The problem I need to solve can be simplified to the following: I need to have my own separate ThreeJS canvas that displays both the black box canvas data, and then elements that I draw, like a cube for a simple example. I can already easily overlay the two canvases, set the transparency on my canvas for everything but the cube, and then align the two with the camera events from the black box library. This works quite well.
The issue with this is that when I draw my objects, like a cube, they don't respect the depth buffer of the black box canvas. So I might have a cube that is properly aligned with the backing scene and movements of the scene, but then it isn't properly masked when something in the black box canvas is closer to the camera than the cube. My thought is that I need to solve this in one of two ways: (1) I can have my renderer write to the other canvas with autoClear = false and preserveDrawingBuffer = true, or (2) I can somehow copy the depth buffer from the black box canvas into my canvas, and then set up my renderer so that it respects the new depth buffer.
I haven't been successful with either approach yet, so I'm wondering if this is possible, and if so which of the above approaches, or what other approach, can solve this problem?
--Edit--
See https://jsfiddle.net/zdxyoajb/ for angular/typescript implementation of the above attempts. In the following animate loop, if I comment out the overlayRenderer lines, the below sphere will be red and offset from the center (as it should be), but if I don't comment the lines, I get the below image. I also get the following error:
WebGL: INVALID_OPERATION: uniformMatrix4fv: location is not from current program
animate() {
requestAnimationFrame(() => this.animate());
this.blackBoxCamera.copy(this.overlayCamera);
this.blackBoxRenderer.render(this.blackBoxScene, this.blackBoxCamera);
this.overlayRenderer.state.reset();
this.overlayRenderer.render(this.overlayScene, this.overlayCamera);
}
In the scene I've got only transparent objects, thus with enabled depth testing it causes objects hiding each other. I know depth testing doesn't consider any transparency, it just writes to the depth buffer looking at values of z. Then how to render correctly two transparent objects ?
I did this renderer.context.disable(renderer.context.DEPTH_TEST); but nothing changed
illustration of my concrete problem:
the cube is MeshLambertMaterial({color: ..., transparent: true, opacity: 0.6})
and the plane is MeshLambertMaterial({color: ..., transparent: true, opacity: 0.4})
cube is rendered after plane, but if the cube is opaque then whole of it will be rendered correctly without any discarding (also look at the points they are also opaque hence are visible).
So how to get it consider transparency and don't care about the order of rendering as well so two transparent objects don't hide each other ?
In three.js, you can turn off depth testing by setting
material.depthTest = false;
Don't be surprised if you have artifacts when the camera position is changed.
You might also want to read this answer.
three.js r.80
I'm trying to apply textures to meshes in THREE.js, but to get an acceptable level of clarity, I am forced to use PNGs much larger than desirable, up to several hundred pixels squared in size. If I were to use something simple such as an eight-by-eight checkered pattern, for example, the smallest resolution possible looks like a bunch of dots.
The code being used for the textures is THREE.ImageUtils.loadTexture("sprites/land1.png");
As shown in this example you need to set the filtering of the texture.
var texture = THREE.ImageUtils.loadTexture( 'texture.png' );
texture.magFilter = THREE.NearestFilter;
texture.minFilter = THREE.LinearMipMapLinearFilter;