How to recycle a texture in three.js?

Question

How to recycle a texture in three.js?

Within my software, I come across numerous instances where I create geometries, each with its own meshing preferences (double-sided or not? Lambert or basic material?). Despite these variations, they all share the same texture. My goal is to load this common texture just once, presenting a design challenge:

While using TextureLoader.load() to load the texture, it can only be utilized within the callback function provided to the load method. This necessitates gathering information about all geometry instances and their specific preferences before loading the texture. By doing so, I can make this data accessible (via a closure) to the callback function when the loading process begins.

I wonder if there exists a standard solution to address this issue. Perhaps fellow three.js users have faced similar dilemmas. One possible approach involves utilizing promises: the load function returns a promise representing the texture, which can then be passed on to different locations requiring meshed geometries. This method proves convenient as it eliminates the need to accumulate large amounts of geometry data solely for later transmission in one go.

However, are there alternative solutions that offer similar convenience within the realm of callback semantics?

javascript three.js

Answer 1

Answer №1

To tackle the issue, I decided to go with the Promise approach by encapsulating the TextureLoader.load() call within JavaScript's native promise-returning constructor called Promise:

var loadTexture_promise = ( texture_path, texture_loader ) => {
    var texture_promise;

    if (loadTexture_promise.texturePromises_cache[texture_path] !== undefined) {
        return loadTexture_promise.texturePromises_cache[texture_path];
    }

    texture_promise = new Promise(
        function(resolve, reject) {
            texture_loader.load(
                texture_path,
                function(texture) {
                    resolve(texture);
                },
                function(XmlHttpRequest_instance) {
                    // Progress callback of TextureLoader
                },
                function(unknown_parameter) {
                    reject(new Error('Could not load texture ' + texture_path));
                }
            );
        }
    );

    loadTexture_promise.texturePromises_cache[texture_path] = texture_promise;

    return texture_promise;
};
loadTexture_promise.texturePromises_cache = [];

Next, I implemented a function named lambertMesher which can be invoked by my geometry suppliers:

function lambertMesher(aGeometry, aTexture_promise, doubleSided, debug) {
    var aMesh_promise = aTexture_promise.then(
        (resolved_texture) => {
            var material, mesh;

            if (debug){
                console.log("resolved_texture: ", resolved_texture);
                console.log("aGeometry: ", aGeometry);
            }

            resolved_texture.minFilter = THREE.NearestFilter;

            if (doubleSided) {
                material = new THREE.MeshLambertMaterial({ map: resolved_texture, side: THREE.DoubleSide });
            } else {
                material = new THREE.MeshLambertMaterial({ map: resolved_texture, emissive: 0xffffff });
            }

            mesh = new THREE.Mesh(aGeometry, material);

            if (debug) {
                console.log("mesh: ", mesh);
            }

            return mesh;
        },
        (reason_of_textureLoading_failure) => {
            console.log("meshing failed. Also: " + reason_of_textureLoading_failure)
        }
    );

    return aMesh_promise;
}

Finally, this is how I make use of the lambertMesher function:

var myPlateGeom = new THREE.PlateGeometry(myPlatePolygonSet, true);
var myPlateMesh_promise = utils_meshers.lambertMesher(myPlateGeom, myRobinieTexture_promise, true, false);

Lastly, I add the generated mesh to my scene in the following manner:

myPlateMesh_promise.then(
    (myPlateMesh) => { myScene.add(myPlateMesh) },
    (reason) => console.log("failed to add myPlateMesh. Also: " + reason)
);

Answer 2

To tackle the issue, I decided to go with the Promise approach by encapsulating the TextureLoader.load() call within JavaScript's native promise-returning constructor called Promise:

var loadTexture_promise = ( texture_path, texture_loader ) => {
    var texture_promise;

    if (loadTexture_promise.texturePromises_cache[texture_path] !== undefined) {
        return loadTexture_promise.texturePromises_cache[texture_path];
    }

    texture_promise = new Promise(
        function(resolve, reject) {
            texture_loader.load(
                texture_path,
                function(texture) {
                    resolve(texture);
                },
                function(XmlHttpRequest_instance) {
                    // Progress callback of TextureLoader
                },
                function(unknown_parameter) {
                    reject(new Error('Could not load texture ' + texture_path));
                }
            );
        }
    );

    loadTexture_promise.texturePromises_cache[texture_path] = texture_promise;

    return texture_promise;
};
loadTexture_promise.texturePromises_cache = [];

Next, I implemented a function named lambertMesher which can be invoked by my geometry suppliers:

function lambertMesher(aGeometry, aTexture_promise, doubleSided, debug) {
    var aMesh_promise = aTexture_promise.then(
        (resolved_texture) => {
            var material, mesh;

            if (debug){
                console.log("resolved_texture: ", resolved_texture);
                console.log("aGeometry: ", aGeometry);
            }

            resolved_texture.minFilter = THREE.NearestFilter;

            if (doubleSided) {
                material = new THREE.MeshLambertMaterial({ map: resolved_texture, side: THREE.DoubleSide });
            } else {
                material = new THREE.MeshLambertMaterial({ map: resolved_texture, emissive: 0xffffff });
            }

            mesh = new THREE.Mesh(aGeometry, material);

            if (debug) {
                console.log("mesh: ", mesh);
            }

            return mesh;
        },
        (reason_of_textureLoading_failure) => {
            console.log("meshing failed. Also: " + reason_of_textureLoading_failure)
        }
    );

    return aMesh_promise;
}

Finally, this is how I make use of the lambertMesher function:

var myPlateGeom = new THREE.PlateGeometry(myPlatePolygonSet, true);
var myPlateMesh_promise = utils_meshers.lambertMesher(myPlateGeom, myRobinieTexture_promise, true, false);

Lastly, I add the generated mesh to my scene in the following manner:

myPlateMesh_promise.then(
    (myPlateMesh) => { myScene.add(myPlateMesh) },
    (reason) => console.log("failed to add myPlateMesh. Also: " + reason)
);

How to recycle a texture in three.js?

Answer №1

Similar questions

Enable parents to make all children draggable, so that when a child is clicked, it becomes draggable and sortable

Managing asynchronous tasks that do not save their outcomes within the application state

Is there a way to show an incorrect username and password message directly above the sign-in form?

Embed Google Maps using PHP

Ways to update a row in ui-grid?

No Access-Control-Allow-Origin or Parsing Error with jQuery

JavaScript Age Calculator - Counting Days

One Background Image Serving Multiple Divs

Is there a way to verify if an element is visible using Puppeteer and only plain JavaScript?

Issue with VUE JS: Score not increasing on click event as desired

Feed JSON data into a jQuery function using JavaScript

Cordova Geolocation now displaying incorrect latitude and longitude values as NAN

How to Utilize Vue and Checkboxes for Filtering a List?

Guide on triggering an open modal when clicking a link using jQuery

Adjusting the heights of all elements with identical ids simultaneously

Replacing child routes with an Angular wildcard route

Tips for accessing JSON values in JavaScript

Here is a method to display a specific string in the mat-datepicker input, while only sending the date in the backend

Tips on transferring JSON data to an AngularJS directive

The Efficiency of Three.js: Analyzing RendererStats Vertex Count