webp images as texture on three.js

[ersenturgut]

We are using webp hero on our website for images. Working well and no problem. But we are planning to add 3D models on our website via three.js. Tried to use webp image on our mappings but its not displaying...is there any way to use webp images on our models with webp hero?

thanks...

[chase-moskal]

hello @ersenturgut — i believe it will be possible to use webp-hero for game textures

you should be able to use webp-hero to convert all your webp textures to PNG images prior to loading them into the game engine

i'm thinking you'll want to use one of these methods manually

• webpMachine.polyfillImage(imageElement) — converts the given webp image (only if the browser doesn't support webp)
• webpMachine.decode(webpData) — decode webp Uint8Array data, return a png data-url

then you feed the PNG images into your engine as textures

additionally, you might want to take a peek at the proposed features in #39 that might be useful to your use-case, especially conditional loading to improve load times and also web workers to improve performance during the decoding process

also, it might be worth consideration to implement a more proper integration for game engines like three.js and babylon.js, i'm open to ideas

👋 let me know how it goes

[ersenturgut]

Hi Chase

I could not understand what you mean "you should be able to use webp-hero to convert all your webp textures to PNG images prior to loading them into the game engine"

We want to convert our PNG images to WEBP. Our model mapping files are PNG.

Maybe your second method works for us. I don't know yet. I have to check it. If there is an example I would be glad. Decode function reading webp images dynamically while loading as base64? and does it affect download speed?

thanks...

[chase-moskal]

i will try to clear away any confusion

webp-hero runs clientside within the browser, to decode webp images to PNG format, so that legacy browsers can display the images

in your case, i imagine you might be looking for a workflow as follows:

1. produce your 3d texture sources as high quality PNG images
2. use google's libwebp command-line tool to convert those images to WEBP format, to save on size and bandwidth
3. (only on legacy browsers that do not support webp): after the client's browser downloads the efficient WEBP images, you can then run webp-hero within the browser to decode those images back into PNGs, which you can load into your 3d engine

so in other words, the concept with webp-hero is to reduce bandwidth data transfer by sending images down the wire as the efficient WEBP format. modern browsers can display webp natively, but for legacy browsers, we can use webp-hero to dynamically decode the downloaded webp images back into PNG format on the clientside, without any further downloading

[chase-moskal]

closing for now, feel free to reopen if you have any questions