Line2 disappearing on mobile (i.e. Safari) when updating geometry

Questions
, ,
1

This is a specific question off of this one on stackoverflow: https://stackoverflow.com/questions/64068230/my-three-js-application-is-not-running-on-mobile

While the application now does not seem to produce any more errors, there is an odd behaviour on my mobile browser causing objects to disappear.

For some background - I have a large amount of circles in my scene, each of which I model as a (fat) line with a discrete set of points, i.e. a Line2 instance. The positions of said line are calculated as follows:
The function stereographicProjection() returns an array projectedCirclePts of Vector3 objects. I then rearrange this to a float array projectedCirclePts_, and then I (re)set the positions of each line using .geometry.setPositions. It all works flawlessly in Firefox, but again, the objects just disappear in Safari.

I have narrowed it down to the following function upon whose call the lines disappear (The outer loop through vertices of base_geometry might seem odd, but this is intended - each vertex corresponds to a Line2-object which I need to update):

function updateFiberProjections() {
    for (var vertex in this.base_geometry.vertices) {
        var projectedCirclePts = stereographicProjection(hopfFiber1(this.base_geometry.vertices[vertex], fiberResolution));
        if (compressToBall)
            projectedCirclePts = compressR3ToBall(projectedCirclePts);
        var projectedCirclePts_ = [];
        for (var i = 0; i < fiberResolution+1; i++)
            projectedCirclePts_.push(projectedCirclePts[i].x, projectedCirclePts[i].y, projectedCirclePts[i].z);
        this.projectedCircles_objects[vertex].geometry.setPositions(projectedCirclePts_);
        this.projectedCircles_objects[vertex].geometry.verticesNeedUpdate = true;
    }
}

More precisely, it is exactly this line that causes it:
this.projectedCircles_objects[vertex].geometry.setPositions(projectedCirclePts_);
Once it is uncommented, the application works, but of couse the line positions remain static which I don’t want. Note that projectedCircles_objects[vertex] is a Line2 instance.

The full source code is on https://github.com/BaranCanOener/BaranCanOener.github.io - any help would be greatly appreciated.

Edit: The code can be run here. For example, checking the box “Map R3 to B3” causes the issue because this invokes updateFiberProjections().

2

On my Chrome on macOS your application actually generates the following warning when the geometry is modified (e.g. by changing the fiber resolution):

[.WebGL-0x7fb8f8819e00]GL ERROR :GL_INVALID_OPERATION : glDrawElementsInstancedANGLE: attempt to access out of range vertices in attribute 3

The lines also immediately disappear. This seems to happens since your positions and color attributes are out of sync. Besides verticesNeedUpdate does not exists for instances of LineGeometry. Your code might be actually more consistent if you work with BufferGeometry instead of Geometry.

1 Like
3

Thank you, that helped. I stayed away from using BufferGeometries for now and just reinstanced each object upon changing the parameters. This is not the most efficient way of doing things, but it works for now, seemingly without bugs/memory leaks.