CODEWITHSUNDEEP
javascriptthree.jsgisarcgis-js-api
LrakWortep
LrakWortep

Reputation: 217

THREE.js sparse planeBufferGeometry

I have a file with sparse elevations. It is based off of gps data. I have been using this data to populate an PlaneBuffer array with elevations.

var vertices = new Float32Array( (grid.NCOL*grid.NROW) * 4 );
for (var i = 0, q = vertices.length; i < q; i++){
        vertices[ i*3 + 0 ] = parseInt(i % (grid.NCOL+1)*4);
        vertices[ i*3 + 1 ] = parseInt(i / (grid.NCOL+1)*4);
    //  vertices[ i*3 + 2 ] = null; // makes no difference

    }
for (var i = 0, l = grid.NODES.length; i < l; i++) {
        var nodeNumber = grid.NODES[i][0];
        var elevation= grid.NODES[i][1];
        vertices[ nodeNumber*3 + 2 ] = elevation;
    }

My problem is that there are nodes that the elevation values are unknown(Vertex array is sparse with elevations) and should be represented by holes/cutouts in the plane. What I end up with is the null elevations being interpreted as 0 not as holes. I have started down the path of using a rawshader, but still not sure that making null values transparent is the correct method.

The below picture shows my issues. The circled area is a high wall that should not be there, because it triangulating to the "null/0" floor. The red-lines area is where we should have a hole. enter image description here

EDIT: Maybe this picture will help to. It is from the bottom. The null elevations being set to zero block the view of the plane and cause the edge of the plane to be triangulated to 0 elevation:enter image description here

Here is what our desktop application displays. Notice the edges of the plane are not triangulated down to zero but instead left sharp? enter image description here

Upvotes: 1

Views: 456

Answers (2)

LrakWortep
LrakWortep

Reputation: 217

Plane buffer Geometries take a Float32Array. This array is default set to 0. Using undefined setter allowed me to set the sparse array out of the float32 type. Attempts to set any value to null and NanN did not work.

RTFM:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/null https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array

final result as expected: enter image description here

Upvotes: 2

LrakWortep
LrakWortep

Reputation: 217

Your use case seems more appropriate for a point cloud with THREE.Points. potree.org/demo/potree_1.3/showcase/ca13.html – WestLangley 14 mins ago

This example helped:

http://threejs.org/examples/#webgl_buffergeometry_points

Upvotes: 0

Related Questions