Creating one million cube illustrations

I am in need of creating terrain using a single cube with dimensions of 1x1x1. The coordinates for this terrain are stored in a .txt file and consist of approximately 11 million triplets.

My current code is facing limitations as it can only render around 60k of these triplets before causing the browser tab to reset and prompting me to stop an unresponsive script. This issue is due to the excessive memory and time required to generate all the data points.

Below is a snippet of the code responsible for rendering the cubes:

function generateCubes(data) {
    var cubeGeometry = new THREE.CubeGeometry(cubeSize, cubeSize, cubeSize);
    var material = new THREE.MeshLambertMaterial({color: 0x587058});
    var mesh = new THREE.Mesh(cubeGeometry, material);
    var mergedGeo = new THREE.Geometry();
    var instance;
    var line = data[0].split(';');
    var translateX = line[0], translateY = line[1], translateZ = line[2];
    //var group = new THREE.Object3d();
    for(var i = 0; i < 100000; i++) { // should go to data.length
        line = data[i].split(';');
        //instance = mesh.clone();
        //instance.position.set(line[0] - translateX, line[2] - translateZ, line[1] - translateY);
        //group.add(instance);
        mesh.position.x = Number(line[0]) - translateX;
        mesh.position.y = Math.round(Number(line[2]) - translateZ);
        mesh.position.z = Number(line[1]) - translateY;
        mesh.updateMatrix();
        mergedGeo.merge(instance.geometry, instance.matrix);
    }
    group = new THREE.Mesh(mergedGeo, material);
    scene.add(group);
}

This function is invoked upon successful completion of an $.ajax call.

The commented sections in the code suggest that without using merged geometry, I am able to render approximately 100k data points.

Any assistance on resolving this issue would be greatly appreciated.

UPDATE: I came across this question, but it did not provide much help in my case.

Answer №1

If you're seeking voxel rendering, there are two primary paths to achieve this: A) volume rendering, although webgl doesn't fully support hardware 3D textures. B) mesh surface generation and standard polygon rendering may be your best bet right now. So far, a truly efficient JavaScript implementation seems elusive in the public sphere.

Here's what you should do:

  1. Segment your world into chunks of equal dimensions; chunk sizes should ideally be powers of 2 for faster processing.
  2. Create a data structure capable of storing your extensive 11 million voxel dataset. This likely involves organizing Int32Arrays and utilizing bitwise operators for data access/storage on each voxel.

  3. Generate the surface mesh for each chunk. Refer to this link for more information.

  4. Consider implementing a system for generating low LOD meshes for chunks that are distant from the camera (optional).
  5. Render all visible frustum chunks in a front-to-back order.

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

How does an iOS device typically manage the :hover pseudo-class?

My div is designed to expand when clicked using jQuery $('.mydiv').click, and collapse with a second click. In addition, the same div showcases more information on hover due to CSS rules utilizing :hover. This feature works perfectly on a comput ...

Chrome is blocking my ajax cross-origin request, causing it to be cancelled

I have been working on a Google Chrome extension and encountering an issue with my ajax requests. Every time my extension sends a request, it ends up getting cancelled for some unknown reason. The following code snippet seems to be functioning properly: ...

Client-side sorting in jqGrid

I'm working with a tree-grid that has autoloading rows. My objective is to sort the grid by the tree column directly on the client side. However, every time I click on the column header to sort, it triggers an unnecessary Ajax call for sorting, when ...

What is the best way to transfer a PHP variable to an external PHP file I am retrieving data from using AJAX?

I have two files named index.php and ajax.php. In index.php, I am using AJAX to retrieve data from ajax.php and display it on the page. I want to pass the username to ajax.php so that I can use it in my SQL statement. Does anyone know how I can accomplish ...

The JavaScript function is unable to fetch information from the controller

I am working with a controller called Map1 that returns a JSON object. Within my scripts folder, there is a .js file named init.js. In this file, I am attempting to call the controller using the following code: $(document).ready(function() { $.getJSO ...

Switching Tabs When a Button is Clicked

I am currently using a guide from the link provided to learn how to create tabs: http://www.w3schools.com/howto/howto_js_tabs.asp. function openTab(evt, tabName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClass ...

Is there a way to remove array elements once in order to replace them with new ones using a for loop?

My objective is to achieve the following: Assign an array value (list) to another array (options). If the user input (searchVal) matches a value in the list, remove existing options and add this match. Subsequently continue adding any additional matches w ...

What is the best approach for choosing an object's properties by delving into its nested properties with Lodash?

My dilemma involves selecting the properties of an object based on certain values within the nested properties. I have been attempting to achieve this using Lodash's pick() method, with the code looking something like this: const object = { a ...

Tips on transforming a JSON array object into a JSON array

**Background:** I have been utilizing lodash to eliminate the empty key from my JSON data. However, upon removal of the keys, it transforms my array into an object. For instance: { "projection": "Miller", "series": [ { "mapPolygons": { ...

Discover the best way to implement aliases for embedded base 64 images within HTML code

I am trying to incorporate Base64 embedded images into my HTML file, but the image sizes are over 200k, making the base64 data part very large. To address this issue, I would like to place these images in another tag, such as a script, and attach them at ...

Could someone assist me in figuring out the reason behind my fetch method sending undefined values?

Looking for some assistance with my fetch implementation issue. I am currently working on integrating stripe into my online grocery store website utilizing a node.js server with express, and ejs for frontend integration. The client-side JavaScript uses a f ...

encountering a loading issue with angular2-modal in rc1 version

Currently, I am implementing a library called angular2-modal. This library offers various modal options including bootstrap and vex for angular 2. While vex is functioning properly, I encounter an error when switching to bootstrap: responsive-applicati ...

Problem with adding card to customer in Stripe using Angular 2 and Express

I encountered an issue while attempting to add a card to a customer. My Express server, which handles the post request to Stripe, successfully registers a new customer but fails to include credit card information for the new customer. Within my Angular 2 ...

THREE.js displays incorrect animations when importing JSON models exported from Blender

My walk animation created in Blender looks great during playback: https://i.sstatic.net/giJZH.gif However, when I export it to THREE.js using the exporter tool, the animation appears distorted on the browser: https://i.sstatic.net/5XdJX.gif The geometr ...

Exploring the fusion of hierarchical edge bundling and radial Reingold-Tilford tree visualization techniques with d3.js and data integration

I'm interested in combining the concepts of Hierarchical Edge Bundling and Radial Reingold–Tilford Tree. The end result would resemble this rough sketch: The visualization I have created showing simple data in HEB can be found here: https://fiddle. ...

Tips for transferring information from an express rendering to a Vue component?

When working with an express route, page.js router.post('/results', (req, res, next) => { output.terms = "hello" output.results = [{"text": "hello world"}, {"text": "hello sunshine"}] res.render("/myview",output) }) The cod ...

Tips for hiding the overflow scrollbar on Microsoft Chrome when there is no content to scroll

Looking for a solution to hide scroll bars in Microsoft Chrome, but only when there is no content to scroll? The current div and styles always show the horizontal and vertical scroll bars, even when the height exceeds the content. <div style="backgroun ...

What is the best way to establish a client.js file for socket.io in Node.js?

I am looking to separate the client script from the index.html file in the chat application example found at https://socket.io/get-started/chat/. Currently, I am facing an issue where the message "a user connected" is not appearing when I refresh the webpa ...

Exploring the world of functional programming within nested arrays

I have been shifting towards functional programming over imperative programming recently. Imagine I have a nested array data structure and my goal is to update the values of the innermost arrays. What approach would be most effective? Here is the imperat ...

Error Message: TypeError - Unable to access property 'method' as it is not defined

I've just started working on a new node project and I've encountered an issue that I can't seem to figure out. :\Users\RTECH\Desktop\work\aumentedreality\modelViewerwithExpress\node_modules\express&b ...