Generating Over 50,000 Text Particles with the Power of THREE.js

Seeking to generate a character particle system with over 50,000 individual letters.

Came across a similar solution using XG here.

The main challenge lies in the application's performance when creating this.

Here is some concise pseudo code:

var field = new THREE.Object3D();
for (var i = 0; i < 50000; i++) {
    var canvas = document.createElement('canvas');
    var context = canvas.getContext('2d');
    context.fillText(char);
    var texture = new THREE.Texture(canvas)
    texture.needsUpdate = true;
    var spriteMaterial = new THREE.SpriteMaterial({map: texture});
    var sprite = new THREE.Sprite(spriteMaterial);
    sprite .position.set(x, y, z);
    field.add(textSprite);
}
scene.add(field);

My question now is, does anyone have an example or suggestion on the best approach to creating such a large number of textsprites?

Tried out this other example but wasn't successful.

Answer №1

It has been pointed out by Vals that for each letter, you are generating both material and texture. Although creating a canvas is an additional overhead, the main concern lies in the creation of individual materials for every render pass.

To optimize the process, leveraging look-up tables can significantly speed up the operation:

var materialLUT = {};
function getMaterialForCharacter(c){
    var m = materialLUT[c];
    if(m === void 0){
        //creating a new material
        var canvas = document.createElement('canvas');
        var context = canvas.getContext('2d');
        context.fillText(c);
        var texture = new THREE.Texture(canvas)
        texture.needsUpdate = true;
        m = materialLUT[c] = new THREE.SpriteMaterial({map: texture});
    }
    return m;
}
var field = new THREE.Object3D();
for (var i = 0; i < 50000; i++) {
    var spriteMaterial = getMaterialForCharacter(char);
    var sprite = new THREE.Sprite(spriteMaterial);
    sprite.position.set(x, y, z);
    field.add(textSprite);
}
scene.add(field);

Additionally, consider optimizing the use of PointCloud and explore utilizing a single texture while retrieving characters through UV mapping.

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

Exploring content in Embed message fields

Can anyone help me with logging the contents of an embed received from a specific bot? I've tried some basic things but seem to be missing something. Please review my code and let me know what I'm doing wrong and how I can improve it. Thank you i ...

The setInterval() function is not executing the IF Else statement correctly

I'm having an issue with accessing if else conditions. Currently, both the if block and else block are being called at the same time. I need help in making the if else block work properly. Here is a snippet of my code: const UserCard=(props)=>{ c ...

Identify when users reach the end of a webpage through scrolling using mousewheel actions and scroll events

I want to track when a user reaches the end of a page and tries to scroll further, even though there is no more content to see. One of my usability metrics includes identifying dead scrolls, so I need a reliable way to detect when users attempt to scroll ...

Using AngularJS to handle form data without ng-model

I am facing a unique situation that may seem a bit strange. I have a form that needs to edit/update information from different objects, such as services. My goal is to use ng-model to link input fields to their respective objects, but when the form is sub ...

Encountering a Module not found error with a ValidationError when trying to import an SVG file within a React

I've set up a manual Webpack 5 configuration for my React project with TypeScript. I am facing an issue while trying to import an SVG icon and using Material UI in the project. The error message I'm encountering is: Module not found: ValidationEr ...

Conceal the element if the output of express is void

I am currently developing an app using nodejs and express. I am retrieving JSON data from an endpoint and displaying it on the page based on the values received. The issue I am facing is that if I receive a null or undefined value from the JSON data, how ...

Securing Your ExpressJs API Files from Prying Eyes in Developer Tools

Typically, when I utilize developer tools in Google and choose to open an API file in a new tab, I am able to view the data as illustrated below. However, there are occasions where upon attempting the same action on certain websites, a security precaution ...

The asynchronous function is not being executed by onSubmit

I am attempting to create a function that will generate a gif when the "get gif" button is pressed. However, I am facing an issue where nothing shows up in the console and the page reloads. 1) The requirement is for the client to enter a value 2) Set th ...

Unable to substitute a value using the useState hook in React

Whenever I click a key, I attempt to update the value of a variable but it appears not to be working as intended. ↓ The current implementation is not effective and needs improvement import React, { useState, useEffect } from 'react'; const Li ...

Elegant method for politely asking individuals utilizing IE7 and earlier versions to leave?

TLDR: Politely ask IE6/7 users to switch browsers without accessing content. In essence, I don't want people using IE7/6 on my web app. I was considering using a doc.write function after loading to replace the page with a message stating "Sorry, your ...

Strategies for obtaining newly updated data with every request and implementing a no-cache approach in Apollo GraphQL and Angular

Every time a request is made, we need a fresh value, like a unique nonce. However, I am facing issues while trying to achieve this with Apollo's Angular client. My initial solution was to utilize watchQuery with the no-cache strategy: this.apollo.wat ...

Retrieving numerical values from strings using JavaScript

The text I have is formatted as follows: let str = "url(#123456)"; Within the given string, there is a number embedded in it. This number could appear anywhere in the string. I am looking to extract the number 123456 from the provided text. My current ...

In Safari, there seems to be an issue where multiple URLs are not opening when clicked on from an anchor

Is there a way to open multiple URLs in Safari with just one click using window.open? I tried it, but only one URL opens in a new tab while the others do not. The version of Safari I am using is 11.0.1. onclick="window.open('URL1','_blank& ...

Having trouble getting the npm package with @emotion/react and vite to function properly

Encountering an issue with the npm package dependencies after publishing, specifically with @emotion/react. This problem arose while using vite for packaging. Upon installing the package in another project, the css property appears as css="[object Ob ...

Leverage PHP to integrate JSON data for consumption by JavaScript

I've been exploring the integration of React (JavaScript) within a WordPress plugin, but I need to fetch some data from the database for my plugin. While I could retrieve this data in JavaScript using jQuery or an API call, because the data will remai ...

Simple steps for importing JS files in a web application

Upon examining the code snippet below: const express = require('express'); const app = express(); const http = require('http').Server(app); const io = require('socket.io')(http); const cors = require('cors'); app.u ...

What is the best way to connect the imagemap shape with the checkbox?

I need assistance with synchronizing an imagemap collection of shapes and checkboxes. How can I ensure that clicking on a shape selects the corresponding checkbox, and vice versa? Imagemap: <div class="map_container"> <%= image_tag("maps/main ...

Decode a chunked binary response using the Fetch API

Is there a way to properly handle binary chunked responses when using the Fetch API? I have implemented the code below which successfully reads the chunked response from the server. However, I am encountering issues with the data being encoded/decoded in a ...

Change the color of a c3js chart when it loads

I have been searching for a way to customize the color of a scatter chart's plot, and I came across an example that uses d3 code within the chart http://jsfiddle.net/ot19Lyt8/9/ onmouseover: function (d) { d3.select(d3.selectAll("circle ...

Adding numerous values to a single key in a JSON object

I am dealing with an array that looks like electronics = ["radio","Tv"] My goal is to create an object similar to { "Ids":"radio:Tv", "type":"electronics" } Any suggestions on how I can accomplish this? Thank you in advance ...