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.
Related
I’m working on a complex project in threejs.
Trying to cut the corner:
I have to load an obj, create some pivot point to use as parent of the mesh inside this obj, let the user move and rotate the pivots.
It takes somewhere about 10 to 15 seconds to load due to its complexity.
My problem is that it is working flawlessly if I load the page and don’t change the focus, but if I change the browser tab or collapse the browser window I got a very specific problem:
geometry.computeBoundingBox() gives different results.
Is there someone who can help me figure out what’s happening?
To help you better understand the situation: at loading time I have to rotate the obj to -90° on the X axis (inverting Y and Z as a consequence); I think it’s relevant because the boundingBox calculation somehow inverts Y and Z and changes its min and max also, but as I said only if I switch tab or collapse the browser.
p.s. No matter the OS nor the browser. It’s a super consistent bug
Ok, I somehow solved the issue, but take it with a grain of salt:
the problem can be tracked back to the execution stack of javascript:
the first function computes the bounding box, the second uses this computation, but if the first function is somehow slower to execute, the second could not have what it needs.
What I did is to force javascript to execute functions in a given order and only when the previous is finished.
The problem occurred only when changing the tab because browsers optimize resources of non visible tabs, but the code I wrote was anyway too much entropic to work properly.
I hope what I found will be understandable and useful to someone else in future.
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).
Was chasing my tail endlessly trying to figure out why the new 3D reconstruction was working in some scenes but not others, only to discover that the TangoAplication script on the Tango Manager prefab is resetting to default when I switch scenes.
Is anyone else seeing this behavior, and did you get it to stop? I am assuming that scripting the setup of this is a somewhat easy fix, but there has got to be a less time-consuming fix for this bug?
Have not been able to replicate this behavior since I first experienced it so I'm marking this answered until I am able to replicate or find a cause for it.
I've been working on a Skrollr site but it appears to be getting excessively jerky. I've had dev tools open and have found a few really really slow frames, but I don't have the knowledge to track down exactly what is going wrong.
My observations are:
it is slower scrolling down than up
intermittently it is absolutely fine
So far I have tried a few things
Given the first segment a translateZ value to try and separate out the paint (I have no idea if this is correct – I'm really at the limit of my knowledge!)
Had a go getting rid of the relative animations (data-top-bottom etc) which could well be slowing things down, but after changing everything back to static numbers (data-1000 etc) its still almost identical
Can anyone shed any light on this? The URL is http://fieldviewfestival.co.uk/500 ... power up!
I think I've fixed it!
The webfonts weren't fully loaded when skrollr kicked in. After initializing it I added a
$(window).load(function(){
Where I refreshed skrollr I then added the following:
s.refresh();
I think the main problem was that the height of the page wasn't calculated by the time skrollr kicked in.
Also I had a strange scrollbar left over (so a scrollbar on the body AND html), which skrollr hadn't removed so I also added above that function
$(window).trigger('resize');
The final initialize looks like this:
var s = skrollr.init();
$(window).load(function(){
// console.log("Loaded");
$(window).trigger('resize');
s.refresh();
});
NB Silly miskate I made as well, don't use the function $(document).load(
I'm trying to do some animations using Java3D on a Mac.
If I use universe = new SimpleUniverse(); to create a universe, everything is fast. The problem is that there's a bit of tearing sometimes because I'm altering object properties while in the middle of rendering. What I would like to do is stop the rendering while I'm updating properties.
My first step was to try creating my own Canvas3D, and that's where things went wrong. Rather than just creating a SimpleUniverse, I do this sort of thing:
GraphicsConfiguration config = SimpleUniverse.getPreferredConfiguration();
canvas = new Canvas3D(config);
universe = SimpleUniverse(canvas);
When I do this, the first problem is that the window doesn't automatically appear. So based on the example at java2s, I embedded the Canvas3D in an applet. Then I get a window, but performance is TERRIBLE. The rendering is MUCH slower.
It's almost as though the rendering is no longer being done by the graphics engine but instead in software.
Can anyone give me some tips as to what I'm doing wrong here?
Thanks!
You should try compiling your BranchGroups before they become live. This helps preprocess the objects before they get displayed in the universe. It might also be something else that java is getting hung up on, if you put the whole source in the question, then i could tell you more. It might also just be your computer, Java3D takes a big hunk of Memory and is pretty CPU intensive, your computer specs would also be relevant in answering this question
Hope that helped you out a little bit, if you add more to your question i would be happy to help you more