I am struggling with the common transparency sorting issue. I know there are ways around it (like manually sorting the objects or order-independent transparency) but all that can become quite fiddly. I'd be ok if there was a way to have objects that are partly opaque and partly 100% transparent and have them intersect correctly.
In theory this should be possible. Opaque pixels would be rendered to color buffer and z buffer in the standard way and transparent pixels are just left out.
What I'm looking for is something like indexed transparency as it was used with gif files, for instance that all pixels of an object that have the color #FF00FF are not rendered.
I just don't know if and how this would be possible using three.js. Also, I want to be able to use it with custom shaders.
EDIT: Thanks for your comments so far and sorry for the confusion. This is more of a conceptional thing than a specific problem with my code. It's just that I am often faced with the issue that parts of transparent objects cut out parts of other transparent objects which should be in front of them. Also, transparent objects do not intersect correctly, it's always that one covers another. I understand why this happens and that it is a problem which is inherent to the way transparency is treated. But often I only need parts of an object completely transparent, no partial-shine-through-alpha transparency. Which could be possible if there was a way to leave out certain pixels of objects and render the rest like a normal opaque object.
Let's assume I want to have a metal chain and each segment is a PlaneGeometry thing with a texture that shows the shape of an O (and the rest transparent). Now the chain should be shown with correct interlinkage so to say.
Any help welcome!
Cheers!
If you are rendering a three.js scene, and your texture maps contain no partially-transparent pixels -- that is, each pixel is either 100% opaque or 100% transparent, then you can achieve a proper rendering by setting
material.alphaTest = 0.5;
//material.transparent = true; // likely not needed
The same holds true if you are using a binary alpha-map.
If you are writing a custom shader, then you can achieve the same effect by using a pattern like the following in your fragment shader:
if ( texelColor.a < 0.5 ) discard;
three.js r.84
Related
I'm trying to render a fairly complex lamp using Three.js: https://sayduck.com/3d/xhcn
The product is split up in multiple meshes similar to this one:
The main issue is that I also need to use transparent PNG textures (in order to achieve the complex shape while keeping polygon counts low) like this:
As you can see from the live demo, this gives really weird results, especially when rotating the camera around the lamp - I believe due to z-ordering of the meshes.
I've been reading answers to similar questions on SO, like https://stackoverflow.com/a/15995475/5974754 or https://stackoverflow.com/a/37651610/5974754 to get an understanding of the underlying mechanism of how transparency is handled in Three.js and WebGL.
I think that in theory, what I need to do is, each frame, explicitly define a renderOrder for each mesh with a transparent texture (because the order based on distance to camera changes when moving around), so that Three.js knows which pixel is currently closest to the camera.
However, even ignoring for the moment that explicitly setting the order each frame seems far from trivial, I am not sure I understand how to set this order theoretically.
My meshes have fairly complex shapes and are quite intertwined, which means that from a given camera angle, some part of mesh A can be closer to the camera than some part of mesh B, while somewhere else, part of mesh B are closer.
In this situation, it seems impossible to define a closer mesh, and thus a proper renderOrder.
Have I understood correctly, and this is basically reaching the limits of what WebGL can handle?
Otherwise, if this is doable, is the approach with two render scenes (one for opaque meshes first, then one for transparent ones ordered back to front) the right one? How should I go about defining the back to front renderOrder the way that Three.js expects?
Thanks a lot for your help!
I need to add this classic effect which consist in highlighting a 3D model by stroking the outlines, just like this for example (without the transparent gradiant, just a solid stroke) :
I found a way to do this here which seems pretty simple and easy to implement. The guy is playing with the stencil buffer to compute the model shape, then he's drawing the model using wireframes and the thickness of the lines is doing the job.
This is my problem, the wireframes. I'm using OpenGL ES 2.0, which means I can't use glPolygonMode to change the render mode to GL_LINE.
And I'm stuck here, I can't find any simple alternative way to do it, the most relevant solution i found for the moment is to implement the wireframe rendering myself, which is clearly not the easiest solution. To draw my objects I'm using glDrawElements with GL_TRIANGLES as primitive, I tried to use GL_TRIANGLE_STRIP as primitive but the result is definetely not the right one.
Any idea/trick to bypass the lack of glPolygonMode with OpenGL ES? Thanks in advance.
Drawing Outline or border for a Model in OpenGL ES 2 is not straight forward as the example you have mentioned.
Method 1:
The easiest way is to do it in multiple passes.
Step 1 (Shape Pass): Render only the object and draw it in black using the same camera settings. And draw all other pixels with different color.
Step 2 (Render Pass): This is the usual Render pass, where you actually draw the objects in real color. This every time you a fragment, you have to test the color at the same pixel on the ShapePass image to see if any of the nearby 8 pixels are different in color. If all nearby pixels are of same color, then the fragment does not represent a border, else add some color to draw the border.
Method 2: There are other techniques that can give you similar effects in a single pass. You can draw the same object twice, first time slightly scaled up with a single color, and then with real color.
I'm trying to get a blender model that I've exported to display properly, but it appears as though the texture for the leaves isn't being blended correctly as an alpha ( though the trunk itself work fine ). Here's what I'm seeing:
Notice how the leaves aren't aliased through correctly ( i.e. it should look like a tree with leaves, not with gray sheets of paper ).
In Blender the tree looks fine, but I've had a few people tell me that it looks like my alpha is inverted ( I'm not totally sure what that means ). My guess is that, with a bit of file tweaking and conversion, I could get the attached images to work fine. Here are the image resources I've got:
I don't think it's necessary, but in case you want to see the exported JSON, I've dumped it here:
https://gist.github.com/funnylookinhat/5062061
I'm pretty sure that the issue is the black and white image of the oak leaves - given that it's the only difference between the two packed textures. Is there a way I can work with it or convert it so that it applies correctly to the layers of leaves?
UPDATE
I'm able to get something that looks mostly right ( minus some weird transparency layering issues ) - but I'm pretty sure that it isn't being done correctly... any help would still be much appreciated.
I added in transparency on the white/black and green images resulting in these:
Which resulted in the following:
Then I flipped the references to the two of them in the JSON - which resulted in this:
I'm 99% sure this isn't working as intended, it appears as though the Diffuse map isn't working correctly... any suggestions?
Three.js has no mask textures (the black and white texture), so you need to bake it into the alpha channel of the diffuse texture (so use .png format as .jpg does not support alpha - as you are currently doing).
Your update is on the right track although the diffuse alpha is poorly done (holes in leaves). This can be done right e.g. in Gimp by decomposing the diffuse color channels and then recomposing with the added mask layer as alpha (note however that white is assumed to be opaque and black transparent so inversion might be needed).
In the material, don't use the mask texture at all. There might also be problems with leaves overlapping each other which is a difficult problem to solve as transparency in general is quite the PITA. You can try disabling the material's depthWrite and/or playing with alphaTest values (e.g. setting it to 0.1) to get different kind of artifacts.
I am working on a simple painting app using LibGDX, and I am having trouble getting it to "paint" properly with the setup I am using. The way I am trying to do this is to draw with sprites, and add these individual sprites into a background texture, using LibGDX's FBO commands, when it is appropriate.
The problem I am having is something relating to blending, in that when the sprites are added to this texture that I am building, any transparent pixels of the sprite that are on top of pixels that have been drawn to previous will be brightened up substantially, which obviously doesn't look very good. The following is what the result looks like, using a circle with a green>red gradient as the "brush". The top row is part of the background texture now, while the bottom one is still in its purely sprite drawn form.
http://i238.photobucket.com/albums/ff307/Muriako/hmm.png
Basically, the transparent areas of each sprite are brightening anything below them, and I need to make them completely transparent. I have messed around with many different blending mode combinations and couldn't find one that was any better. GL_SRC_ALPHA,GL_ONE_MINUS_SRC_ALPHA for example did not have this problem, but instead the transparent pixels of each sprite seem to be lowered in alpha and even take on some of the color from the layer below, which seemed even more annoying.
I will be happy to post any code snippets on request, but my code has become a bit of mess since I started trying to fix these problems, so I would rather only put up the necessary bits as necessary.
What order are you drawing the sprites in? Alpha blending only works with respect to pixels already in the target, so you have to draw all alpha-containing things (and everything "behind" them) in Z order to get the right result. I'm using .glBlendFunc(GL10.GL_SRC_ALPHA, GL10.GL_ONE_MINUS_SRC_ALPHA);
I am doing my iPhone graphics using OpenGL. In one of my projects, I need to use an image, which I need to use as a texture in OpenGL. The .png image is 512 * 512 in size, its background is transparent, and the image has a thick blue line in its center.
When I apply my image to a polygon in OpenGL, the texture appears as if the transparent part in the image is black and the thick blue line is seen as itself. In order to remove the black part, I used blending:
glEnable(GL_BLEND);
glBlendFunc(GL_ONE, GL_ONE_MINUS_SRC_ALPHA);
Then my black part of the texture in the polygon is removed. Now only the blue band is seen. Thus the problem is solved.
But I want to add many such images and make many objects in OpenGL. I am able to do that, but the frame rate is very low when I add more and more images to objects. But when I comment out blending, the frame rate is normal, but the images are not seen.
Since I do not have good fps, the graphics are a bit slow and I get a shaky effect.
So:
1) Is there any other method than blending to solve my problem?
2) How can I improve the frame rate of my OpenGL app? What all steps need to be taken in order to implement my graphics properly?
If you want to have transparent parts of an object, the only way is to blend to pixel data for the triangle with what is currently in the buffer (what you are currently doing). Normally, when using solid textures, the new pixel data for a triangle just overwrites what ever was in buffer (as long as it is closers, ie z-buffer). But with transparency, it has start looking at the transparency of that part of the texture, look at what is behind it, all the way back to something solid. Then has combine all of those over lapping layers of transparent stuff till you get the final image.
If all you are wanting your transparency for is something like a simple tree sprite, and removing the 'stuff' form the sides of the trunk etc. Then you may be better of providing more complex geometry that actually defines the shape of the trunk and thus not need to bother with transparency.
Sadly, I don't think there is much you can do to try to speed up your FPS, other then cut down the amount of transparency you are calculating. Maybe even adding some optimization that checks images to see if it can turn of alpha blending for this image or not. Depending on how much you are trying to push through, may save time in the long wrong.