Pulling in textures to enhance the rendering for webgl

Question

Pulling in textures to enhance the rendering for webgl

My current challenge involves the process of loading textures in webgl. I have a collection of planets with unique names and values, each corresponding to a texture named sun.jpg, mercury.jpg, etc. By constructing the name string using Planets[i].name+".jpg", I aim to retrieve the texture's name.

An error message is displayed as follows: Uncaught TypeError: Cannot read property 'image' of undefinedSpheredPlanetsGL.js:138 handleLoadedTextureSpheredPlanetsGL.js:179 TextureName.(anonymous function).image.onload

The TextureName array is set up in the following manner:

var TextureName = [];
    function setBufferName()
    {
        for(var i = 0; i < Planets.length; i++)
        {
            TextureName[i] = {name: Planets[i].name+"TextureName"};
        }
    }

The initialization of textures occurs as shown below to ensure correct references between "sunTextureName" and "sun.jpg" for all planets:

function initTexture() 
    {
        for(var i = 0; i < Planets.length; i++)
        {
            TextureName[i] = gl.createTexture();
            TextureName[i].image = new Image();
            TextureName[i].image.onload = function () 
            {
                handleLoadedTexture(TextureName[i]);
            }
            TextureName[i].image.src = Planets[i].name+".jpg";
        }
    }

The issue arises when calling "handleLoadedTexture(TextureName[i])", which leads to confusion regarding the following function:

function handleLoadedTexture(texture) 
    {
        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
        gl.bindTexture(gl.TEXTURE_2D, texture);
        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.image);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);
        gl.generateMipmap(gl.TEXTURE_2D);
        gl.bindTexture(gl.TEXTURE_2D, null);
    }

The exact line causing an error is

gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.image);

. Despite passing the variable correctly, it seems unable to reference the array contents.

I am seeking assistance to resolve this issue. Any suggestions?

javascript arrays opengl-es webgl

Answer 1

Answer №1

The issue lies in the scope of the counter variable you are using. In your loop, the counter variable increments and the loop exits once it reaches or exceeds Planets.length. By the time the callback is triggered, the loop has already ended and i remains at Planets.length.

To address this, you can employ an IIFE (immediately invoked function expression) to create a localized version of i as shown below:

for(var i = 0; i < Planets.length; i++)
{
    TextureName[i] = gl.createTexture();
    TextureName[i].image = new Image();
    TextureName[i].image.onload = (function (index) {
        return function () { handleLoadedTexture(TextureName[index]) }
    })(i);
    TextureName[i].image.src = Planets[i].name+".jpg";
}

Answer 2

The issue lies in the scope of the counter variable you are using. In your loop, the counter variable increments and the loop exits once it reaches or exceeds Planets.length. By the time the callback is triggered, the loop has already ended and i remains at Planets.length.

To address this, you can employ an IIFE (immediately invoked function expression) to create a localized version of i as shown below:

for(var i = 0; i < Planets.length; i++)
{
    TextureName[i] = gl.createTexture();
    TextureName[i].image = new Image();
    TextureName[i].image.onload = (function (index) {
        return function () { handleLoadedTexture(TextureName[index]) }
    })(i);
    TextureName[i].image.src = Planets[i].name+".jpg";
}

Pulling in textures to enhance the rendering for webgl

Answer №1

Similar questions

Is there a way to retrieve specific values from the HTTP response header string?

Steps for adjusting the structure of an array of objects according to the ParentID

Does modifying data from an AngularJS service update the original data within the service?

Firebase Cloud Functions streamline lengthy tasks by avoiding the risk of hitting a time threshold

Tips for eliminating unnecessary or duplicate dependencies in package.json files

A guide on utilizing express.js to retrieve and display the output of a mySql query

Automatically fill in form fields with data from a JSON file as soon as the user enters a value

Unexpected JSONP Parsing Issue Despite Correct JSON Data

Populating a C array with pointers

What could be the reason for the malfunctioning transition effect in my slider animation?

How come attempting to read a nonexistent document from Firestore results in an uncaught promise?

"Transforming a query into a JSON array - a step-by-step

Synchronize scrolling between two elements to create a dynamic user experience

NextJS 13 causes tailwind to malfunction when route group is utilized

Issue with Three.js SubdivisionModifier leading to a null error

Having difficulty populating the token in the h-captcha-response innerHTML and g-recaptcha-response innerHTML

Could someone clarify the code for me? I'm struggling to grasp the meaning behind using !toggle in the onClick function and ? in the return statement

How to create an array of objects in Angular 2

Ways to update or incorporate new data within JavaScript

Issue with AngularJS form not binding to $http request