Convert your images into dds texture files and test it into a threejs view directly.
# Install dependencies
npm install
# Start the app
npm start
Drag'n drop your image(s) into the app and it will convert it to the dds (the file is generated into the same folder but the extention change to .dds, you can change the folder path)
The images dimensions need to a power of two and minimum size is 256 : 256x256 / 512x512 / 256x512 / etc..
If the image is not a power of 2 it will be resized to the next power of 2 before convert as DDS texture.
If the image is smaller than 256, it will be resized to 256.
Example : 967x128 -> 1024x256
The compression of the dds is terrible but on my test I figured out the gzipped version are very close, here my results on 59images with a size from 256 to 2048 (no alpha) :
- jpegs files optimized (imageoptim) : 12.9mo
- jpegs files optimized (imageoptim) gzipped : 12.2mo
- dds files dxt1 : 48mo
- dds files dxt1 gzipped : 12.3mo
- dds files dxt5 : 89.7mo
- dds files dxt5 gzipped : 14.9mo
The app is build with nodejs / electron / threejs / datgui
The dds header is build into the app but the dxt compression use node-dxt(squish algorithm) https://github.com/Morhaus/node-dxt
The dds files are load with the THREE.DDSLoader: https://github.com/mrdoob/three.js/blob/master/examples/js/loaders/DDSLoader.js
-
low : super fast poor quality
-
normal : fast & good quality
-
hight : super slow & best quality
-
DXT1 : this format don't manage the transparency
-
DXT3 : transparent and 16bits
-
DXT5 : transparent and 16bits (recommended for transparent texture)
-
ColorMetric : perceptual(default) / uniform
-
weightColourByAlpha : true / false (default is false)
If you have a problem while compiling, please install the latest nodejs and then "npm rebuild", if the problem persist, thanks to open an issue. If you have a bug while using the tool, press "d" to open the devTool panel to see the error message, if you can't figure out the problem, thanks to open an issue.
Great article on DDS & DXT : http://beyondskyrim.org/2015/05/26/working-with-dds-files/
Microsoft docs : https://msdn.microsoft.com/en-us/library/windows/desktop/bb943991(v=vs.85).aspx