Sparse planeBufferGeometry in THREE.js is a specialized type of geometry that

I am currently working with a file that contains sparse elevation data derived from GPS information. I have been utilizing this data to fill a 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;
    }

The issue I am facing is that there are nodes in the elevation data where values are unknown, resulting in holes or cutouts in the plane. However, the null elevations are currently being treated as 0 instead of representing holes. I have started exploring the use of a rawshader, but I'm uncertain if making null values transparent is the correct approach.

The image below illustrates my problem. The circled area shows a high wall that should not be present as it's triangulating to the "null/0" floor. The red-lined area indicates where a hole should be present. https://i.sstatic.net/cPliH.png

EDIT: Perhaps this image can provide additional clarity. It depicts the bottom view where null elevations set to zero obstruct the plane view and cause the edges to be triangulated at 0 elevation:https://i.sstatic.net/UREyF.png

Here is how our desktop application renders the result. Take note of the sharp edges on the plane rather than being triangulated down to zero? https://i.sstatic.net/MEGSU.png

Answer №1

When working with plane buffer geometries, it is important to note that they take a Float32Array by default, which is set to 0. By utilizing the undefined setter, I was able to manipulate the sparse array outside of the float32 type. It's worth mentioning that attempts to set any value to null or NanN proved unsuccessful.

For more information, please refer to:

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

The final result matched expectations: https://i.sstatic.net/iUl5Y.png

Answer №2

It looks like a point cloud with THREE.Points would be more suitable for your use case. Check out this showcase at potree.org/demo/potree_1.3/showcase/ca13.html – Comment from WestLangley 14 minutes ago

This particular example proved to be helpful:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble with the automatic closing feature of Bootstrap drop down in React?

While using the drop button feature of Bootstrap, I have encountered a situation where it works fine when clicked on, but disabling it by clicking outside using autoClose='outside' does not seem to work as expected. When I click on my hamburge ...

AngularJS and Spring Rest team up for seamless drag-and-drop file uploads

I have successfully implemented file upload using AngularJS and Spring REST, but now I want to change it to use dropzone.js or any other drag and drop file upload method. I tried using the dropzone.js library, but I am facing issues integrating it with Ang ...

how can a select dropdown be dynamically displayed based on the previous selection?

If the first dropdown is set to "Professor" I want to display a second dropdown, but if it is set to "Student" then I do not want to display the second dropdown. function checkPrivilege() { var privilege = document.getElementById("permisija5").value; ...

Tips for reducing the JavaScript file size outputted by a liquid template generator

Currently, I am working on enhancing the performance of my Shopify website and GoogleSpeed Insights is suggesting that I minify css and js files. However, the recommended files are all created by the liquid template generator, making it challenging to uti ...

Creating a flexible route path with additional query parameters

I am facing a challenge in creating a unique URL, similar to this format: http://localhost:3000/boarding-school/delhi-ncr However, when using router.push(), the dynamic URL is being duplicated like so: http://localhost:3000/boarding-school/boarding-school ...

When a model is changed from within a jQuery event, Angular 2 fails to update the view

During the development process, I encountered an issue while creating a custom search panel that displayed search results in a dropdown container. In my controller, I defined the following: export class ProductSearchComponent implements OnInit { publ ...

Only users who are logged in to Node.js can access the message

Whenever users are online and do not close our clients like a browser tab or android application, I have the ability to send a message to each specific user by utilizing the following code: socket.broadcast.to(socketId) .emit('new message', ...

NextJs does not allow external synchronous scripts

I am currently working with Next.js version 11.x Whenever I attempt to add an external script like the example below, I encounter an error when executing the yarn build. <Head> <link rel="stylesheet" type=" ...

The React component does not trigger a re-render

Using React Redux, I am able to pass values successfully. However, the component I intend to render only does so once. Interestingly, when I save my code in VSCode, it renders again and the data displays on the page as expected. return ( <div classN ...

Transforming 3D models from various formats such as 3ds, obj, and fbx into the gl

I'm in the process of integrating a 3D baseball stadium model into my next.js project using three.js/r3f. The issue I've encountered is that the specific model I require only supports fbx, 3ds, and obj formats, whereas to implement it as intende ...

Is there a way to dynamically alter the theme based on stored data within the store

Is it possible to dynamically change the colors of MuiThemeProvider using data from a Redux store? The issue I'm facing is that this data is asynchronously loaded after the render in App.js, making the color prop unreachable by the theme provider. How ...

Choosing specific anchors based on their corresponding div ids

Just beginning my journey with JS, looking to tackle an issue (I know, everyone says that!). My task is to create a script that can choose an anchor element and inject an <img>. Nested within a div with the id of _nwa_social_logins, there are multipl ...

Filtering data in AngularJS by parsing JSON records

I have a JSON file containing restaurant information and I need to display the data by grouping them based on their respective address fields. For example, all restaurants with the address 'Delhi' should be shown first, followed by those from &ap ...

Is there a way to exclusively use ES6 to import jQuery from an npm package?

After installing jQuery using npm -install jquery, a node_modules folder was created in my project with the jQuery library inside. However, I encountered an error when trying to import it using ES6 import. I am looking for a solution that does not involve ...

When using JQuery's :first selector, it actually chooses the second element instead of the first

I'm facing an issue with a JQuery script that makes an AJAX request to the following URL https://djjohal.video/video/671/index.html#gsc.tab=0, which holds information about a video song. My goal is to extract and retrieve all the details from the HTM ...

Concerns regarding code coverage when testing asynchronous functions using nockjs and jest

In my latest project, I've created a basic unit test for making API calls using NockJS and Jest within a React application. Here's a snippet of the code: AjaxService.js export const AjaxService = { post: (url, data, headers) => { ...

JSON containing attributes represented by Unicode characters

During the development of my web application, I am interested in utilizing JSON objects with Unicode attributes as shown below: a = { ονομα:"hello" } Subsequently, I would like to access it in this manner: a.ονομα Alternatively, exploring lo ...

Node/ejs not recognizing Javascript files

I have been working on implementing a JavaScript code to create a hamburger menu when the screen is at a specific size, but unfortunately, nothing seems to happen. Here is how my directory structure looks like: public imgs javascript menu. ...

On the server side, the received Req.body appears as an empty object: { }

import { Injectable } from '@angular/core'; import { Http, XHRBackend, RequestOptions, Request, RequestOptionsArgs, Response, Headers } from '@angular/http'; import { Observable } from 'rxjs/Observable'; impo ...

Utilizing JavaScript to Incorporate Node Packages

Sorry for the basic question, as I am fairly new to web development and JavaScript. I am trying to utilize a package that I installed via npm called shopify-buy by following the instructions provided at: The package is located in my node_modules director ...