Textures are building up on swaping the glbs on runtime

🧑‍💻 Technical Support
, ,
1

Hi everyone!
I’m creating a simple car configurator using 8th wall surface tracking.

I noticed that the textures keep on increasing every time we toggle the models, even though we are loading/unloading the same set of models. I’m copying the code that I’m currently using for your reference:

const modelList = [‘Wheel1’, ‘Wheel2’, ‘Wheel3’]
const model = document.getElementById(‘Wheel-1’)

const nextModel = () => {
// Update button style
if (buttonBackground === bg1) buttonBackground = bg2
else buttonBackground = bg1
nextButton.style.backgroundImage = url(${buttonBackground})

  // Need to remove gltf-component first due to AFrame regression: https://github.com/aframevr/aframe/issues/4341
  model.removeAttribute('gltf-model')
  // Switch to next model in the list
  model.setAttribute('gltf-model', `#${modelList[idx]}`)

  idx = (idx + 1) % modelList.length
}
nextButton.onclick = nextModel

Here is the HTML file for your reference

<a-asset-item id="car" src="assets/Only_Car.glb"></a-asset-item>
<a-asset-item id="Wheel1" src="assets/Wheel_1.glb"></a-asset-item>
<a-asset-item id="Wheel2" src="assets/Wheel_2.glb"></a-asset-item>
<a-asset-item id="Wheel3" src="assets/Wheel_3.glb"></a-asset-item>

<a-entity
id="model"
gltf-model="#car"
scale="2 2 2"
visible="false"
shadow="receive: false"
reflections="type: realtime">


It starts with 26 textures, when switching to a different wheel (rim change), it increases the count by 2 which is now 28. When falling back to the previous design it further increases the count by 2, which then becomes 30 and so on…

I wanted to know if:

  1. The code I’m using is correct or if that can be improved
  2. There is a method to unload any unused assets to free up memory.

Let me know if you require any additional data with regards to this and we can share that with you.

Looking forward to your response. Thanks in advance.