Is it possible to combine Sprites as Geometries in Three.js?

Question

Is it possible to combine Sprites as Geometries in Three.js?

My dilemma involves placing labels with the names of cities on a terrain. However, once the number of labels exceeds ten, the frames per second drastically decrease.

I've tried implementing the code provided at

My code looks something like this:

var canvas = document.createElement('canvas');
var canvasSize = 250;
canvas.width = canvasSize;
canvas.height = canvasSize;
var context = canvas.getContext('2d');
context.font = "Bold " + size + "px " + font;
context.textAlign = 'center';

context.fillStyle = "rgba(10, 10, 10, 1.0)";

context.fillText(text, canvasSize / 2, canvasSize / 2);

var texture = new THREE.Texture(canvas);
texture.needsUpdate = true;

var labelMaterial = new THREE.SpriteMaterial(
        {map: texture, useScreenCoordinates: false});
var label = new THREE.Sprite(labelMaterial);

label.position.x = this._vector.x;
label.position.y = this._vector.y;
label.position.z = this._vector.z;

label.scale.set(10, 10, 1.0);

scene.add(label);

I believe the issue with the decreasing fps when merging sprites is due to each label having a different texture.

Thank you in advance!

javascript three.js sprite

Answer 1

Answer №1

In order to achieve maximum performance enhancement (requiring more effort than suggested by @raphaelRauwolf, we're talking about a significant amount of work here), one would need to utilize the ParticleSystem (rendered with GL_POINT) along with a dynamically allocated TextureAtlas that incorporates subimaging (https://github.com/mrdoob/three.js/pull/4661) based on the camera's nearest neighbors (). For the nameplates that are not within the camera's vicinity, a separate TextureAtlas with smaller preview nameplates can be used.

If you have roughly 1,000 nameplates, you can achieve similar results without using nearestneighbour and subimaging. Simply create a TextureAtlas containing all the nameplates and render them with the THREE.ParticleSystem :)

If you're interested in implementing either of these approaches, let me know, and I can provide further details.

Answer 2

In order to achieve maximum performance enhancement (requiring more effort than suggested by @raphaelRauwolf, we're talking about a significant amount of work here), one would need to utilize the ParticleSystem (rendered with GL_POINT) along with a dynamically allocated TextureAtlas that incorporates subimaging (https://github.com/mrdoob/three.js/pull/4661) based on the camera's nearest neighbors (). For the nameplates that are not within the camera's vicinity, a separate TextureAtlas with smaller preview nameplates can be used.

If you have roughly 1,000 nameplates, you can achieve similar results without using nearestneighbour and subimaging. Simply create a TextureAtlas containing all the nameplates and render them with the THREE.ParticleSystem :)

If you're interested in implementing either of these approaches, let me know, and I can provide further details.

Answer 3

Answer №2

Essentially, you can create a canvas object for each label to improve performance. By encoding the image in Base64 format from the canvas and passing it to the texture, you can write the next label onto the same canvas. Here's an example:

// initialize the canvas once
var canvas = document.createElement('canvas');

// set the canvas size
var sizeCanvas = 250;
canvas.width = sizeCanvas;
canvas.height = sizeCanvas;

// set the context and styles
var context = canvas.getContext('2d');
context.font = "Bold " + size + "px " + font;
context.textAlign = 'center';
context.fillStyle = "rgba(10, 10, 10, 1.0)";

// loop through the labels
for(var i = 0, j = myLabels.length; i < j; i++){
  contex.fillText(myLabels[i].text, sizeCanvas / 2, sizeCanvas / 2);

  // create the texture
  var texture = new THREE.Texture(canvas.toDataURL());
  texture.needsUpdate = true; // unsure if this is necessary

  // assign the texture to the material
  var labelMaterial = new THREE.SpriteMaterial({map: texture, useScreenCoordinates: false});

  var label = new THREE.Sprite(labelMaterial);

  // set the label position to the vector
  label.position = this._vector.clone();

  // add the label to the scene
  scene.add(label);

  // clear the canvas for the next text
  context.clearRect(0,0,sizeCanvas,sizeCanvas);
}

etiqueta.scale.set(10, 10, 1.0);

Answer 4

Essentially, you can create a canvas object for each label to improve performance. By encoding the image in Base64 format from the canvas and passing it to the texture, you can write the next label onto the same canvas. Here's an example:

// initialize the canvas once
var canvas = document.createElement('canvas');

// set the canvas size
var sizeCanvas = 250;
canvas.width = sizeCanvas;
canvas.height = sizeCanvas;

// set the context and styles
var context = canvas.getContext('2d');
context.font = "Bold " + size + "px " + font;
context.textAlign = 'center';
context.fillStyle = "rgba(10, 10, 10, 1.0)";

// loop through the labels
for(var i = 0, j = myLabels.length; i < j; i++){
  contex.fillText(myLabels[i].text, sizeCanvas / 2, sizeCanvas / 2);

  // create the texture
  var texture = new THREE.Texture(canvas.toDataURL());
  texture.needsUpdate = true; // unsure if this is necessary

  // assign the texture to the material
  var labelMaterial = new THREE.SpriteMaterial({map: texture, useScreenCoordinates: false});

  var label = new THREE.Sprite(labelMaterial);

  // set the label position to the vector
  label.position = this._vector.clone();

  // add the label to the scene
  scene.add(label);

  // clear the canvas for the next text
  context.clearRect(0,0,sizeCanvas,sizeCanvas);
}

etiqueta.scale.set(10, 10, 1.0);

Is it possible to combine Sprites as Geometries in Three.js?

Answer №1

Answer №2

Similar questions

Using JavaScript to search JSON objects based on key value pairs

Tips for attaching inline styles to the body element with a vuejs component

Sliding in images with JQuery

Eliminating any spaces in the password prior to finalizing the form submission

Tips for minimizing the transfer time of large arrays using ajax

Tips for removing unnecessary debugging code from JavaScript when compiling or minifying your code

Building New Web Pages with Express in Node.JS

Analyzing an Object through Functions

Having trouble getting the Pokemon modal to show both the type and image?

What is the best method to securely install a private Git repository using Yarn, utilizing access tokens without the need to hardcode them

JavaScript - Functions in objects losing reference to previously created object properties

Design a clear button for MUI autocomplete feature

Removing Multiple Object Properties in React: A Step-by-Step Guide

Check out the latest enhancements to React and Flask Fullstack right from your web browser

Format a JSON file using clang-format

Just easy highlighting using tags in Javascript

Leveraging AngularJS $filter in conjunction with ng-disabled

The compatibility between Polymer JS and Rails Turbolinks is problematic

What steps do I need to take to adjust this function based on the timezone?

The <script> element failed to close correctly