Vram is too large when creating a Material with an Url Image

Hello, PlayCanvas Community!

I’m working on an example that stores user-uploaded images on a server, retrieves them by URL, and applies them to a 3D model. The end goal is to create, maintain, and distribute rooms decorated with user-uploaded images to other people.

current task is to

  1. fetch image URLs from the server
  2. make the image into a texture
  3. create a clone() of the preloaded material and apply the texture to it
  4. 8 materials with the image texture applied are created and applied to the 3D model
    I have written the code in this way.

The problem is that the VRam is too big.

As a test, I created 10 3D model templates and put 8 materials with image textures in them. This would have created 80 materials in total.
The images are 2048x4098 pixels, so it came out to about 1.5 GB, which is not surprising.

  1. my question here is that I don’t have a front-end developer to compress the images uploaded by the user, and I’d like to solve this within PlayCanvas as much as possible, so I’m wondering what compression method I can use when the user uploads an image, and if I can’t do it within PlayCanvas, how do I solve the code?

  2. I’ve created icons in CSS using the image sprite technique, but there doesn’t seem to be anything similar for 3D models, is it just a matter of loading each image and creating a texture?

Also, I tried it with 128KB images and it requires about 600-700MB of VRAM. This makes the initial load too long, what can I do?

Thank you so much for always sharing your knowledge.
If it wasn’t for PlayCanvas, I would never have imagined that I would be able to create these 3D projects on the web.

When the user uploads the image to your server, you could apply a basis texture compression on it, and serve that to your application. Those compressed texture use less video memory as they’re stored compressed in the vram.

See on how to compress them here: Compress to basis from the outside of PlayCanvas

Read some additional info on the compression here: Basis Texture Compression arrives in PlayCanvas | PlayCanvas Blog

1 Like

Oh, Thank you for your help ! ! I will try it