I want to merge several thousands of Line objects into a single geometry with GeometryUtils.merge to reduce lag, but it doesn't seem to work on Line objects. Is it possible? My technical mind says you would need to redefine what a line is.
Yes. This is something you will have to do manually.
three.js r.58
I was also facing this issue, and while searching bumped here. I solved this issue, for now,using third parameter for THREE.Line constructor. There are two types, THREE.LineStrip and THREE.LinePieces. I used later, it connects series of segments i.e. 0-1, 2-3 and so on, so I added set of vertices for a line like 0-1 1-2 2-3, and reset this sequence for next line. Hope it helps you, if you dont want to redefine Line implementation.
Related
I'm considering this problem for several days. still, I have no a beautiful answer.
How can i delete an instance between 0 and the limit? Someone recommended using updateRange. but, i still need move numbers' indices in the matrix.
That moving the indices and then using updateRange is a solution.
Is there a nice one?
I am trying to modify the classic "Blobs in a Jar" code to include more than one character variable. I want several different "blobs" to appear at the same time; currently the standard version has only the one "blob". But, every time I try to add more than one variable, only the first or last one will be read, and the rest will be ignored.
Here is the entire original code for reference. The line that I am referencing is at the start of the code, var charc=String.fromCharCode(9679); // a blob - can be changed to charc='hello' or charc='*' for a different effect
I have tried the following lists:
var charc='hello', 'hi', 'bonjour', 'hola', 'aloha';
I have also tried removing the commas, which stopped any variables from being read.
var charc='hello'
charc=,'hi'
charc=,'bonjour'
charc=,'hola'
charc=,'aloha';
This has also been tried with repeating lines of 'var charc' individually, instead of them being nested like this.
As far as I understand, this single line should be the only part of the code I need to edit, but I am afraid there's something else I'm missing here. Do I need to have additional instructions for multiple variables to be read at once? My very very very last resort will be using the entire script for every instance of blob that I want to have and hoping that's acceptable web-coding practice.
EDIT: I did try doing this, with some interesting results. The last instance is read and duplicated for every other instance, but the others are frozen in their first frame of animation while the last instance moves. Pretty cool, but it would be way cooler if I could get the other words to show up as well.
I've looked through as many Javascript help articles as I can stand, but they only go so far when I have no previous experience with Javascript. Sorry if the answer is kinda obvious ^^"
Defining more variables with the same name won't do anything, as only the most recently defined one will be accessible.
The code on the page doesn't support multiple words, and such a feature would need to be implemented.
I have an interesting (or maybe its plain simple) problem to solve.
There are different size blocks (say any real numbers like 0.5 or 50) to allocate among buckets. Bucket size is always 64.
The problem to solve is to allocate the blocks in such a way that least amount of space in buckets is wasted.
Going for naive solution one can just iterate over buckets and push nth element into first bucket that the block can fit into. If there are no buckets that can fit the element - new bucket is created.
Is there any better way to do that or is the naive solution also an optimal solution?
This is a mathematically complex question called the Bin Packing Problem.
You probably won't find an easy way to implement the optimal soloution. This page mentions one solution, to always put the block in the fullest bucket that can fit it.
I think analyzing the entire dataset beforehand is the key to an optimal solution, but it doesn't seem like it will be easy to implement.
You can keep the buckets sorted by available space (e.g. from the max space available till the least space available. Your algorithm would be:
Initially the list is empty.
Create the first block for the new coming block.
The next one one is coming. Check if it fits into the first bucket. If doesn't, create a new one and check for available. If the new one has more available space than the first one, place it in front of the list, otherwise append to the end.
Essentially the problem narrows down to performing a binary search to find which of the buckets will fit the new element and finding a new place for the element you've updated at the current step.
Here's the fiddle for it: https://jsfiddle.net/rujbra6y/3/
I'm already logging the speed so make any changes and just re-run it a couple times to see if the performance increased at all.
Been working on it for a couple hours and I can't think of anything else I can change to make it faster. I'd like it to be as fast as possible because currently there is a small delay when the user uses floodfill and for proper user experience, I'd like that delay to be as short as possible.
Are there any more optimizations or hacks I can use to increase the speed?
There are a couple of things you could do at a brief glance:
Replaced Uint8ClampedArray with Uint32Array. This will save you from unnecessary shifting and ANDing ops
Replace push/pop with a stack pointer, this way you just update instances
You could define a typed array (Int16Array) for the stack using a fixed size (be sure to make it large enough)
The only thing you need to be aware of for Uint32Array is the byte-order is little-endian, which mean you need to provide the target color in 0xAABBGGRR format (or do an initial bit-shift giving r,g,b as separate values).
With these changes (except the last) the code went down from about 69-75ms to 58-61ms on my computer (i5 at the moment).
Updated fiddle
I'll leave the typed array for stack as an exercise. :-)
Context :
I'm working on a pretty simple THREE.JS project, and it is, I believe, optimized in a pretty good way.
I'm using a WebGLRenderer to display lot's of Bode plot extracted from an audio signal every 50ms. This is pretty cool, but obviously, the more Bode I display, the more laggy it is. In addition, Bodes are moving at constant speed, letting new ones some space to be displayed.
I'm now at a point where I implemented every "basic" optimization I found on Internet, and I managed to get a 30 fps constantly at about 10.000.000 lines displayed, with such a bad computer (nVidia GT 210 and Core i3 2100...).
Note also i'm not using any lights,reflections... Only basic lines =)
As it is a working project, i'm not allowed to show some screenshots/code, sorry ...
Current implementation :
I'm using an array to store all my Bodes, which are each displayed via a THREE.Line.
FYI, actually 2000 THREE.Line are used.
When a Bode has been displayed and moved for 40s, it is then deleted and the THREE.Line is re-used with another one. Note that to move these, I'm modifying THREE.Line.position property.
Note also that I already disabled my scene and object matrix autoUpdate, as I'm doing it manually. (Thx for pointing that Volune).
My Question :
Do the THREE.Line.position modification induces some heavy
calculations the renderer has already done ? Or is three.js aware that my object did not change and
avoid these ?
In other words, I'd like to know if rendering/updating the same object which was just translated is heavier in the rendering process than just leaving it alone, without updating his matrix etc...
Is there any sort of low-level optimization, either in ThreeJS about rendering the same objects many times ? Is this optimization cancelled when I move my object ?
If so, I've in mind an other way to do this : using only two big Mesh, which are folowing each other, but this induces merging/deleting parts of their geometries each frames... Might it be better ?
Thanks in advance.
I found in the sources (here and here) that the meshes matrices are updated each frame no matter the position changed or not.
This means that the position modification does not induce heavy calculation itself. This also means that a lot of matrices are updated and a lot of uniforms are sent to the GC each frame.
I would suggest trying your idea with one or two big meshes. This should reduce javascript computations internal to THREE.js, and the only big communications with the GC will be relative to the big buffers.
Also note that there exists a WebGL function bufferSubData (MSDN documentation) to update parts of a buffer, but it seems not yet usable in THREE.js