The THREE.TextureLoader() function will repeatedly load a single texture, potentially more than 20 times

Question

The THREE.TextureLoader() function will repeatedly load a single texture, potentially more than 20 times

An issue has been discovered with the THREE.TextureLoader() function, as it seems to load the same assets multiple times (often 20 times or more) in an unexpected and erroneous manner.

The screenshot below from the browser console illustrates this behavior:

https://i.sstatic.net/Bdhg9.jpg

See the code snippet below that is used to load and apply textures:

Element.prototype.createShaderMaterial = function (uniforms, vertexShader, fragmentShader) {
    var loader = new THREE.TextureLoader();
    uniforms.texture.value = loader.load(this.texture);

    return new THREE.ShaderMaterial({
        uniforms: uniforms,
        vertexShader: vertexShader,
        fragmentShader: fragmentShader,
        wireframe: true
    });
};

A live preview of the issue can be found at: and the game's code is available here: https://github.com/alexprut/earth-defender/tree/master/client/js

What could be causing this behavior? Why is the same image being loaded multiple times?

javascript three.js

Answer 1

Answer №1

It is a known fact that the THREE.TextureLoader() function does not cache textures by default. This can lead to multiple HTTP requests being made for the same texture if used repeatedly in different objects.

Fortunately, a solution to this caching issue can be implemented using a simple cache module following the Singleton or Module pattern:

var TextureLoader = (function () {
    var _instance = null;

    var Loader = function () {
        var _loader = new THREE.TextureLoader();
        var _cache = [];

        function _cachePush(elem, val) {
            _cache.push({
                element: elem,
                value: val
            });
        }

        function _cacheSearch(elem) {
            for (var i = 0; i < _cache.length; i++) {
                if (_cache[i].element === elem) {
                    return _cache[i].value;
                }
            }

            return false;
        }

        function load(texture) {
            var match = _cacheSearch(texture);

            if (match) {
                return match;
            }

            var val = _loader.load(texture);
            _cachePush(texture, val);

            return val;
        }

        return {
            load: load
        }
    };

    function getInstance() {
        return (_instance) ? _instance : _instance = Loader();
    }

    return {
        getInstance: getInstance
    }
})();

To efficiently use and cache textures, simply call the following function:

TextureLoader.getInstance().load(texture);

Answer 2

It is a known fact that the THREE.TextureLoader() function does not cache textures by default. This can lead to multiple HTTP requests being made for the same texture if used repeatedly in different objects.

Fortunately, a solution to this caching issue can be implemented using a simple cache module following the Singleton or Module pattern:

var TextureLoader = (function () {
    var _instance = null;

    var Loader = function () {
        var _loader = new THREE.TextureLoader();
        var _cache = [];

        function _cachePush(elem, val) {
            _cache.push({
                element: elem,
                value: val
            });
        }

        function _cacheSearch(elem) {
            for (var i = 0; i < _cache.length; i++) {
                if (_cache[i].element === elem) {
                    return _cache[i].value;
                }
            }

            return false;
        }

        function load(texture) {
            var match = _cacheSearch(texture);

            if (match) {
                return match;
            }

            var val = _loader.load(texture);
            _cachePush(texture, val);

            return val;
        }

        return {
            load: load
        }
    };

    function getInstance() {
        return (_instance) ? _instance : _instance = Loader();
    }

    return {
        getInstance: getInstance
    }
})();

To efficiently use and cache textures, simply call the following function:

TextureLoader.getInstance().load(texture);

The THREE.TextureLoader() function will repeatedly load a single texture, potentially more than 20 times

Answer №1

Similar questions

"Enhance your networking capabilities with a Node.js HTTP proxy featuring a dynamic proxy

Issue encountered while generating a package using npm init in Node.js

Make the element switch from hidden to visible when hovering over it using CSS

Ways to retrieve lost methods in django-endless-pagination?

Add a CSS file to the browser-sync with proxy functionality

Retention of user-entered data when navigating away from a page in Angular

Checking dates in a JavaScript form

Twilio's phone calls are programmed to end after just 2 minutes

Unregistering an event with AngularJS

Utilizing query parameters in JavaScript

`Incorporating dynamic link filtering in vis.js`

Vite terminal not executing Npm commands

How to identify generic return type in TypeScript

React: Introducing the latest router feature post-login

Can you clarify the functionality of this loop? I am having trouble grasping how it produces the final result

Customizing the color of cells in an HTML table within a JSON based on their status

Importing events from the calendar causes disarray in other data columns when sorted by date

Displaying mysqli results within a div while incorporating an onclick event for a javascript function that also includes another onclick event for a separate javascript function

How can I display a PHP variable in JavaScript?

What is the optimal location for making API requests in a React/Redux/Reach Router application?