@stuffi3000 what options are there currently for previewing these files? I'm not familiar with the format, and would like to understand whether there's a library or framework out there that lets us support embedding this with HTML/JS/CSS.

@shiftkey
Its a format used in the gaming industry for adding textures to 3d models for example but also just for images.
This explains its benefits very well:
_The advantage of using DDS textures for your materials is that this file type makes it possible to reduce the amount of memory that textures use by reducing the quality a little. This is useful if you're trying to cram as many textures as possible into a limited amount of graphics card and system memory, and is especially suitable for organic/nature textures where precision isn't paramount.

As an example, a 16-bit 1024x1024 JPG image requires 2.4 MB of graphics card memory. The same image stored in DDS format using DXT1 compression would require only 630 KB. So you could use almost 4 x 1024x1024 DDS textures for the 'price' of 1 JPG, so to speak._

Nvidia created a small tool for .dds file viewing, it is available here, together with links to other tools around .dds which could be useful as a source of information: http://www.nvidia.de/object/windows_texture_viewer.html

I'm not sure if there currently is any html/js/css framework for previewing these files, as browsers usually don't support this file type

@stuffi3000 thanks for the extra details.

I'm not sure if there currently is any html/js/css framework for previewing these files, as browsers usually don't support this file type

Electron uses Chromium under the hood for rendering, so modern web technologies might be able to help here. I also stumbled upon https://github.com/Jam3/parse-dds which might help with parsing these files within an Electron app (it mentions WebGL support, which is supported across most browsers these days).

For the moment I'm going to mark this as help wanted as I'd love some help to help explore this further.

Here's what I'd like to seen happen:

• someone provide a repository containing .dds files so we have sample images to work with
• someone take this demo script and get it working with the example images in the repository, so we can "view" these images with a browser.

@shiftkey
Here's a repository I am working on. It's about a mod for the strategy game "Hearts Of Iron IV".
There are loads of .dds files in the subfolders of ./gfx.
Here's the link to it:
https://github.com/generalisofficial/the-information-age

@shiftkey
Any news on this?

@stuffi3000 Because yours is the only request we've ever received for this, we're unable to devote time from our internal team to support it. If there's interest from the community, @shiftkey laid out a proposed path (#5337 (comment)) for what we need to see from someone in the community to move this forward, so until that happens (which should be reflected in this issue), there won't be any movement. If there's no further interest in the next several months, we'll likely close this to keep our backlog manageable. Thanks!

I'd definitely also like this feature. There's a fairly large community of modders for Paradox Interactive games (which use a lot of dds and tga files) who use GitHub for version control, and dds support would definitely be a welcome feature, even if we haven't been particularly vocal.

Hi @shiftkey and @billygriffin, at least one of my repositories make use of DDS image files, and I would definitely appreciate being able to preview them in GitHub Desktop:

https://github.com/sumghai/SDHI_ServiceModuleSystem

(the actual DDS files are scattered across several folders in the repo, due to special requirements for modding a particular game)

I'll try running the script mentioned in #5337 (comment) later tonight.

You need to unsubscribe from this thread if you don't want to get email notifications anymore.

I've recently tested a .dds file preview mechanism I found in another Github repo, which made it possible to show .dds files in the browser. The only issue was that the files had to be a-power-of-two to work. I'll search the link and send it in here

Here it is:
https://github.com/toji/texture-tester

@sumghai
Any luck running the script?

Any news on this? :)

It would be VERY useful for many communities

Same. We need this!

I support this request 👍

Need it we must

Guys I found these packages that may help solving the problem
https://www.npmjs.com/package/parse-dds
https://threejs.org/docs/index.html?q=Texture#api/en/loaders/CompressedTextureLoader
What do you think?

Guys I found these packages that may help solving the problem https://www.npmjs.com/package/parse-dds https://threejs.org/docs/index.html?q=Texture#api/en/loaders/CompressedTextureLoader What do you think?

The "Parse DDS" you found was already mentionned in one of the first commentaries to this issue, your link just sends us to the NPM link, which explicitly refers back to the Github link.
The second link is however more interesting. But since I have no knowledge about how it could be implemented into Github Desktop, I can sadly take no further action.

This would benefit many communities that use DDS graphics files to store images.

This feature would probably require changing the image element to a canvas one at the very least. And I don't exactly know how it determines if the binary file is an image. Grabbing the canvas element afterwards and drawing the image directly on it would then probably show the image. Though in every example I see the canvas from the GL context gets directly appended onto the page.

@shiftkey Would y'all be okay with me picking this up? I wrote up a codesandbox (loosely using the code you asked someone above to get working) to demonstrate rendering in the browser with canvas (webgl2) with multiple dds files of different types (https://codesandbox.io/s/angry-rubin-zf4cpq).

The sandbox also has the RENDER_TO_IMG_ELEMENT variable at the top which shows off two ways we can display these images. The first is to render them natively with the canvas element (would require changing how desktop shows image previews/diffs), and the second is to use toDataURL to convert the canvas image into a data url of any supported type (such as png in this case) and use that instead.

@mkafrin I'm no longer an active contributor to the project so you'd have to defer to the current team members to gauge their interest here...

@mkafrin I'm no longer an active contributor to the project so you'd have to defer to the current team members to gauge their interest here...

Ah gotcha, will do.

@tidy-dev @sergiou87 Apologies if there's a better way to do this, but y'all seem to be the current team members here from what I can tell. Any thoughts on my above comment #5337 (comment)?

@mkafrin
Wow, I didn't expect this to ever see the light of day. Thank you so much for focusing on this!

Yeah, I've been keeping my eye on this too. Glad to see some activity!

Hey @mkafrin !

No worries, I will take this to the team in our next meeting to discuss it if we have time 😄

I can't promise anything, though! We are a small team, and right now focusing on accessibility improvements 😅

Fully understand, appreciate it!

Hey @mkafrin ! We talked about this and we'll be happy to see your PR. However, I want to warn you we're a small team so we can't say when exactly we'll be able to review it 😓

In any case, thank you very much!!

Hey @sergiou87, no rush (as you discussed about y'alls limited resources), but just wanted to make sure you were aware a PR for this is up! Thanks again to the team for allowing me to tackle it.

Yes! We haven't had time to review it yet, but we're aware of it, thank you!

See also:

• Feature request: show image previews for images tracked by lfs #2981
  • Add LFS object data get using git lfs smudge. Blob images for #2981 e… #17686
• Binary file history view #6535