decentraland / sdk

PM repository for SDK
Apache License 2.0
4 stars 4 forks source link

Loading external textures causes hiccups #1061

Open nearnshaw opened 8 months ago

nearnshaw commented 8 months ago

Issue Description:

Reported by Picazzo on Discord

Hi, I found an issue with using textures from external URLs, when you spawn a texture of this type the game fps lower a lot until the texture is loaded, this doesn't happen with normal local textures I'm only speculating but could this be happening because internally the call to the URL is making other processes of the engine wait? Here is a simple example to replicate it

let index = 0
for (let i = 0; i < 10; i++) {
  for (let j = 0; j < 5; j++) {
    const entity = engine.addEntity()
    Transform.create(entity, {
      position: Vector3.create(1+i*1.2, 0.5+j*1.2, 1)
    })
    MeshRenderer.setPlane(entity)
    //Creating a material from an external url causes the game to stop until the image is loaded
    Material.setPbrMaterial(entity,{
      texture: Material.Texture.Common({
          src:"https://storage.lowpoly3d.com/avatargarden/RendersChar_"+(index)+".png",
      }),
      transparencyMode: MaterialTransparencyMode.MTM_ALPHA_TEST
    })
    index++;
  }
}

And here is an example with a 1 second delay between create material calls, you can see the game totally collapsing every 1 second the call to get the external texture is made

import { Vector3 } from '@dcl/sdk/math'
import { Entity, Material, MaterialTransparencyMode, MeshRenderer, Transform, engine } from '@dcl/sdk/ecs'
import * as DclTimers from '@dcl-sdk/utils/dist/timer'

let index = 0
for (let i = 0; i < 10; i++) {
  for (let j = 0; j < 5; j++) {
    const entity = engine.addEntity()
    Transform.create(entity, {
      position: Vector3.create(1+i*1.2, 0.5+j*1.2, 1)
    })
    MeshRenderer.setPlane(entity)
    const constantIndex = index
    DclTimers.timers.setTimeout(()=>{
      //Creating a material from an external url causes the game to stop until the image is loaded
      createMaterial(entity, constantIndex)
    }, 1000*index)
    index++;
  }

}

function createMaterial(entity: Entity, index: number) {
  Material.setPbrMaterial(entity,{
    texture: Material.Texture.Common({
        src:"https://storage.lowpoly3d.com/avatargarden/RendersChar_"+(index)+".png",
    }),
    transparencyMode: MaterialTransparencyMode.MTM_ALPHA_TEST
  })
}

SDK: