Three.js: It seems that THREE.WebGLRenderer detected the image is not a power of two, originally sized at 1600x900. It was resized to 102

Question

Three.js: It seems that THREE.WebGLRenderer detected the image is not a power of two, originally sized at 1600x900. It was resized to 102

As I dive into learning three.js, one of my goals is to incorporate a 16x9 photo into my scene.

Below is the snippet of code where I add an Array of images to my scene:

  const material = new MeshBasicMaterial({
    map: loader.load(images[i]),
    transparent: true,
    opacity: 1,
  });
  const plane = new Mesh(new PlaneGeometry(imageWidth, 45), material);
  plane.overdraw = true;
  plane.position.x = i * (imageWidth + imageOffset);
  plane.position.y = 0;
  this.introImages.push({
    obj: plane,
    round: 1,
  });
  this.introImagesGroup.add(this.introImages[i].obj);

A console warning has surfaced:

THREE.WebGLRenderer: image is not power of two (1600x900). Resized to 1024x512

The literature suggests that texture dimensions should be the power of two for optimization purposes. This leads me to question if my current approach to adding images to the scene in three.js is the most optimal, or if there are alternative methods for incorporating non-power of two images?

javascript three.js

Answer 1

Answer №1

If you prefer not to compromise the quality of your images by scaling them down with THREE.js, it's best to scale them up to the next ^2 resolution. There are two approaches you can take:

You can enlarge your image and export it at a ^2 resolution 2048 x 1024 using your preferred photo editing software.

Alternatively, you can dynamically create a 2048 x 1024 canvas, draw the scaled-up image onto it, and utilize this canvas as the source for your texture:

var imgURL = "path/to/whatever.jpg";

// Create image element
const image = document.createElement('img');
image.src = imgURL;

// Once image is loaded
image.onload = () => {
    // Create canvas and set ^2 dimensions
    var canvas = document.createElement('canvas');
    canvas.width = 2048;
    canvas.height = 1024;

    // Draw image onto canvas, scaled to fit
    var ctx = canvas.getContext('2d');
    var ctx.drawImage(image, 0, 0, 2048, 1024);

    // Create texture
    var texture = new THREE.Texture(canvas);
};

You can then assign the texture variable to the desired material, ensuring Three.js functions smoothly without issues.

Edit:

To avoid texture resizing, simply adjust your texture.minFilter to THREE.NearestFilter or THREE.LinearFilter, which will prevent engine warnings. However, bear in mind that this may lead to grainy or aliased textures when scaled down, as they will not be Mipmapped.

The outcome could either be favorable or unappealing, depending on your project. You can observe the effects of using NearestFilter in this sample:

Answer 2

If you prefer not to compromise the quality of your images by scaling them down with THREE.js, it's best to scale them up to the next ^2 resolution. There are two approaches you can take:

You can enlarge your image and export it at a ^2 resolution 2048 x 1024 using your preferred photo editing software.

Alternatively, you can dynamically create a 2048 x 1024 canvas, draw the scaled-up image onto it, and utilize this canvas as the source for your texture:

var imgURL = "path/to/whatever.jpg";

// Create image element
const image = document.createElement('img');
image.src = imgURL;

// Once image is loaded
image.onload = () => {
    // Create canvas and set ^2 dimensions
    var canvas = document.createElement('canvas');
    canvas.width = 2048;
    canvas.height = 1024;

    // Draw image onto canvas, scaled to fit
    var ctx = canvas.getContext('2d');
    var ctx.drawImage(image, 0, 0, 2048, 1024);

    // Create texture
    var texture = new THREE.Texture(canvas);
};

You can then assign the texture variable to the desired material, ensuring Three.js functions smoothly without issues.

Edit:

To avoid texture resizing, simply adjust your texture.minFilter to THREE.NearestFilter or THREE.LinearFilter, which will prevent engine warnings. However, bear in mind that this may lead to grainy or aliased textures when scaled down, as they will not be Mipmapped.

The outcome could either be favorable or unappealing, depending on your project. You can observe the effects of using NearestFilter in this sample:

Answer 3

Answer №2

Is there a different way to add images in a scene in three.js that don't necessarily need to have dimensions that are a power of two to be optimized for memory storage?

In order to use mipmapping in WebGL 1, textures should have dimensions that are a power of two. However, if you set the .minFilter property of your canvas texture to THREE.LinearFilter, you can eliminate this requirement. Keep in mind that mipmapping is not always needed for every situation.

Answer 4

Is there a different way to add images in a scene in three.js that don't necessarily need to have dimensions that are a power of two to be optimized for memory storage?

In order to use mipmapping in WebGL 1, textures should have dimensions that are a power of two. However, if you set the .minFilter property of your canvas texture to THREE.LinearFilter, you can eliminate this requirement. Keep in mind that mipmapping is not always needed for every situation.

Three.js: It seems that THREE.WebGLRenderer detected the image is not a power of two, originally sized at 1600x900. It was resized to 102

Answer №1

Edit:

Answer №2

Similar questions

Is it possible to align a div on the same line with an h1 header that spans multiple lines using CSS?

Display the initial page and activate the first navigation button when the page loads

Deconstructing JavaScript scripts to incorporate HTML5/CSS3 functionality for outdated browsers such as Internet Explorer

Incorrect handling of Unix timestamps in AngularJS

Ways to eliminate the worldwide model in SAPUI5

Are there advantages to incorporating d3.js through npm in an Angular 2 TypeScript project?

Strange symbols were stored in the database after saving the textarea value

Populate a div using an HTML file with the help of AJAX

Cookies are strangely absent from the ajax call to the web api - a puzzling issue indeed for Web Api users

Troubleshooting: Issues with updating a text field in Vue test utils using Jest

Struggling to get the hang of CSS animation?

Store the output of a mysql query in a variable for future reference

Transforming a series of intervals into a condensed list

Setting up paths to bypass authentication on an Express website

Issues arising during the initialization of Tinymce

Obtain the URL for making an asynchronous request using PHP and SQL

I encountered a blank page issue when incorporating ui.bootstrap into my controller within Angular

button for resetting the zoom in Highcharts

What is the best method for linking JavaScript to Python while exchanging data in JSON format bidirectionally?

Web2py exhibits varying behavior between local and online versions, where it executes server code but results in a 404 error