Three.js / WebGL Loading large amounts of texture data right away, how?

I recently had a project in which I needed to create a lot of large textures using a canvas, and then upload them to the GPU. I constantly ran out of memory (chrome went astray) and โ€œchokedโ€ when the page loaded, since all the textures were pushed right through the GPU bus.

I decided to make calls to texture.needsUpdate = true; so that all textures are not transferred to the GPU in a single rendering update.

This works, but I'm curious about any other solutions ...

I posted this because it can be useful for those who load all their textures at startup ...

+4
source share
1 answer

Turning off textures to zero is the best way to stop excessive load. Reducing the size of the root will improve everything that follows the line.

As long as this post is old, it looks like the best google result. So, here are some helpful tips for any other beginner 3D game / web developer.

Textures are added to the buffer in fixed pieces of bits, the fewer the pieces, the better, but creating textures with a power resolution of two will prevent the loading of half pieces and waste of bit / time. Strength refers to a sequence of numbers that double in each instance (2, 4, 8, 16, 32, 64), following this formula will prevent lost bits.

Look at the size of the texture on the screen. Your source may be 1024x1024, but if it is only 20px high on the screen or your output canvas id is 480x640, then all this additional information will be lost. Reduce the textures so that they are on the screen.

In the same way, take colors to your textures, if you donโ€™t use them, someday you can use vertex coloring and / or highlighting to add details to the texture, in which case save the texture as an image in grayscale or limit the size of the palette by pointing them out.

.gif is a great format for small textures, while Jpeg is better for compressing large ones. If you use .gif, you can also save space by grouping textures on one image and their corresponding palette. Remember that the entire Zelda LTTP game ran with only 256 colors. There are ways to create an array of RGB indices and store images as source numbers that are extracted from it.

If you import / export JSON, remember that your images are loaded into 32-bit .png files by default. Which by themselves are large, becoming even larger when they are added as bit data at the end of the JSON JSON object file. Exporting only grid data and adding texture to it via JS in your source allows you to use more formats and optimize more of your textures.

+1
source

Source: https://habr.com/ru/post/1487928/


All Articles