Multiple textures in one image file - pages of a book

Guy · Jan 2018

So i've been wondering, would it be possible to take 3 (maybe 4 with the alpha channel) greyscale images and pack them all into seperate color channels then load the texture by color channel?

I'm working on making interactive comics for VR, where you can turn the pages by hand, however the texture maps are huge, I was hoping someone here would be able to shed some light on the subject.

Eric Chadwick · Jan 2018

Yes.
http://wiki.polycount.com/wiki/ChannelPacking

Which game engine are you using? And what hardware do you want to run it on?

Adding an alpha channel can double the texture file size, depending. For example:
http://wiki.polycount.com/wiki/DXT#DXT5

Guy · Jan 2018

Thank you so much for the link/response.

I'm testing in Unity (latest), with the HTC Vive, my gpu just went kaput a couple hours ago so i'm stuck waiting till then.

I'll read more into this, my idea is that you open the book and there is one free page for turning in the middle. Turning the free page fully to the left or right will hide the free page and offset the UVs, however a 4k texture map eats up a lot of memory, combine that with multiple books and it gets expensive.

A booklet rigged up and textured:
https://webmshare.com/play/z4o4W

What it looks like in game: (ssb64 instruction manual)

Obscura · Jan 2018

Why do you need a 4k texture when the screen is 2k tall in the worst case?

Edit - Checked it out and the screen res is 2160x1200 - 1080x1200 per eye so technically even a 2k texture causes heavy oversampling when it would fill up the screen from the top to the bottom.

So unless you can look at it through a magnifier, I think you could easily go with 2k textures. Which would reduce your video memory usage to the quarter of the current.

Or is the 4k used for the entire book including all pages with both sides? That would be more reasonable.

Guy · Jan 2018

4k is for all of the pages, each page being 512px wide and about 720px tall. Testing in game with a 2k texture made the text a bit hard to read but was about 1/5th the memory useage per texture, a 4k sheet with 8 pages per row is what is seen above.

A seperate texture will be used for the covers/spines of all the books since they'll need color.

My primary use case for the channel packing will be for manga and black/white instruction manuals for consoles. Since texture packing is now an option I can get away with packing 3-4 2k textures together and increase the scaling of my textures on the sheet for better quality.

JordanN · Jan 2018

In regards to texture resolution, a while back someone linked to a blog post about Doom 3. Despite the game being really old, one thing that stood out was the developers manage to get some really high resolution text out of it.

https://simonschreibt.de/gat/gat-doom-3-hdui/

It might be unorthodox, but I really liked the technique.

bitinn · Jan 2018

Guy said:

4k is for all of the pages, each page being 512px wide and about 720px tall. Testing in game with a 2k texture made the text a bit hard to read but was about 1/5th the memory useage per texture, a 4k sheet with 8 pages per row is what is seen above.

A seperate texture will be used for the covers/spines of all the books since they'll need color.

My primary use case for the channel packing will be for manga and black/white instruction manuals for consoles. Since texture packing is now an option I can get away with packing 3-4 2k textures together and increase the scaling of my textures on the sheet for better quality.

I think you can try go modular on the pages, instead of storing the page as a texture, store individual sprites! At least for your examples, all other elements seem like they can be reused and tiled.

It will limit your expressiveness a bit, but save a ton of textures.

(That's how one would do it in Web/UI design)

RN · Jan 2018

I think a hybrid method that's a mix of what @JordanN and @bitinn explained is the way to go, but instead of mesh decals like originally in that Doom 3 effect, I would cut the page around the bounding rectangles of every element (so the decals are part of the page, rather than decals on top) and use different materials on these rectangles: one material with a sprite sheet of all the letters, one material for the character graphics etc. These materials can use more than one UV set so you can have different graphics for each material but still have them all tile the same background, as texture layers.

After that you cut the page vertically to have the support loops you need to make the page bend like in your video, and all textured pieces should remain the same but now have the vertical cuts to bend along with the page.

Kinda like this: http://polycount.com/discussion/comment/2268203/#Comment_2268203

-----
If you want to use a font sprite sheet to compose text letter by letter as those decals for all pages (it would save a lot of memory, instead of having every unique text paragraph on textures), you'll need to use a monospaced font.

Obscura · Jan 2018

Whats the engine? You could possible also use "3d widgets" similar to what Jordan showed. Basically 3d UI attached to your mesh.

Unity:
https://docs.unity3d.com/Manual/HOWTO-UIWorldSpace.html
Unreal:
https://docs.unrealengine.com/latest/INT/Engine/UMG/HowTo/Create3DWidgets/

Multiple textures in one image file - pages of a book

Replies