I am using r82.
I have a mesh with multiple materials. I can change their opacity just fine, but how they are rendered is what I would call "splotchy". I have been using ThreeJs for a while, and EDIT: was able to get the transparency working in a past version (r67) with the same model in a significantly more consistent way. So I was wondering if there is something that now I need to set that I didn't need to set before or if I am just overlooking something. Upon revisiting my older code and testing it again, I found that the same transparency issues were present. It was simply a matter of there not being as obvious "splotches" (and not testing enough, I'm sure). Here is a screenshot.
Here are a few more pictures I took that highlight the issue a bit better. I have the outside wall in a light grey and the floors a dark grey in the model and can toggle the outside walls to be visible or not. In these pictures I have one face of the outside wall purple and a face of the floor in the room on the other side of the wall green.
Based on the angle of the camera, it makes part of the green floor face invisible even though there is only one face between the camera and it.
The materials are all double sided already and there is no sign of this until the transparency is on. I found a similar question that suggested changing the mesh.setFaceCulling (or something similar) but that seemed to be from an older version and wasn't in r82.
Thanks for any help in advance!
EDIT:
I started looking into the old version of threeJS and the current version's source code to see what is done differently regarding transparency. I found transparentObjects, which is an array of the objects (I believe faces) that are going to be rendered and are in sorted based on "reversePainterSortStable". There is another list of objects (I believe for the materials objects, maybe?) called opaqueObjects that uses "painterSortStable". So to see if changing the sort order would change the outcome of how things are looking when transparent I changed it so that transparentObjects got sorted by "painterSortStable" and it did change how things showed up significantly (granted it didn't fix my problem since it just removed some problem spots and created new ones).
So the short version, it looks like it is an issue with the renderOrder of the faces.
That being said, I tried finding how the r67 version of the code handled the "renderOrder" of the faces since it wasn't something that (to my knowledge) could be set in that version and just did it automatically. But I have had no such luck tracking down how it was done as of yet.
So I see two possibilities. 1) find out how the past version correctly did transparency (at least for my purposes) and change the logic in the current version to use that. Or 2) find how to properly set the renderOrder of the faces based on the camera position in the scene. Will look into the second option first, but figured it would be good to document this for others looking to help answer or that have a similar problem.
EDIT 2:
So digging through the source code for threeJs and noticed something about the transparentObjects array I mentioned in the previous edit. The first, that I cannot for the life of me figure out how it gets populated since it doesn't seem like it is added to anywhere in the code. The second is that I think it is being populated with duplicates of the entire building object/mesh (see screenshot below).
The z indexes all seem to be the same. as well as the ids and the objects are all of type "mesh" (of the ones I looked through, granted, since there are a few thousand). So I was going to figure out why its adding what is being added to the array, but that is when I stumbled across the issue of not finding where in the code that the transparentObjects array actually get populated.
EDIT 3:
WestLangley, I tried setting the depth test for the outer wall material to false and got this. Like I said in my response comment, even if it did work it wouldn't fix the issues experienced with the camera inside the building, but wanted to follow up none the less (see snapshot below).
Related
https://codepen.io/chrisjdesigner/pen/ExNPqBx
// Old Film Look
filmPass = new THREE.FilmPass();
composer.addPass(filmPass);
In this example you can see it and it's something I've been having in my own tests as well. I'm not sure if it's only tabbing out or if by leaving the computer idle it eventually turns like that.
The way to replicate it is to open the demo, leave the tab for a while and after 15 minutes or so, when you return to the tab, the noise will look displaced and forming patterns
. Chrome latest version.
My assumption is that the requestanimationframe is causing this issue, but I wouldn't know what to tweak to fix it.
Anyone got a pointer?
It appears adding a deltatime to the render alleviates the issue greatly.
I started a new Xcode project with the ARKit template and simply replaced the "ship.scn" with my "test.scn" filename asset. The object is about 16.5mm wide and 4.8mm tall. The ship worked fine of course, but my test object that reads "test" does not rotate as I move around it, or scale when I move towards or away from it, yet it does track in one location.
I compared the ship and test attribute panels, and I can't find anything that is different about them, except that the ship is textured and my test text is not. What is inherently special about scn objects that would make them behave correctly in ARKit besides their size? I've read through the documentation about anchoring, but it seems like I wouldn't have to do this in code if it's already a scn object.
In case anyone wants to test the file I'm using in the ARKit template to see how it's behaving, the file is here: https://ufile.io/ey49t
I’m answering the question because I think it could help others that are making a similar mistake, but it can be closed if it doesn’t make sense.
The problem is that the size was much too large where I could not see scaling or rotation no matter how much I moved around the room. Compare the scaled size in the last attribute panel on the ship model - not its actual size. Then get the size of your own model scaled down enough so that it is actually resonable.
I have an Unreal Engine 4 project. I have two sets of the same map, one unmerged and the other merged. THe merged map has the textures baked in. When I try to add a collision mesh in the baked level model everything works fine. When I try to add a collision mesh to the level broken down into several meshes, there isn't any option to add collision - in fact, half of the menu options aren't even there. I tried posting on the unreal forums without luck. I was hoping someone here might be able to help. Thanks - Ted
When you select an object in UE4 it shows properties of that object. When you select several objects, it shows only the properties that the selected objects have in common. So my guess is that you trying to set up a collision for several objects of different type. Try setting it one by one.
I want to display a lot of cubes. Their position is calculated during runtime, one more per frame. Just doing scene.add(cube) each time works but is too slow. So I want to merge their geometries each time. But when I try to add the merged geometry to the scene, it still shows the old version! I tried all kinds of .updateMatrix() and .verticesNeedUpdate=true things.
Interestingly the problem only comes up if I try to change things I have already added to the scene. It does work if I just do my merging in the background and add the result to the scene at some point! But After it has been added, merging it and adding the result still displays the old version. I've tried removing the Object from the scene first, but that doesn't change anything.
Finally came across the right command: group.geometry.groupsNeedUpdate = true;. Still can't find any good documentation on it, but it works
I am following this example of a difference chart. I've added buttons on my page that make ajax calls to fetch new datasets, and then I redraw the difference charts. There are several difference charts on my page.
Upon redrawing, the rendering of the above/below areas becomes corrupted: x-values have both above and below areas rendered. I'm fairly certain it's not a back-end problem, because the initial load produces a correct chart; changing a parameter messes up the redrawn chart; and going back to the default parameters and redrawing the original chart also produces a corrupted chart. In fact, I can partially make out what's happening: the original time series is present on the new graph. It's almost as if there are three series being graphed.
I think it has to do with .datum. I don't fully understand how it works, since it differs from the standard enter/update/exit methods associated with .data. I've read the documentation, but am still confused. Some possibilities:
The original data is hanging around (even though I clean out the container with $('#chart').html(''))
The .append(g) is adding groups without removing the earlier ones.
The svg.append("clipPath").attr("id", "clip-below") is causing problems, since multiple nodes have the same id (even though again, I'm not sure how this could happen since I remove the nodes before the redraw).
I feel like I'm missing a lot of fundamentals here, even though I've spent a decent amount of time trying to understand the library. Can anyone see anything obvious, or point out some good resources for me to look at?
UPDATE: This has to do with there being two charts on the page. I noticed this when I opened the inspector and closed it. The areas of the bottom chart (the difference chart) had screwed up, and I noticed the new line that it was using to separate the above-area from the below-area looked a lot like one of the lines from the top chart.
Does anybody have experience with dependency issues/namespace collisions when drawing two charts on the same page?
The problem was, the id's for the clipping paths were the same.
I would still like some more resources concerning .datum.