# What is the Best Way to Create a PlaneGeometry That Displays Several Different Images

I am trying to create 27 different flat planes, each of which will have 9 different textures, e.g.:

ABC
DEF
GHI

The textures can vary from plane to plane and there could be as many as 27 different combinations of textures. So the next plane might look like this:

QFT
ZGU
DPY

For now, once these textures are loaded onto a plane, they will not be changed.

The reason I want to do this is to avoid the memory and performance problems of drawing 243 smaller planes (9 X 27) with a single texture each.

One possible solution is to create 9 smaller faces on each large plane and to assign a different material to each face. It appears that doing this would be a fairly straightforward task. However, I am concerned that, from a performance standpoint, the result would not be any better than having 9 smaller planes.

It would seem that a better approach would be to combine the 9 textures into a single texture. But this could not be done on a 1 to 1 basis since the textures are 512 X 512 and the resulting images would be 1536 X 1536 - not a multiple of 2. Thus, I would need to scale the result down to 1024, e.g. by skipping every third pixel. Time spent doing this task at the front end should not be a problem since the results would not be changed during run time.

I have looked at using “renderer.copyTextureToTexture”, but: (1) I haven’t got it to work (an error code about missing “width”), (2) it apparently would require reloading textures several times; and (3) it might not be able to combine three 512 X 512 sized textures into a single 1024 X 1024 texture.

I have considered loading the textures as data, performing the operations and then saving them as a new texture which could be loaded by three.js as a texture. I have done that kind of thing using other programming languages, but haven’t run across any examples showing how to do that with javascript/three.js.

I appreciate any thoughts as to what would be the best approach and where to look for examples of how it is done.

For reference, here is an example of what I am trying to do. This consists of 27 smaller grids nested within 27 larger grids (the 9 grids directly under the 27 smaller grids are not visible). The smaller grids have 27 different random colors, which are replicated on the larger grids (using 9 smaller faces). As you can see, landscape looks fairly random and the transition between the two sets of grids is seamless.

Here we go: writing to, and usage of, a data texture: use your mouse and paint something in the upper-right white canvas and see the immediate effect on the textured spinning cube.

https://threejs.org/examples/?q=texture#webgl_materials_texture_canvas

Thanks! I’ll take a look at that.