Unable to update Material texture object values - values remain null :(

Help & Support
1

So I’m trying to push remotely loaded textures into a material; The remote loading of the textures works fine - I get them loaded and added into PlayCanvas as usable assets, but I’m having issues getting those new textures into an existing material;

Here’s the relevant code (massive) snippet:

xhr.request.addEventListener("load", function()
{
	/* First, parse the response */
		xhr.response = JSON.parse(xhr.request.response);
	
	/* Setup iterator variables */
		xhr.iterator = {
			start: 0,
			end: Object.keys(xhr.response).length
		};

	/* Iterate through the textures listed in the manifest */
		for(var texture in xhr.response)
		{
			(function()
			{
				var temp = {
					asset: new pc.Asset(a[3] + "_" + a[4] + "_" + texture, "texture",
					{
						url: xhr.response[texture]
					})
				};

				app.assets.add(temp.asset);

				temp.asset.on("load", function()
				{
					/* Update the texture in context */
					   ent.mat.req.setParameter(texture, temp.asset.id);
					   ent.mat.req.update();
					
					console.log(ent.mat.req.getParameter(texture));

					/* Increment our iterator */
						xhr.iterator.start++;
					
					/* Once we've iterated through all the texture updates, continue */
						if(xhr.iterator.start === xhr.iterator.end)
						{
							console.log(ent.mat.req);
							
							/* Assign "selected" indicator to appropriate customizer option */
								(function()
								{
									var b = event.intendedTarget.parentElement.querySelectorAll(".selected");
									var c = b.length;

									while(c--)
									{
										b[c].classList.remove("selected");
									}
								})();

								event.intendedTarget.classList.add("selected");

							/* Update the name in the customizer tracker */
								document.querySelector("#customizer-selected label[for='" + ent.name + "']").textContent = ent.mat.req.name.replace(ent.name, "");

							/* Assign the material to the model */
								// ent.obj.model.model.meshInstances[0].material = ent.mat.req;

							/* Finally, close the menu */
								(function()
								{
									var a = document.getElementById("customizer-menu");

									a.classList.toggle("open");
								})();
						}
				});

				app.assets.load(temp.asset);
			})();
		}
});

The issue I run into is this: The textures I’m trying to target (diffuseMap, specularMap, normalMap, etc) are all, initially, set as null; A material’s object has the id’s of the relevant assets for those values, normally. So “material.diffuseMap” might be “51235343”, for example.

When I try to push new ID values for those object keys, no matter what, they just stay as “null.” I can’t figure out what I’m doing wrong - my code seems to match what’s in the documentation.

If anybody has any insights, I’d greatly appreciate it :slight_smile:

2

setParameter - is the way to change uniform of a material related shader.
But shader might not have parts that related to your textures - material compiles shader based on parameters available.

So there are two ways: you can set material property directly and update it, or you can have placeholder in place of texture on material beforehand, and then replacing placeholder using setParameter as shader will already respect texture. Second approach is actually faster as it prevent shader recompilation.

So for first option:

material.diffuseMap = texture;
material.update();

Second option:

material.setParameter('texture_diffuseMap', texture);