mirror of
https://gitflic.ru/project/photopea-v2/photopea-v-2.git
synced 2025-08-17 17:06:21 +00:00
84 lines
5.2 KiB
HTML
84 lines
5.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title> Compress textures with Photopea</title>
|
|
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0" />
|
|
<link rel="stylesheet" href="https://blog.photopea.com/wp-content/themes/simplex/style.css" type="text/css" media="screen" />
|
|
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" rel="stylesheet">
|
|
<script>
|
|
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
|
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
|
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
|
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
|
ga('create', 'UA-4249565-38', 'photopea.com'); ga('send', 'pageview');
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="page">
|
|
<div id="header">
|
|
<a href="https://blog.photopea.com/" class="title">Photopea Blog</a>
|
|
<!--<p>Web-based image editor.</p>-->
|
|
<a class="curr" href="//blog.photopea.com">Blog</a> |
|
|
<a href="//www.photopea.com/learn">Learn</a> |
|
|
<a href="//www.photopea.com/tuts">Tutorials</a> |
|
|
<a href="//www.photopea.com/templates">Templates</a> |
|
|
<a href="//www.photopea.com/api">API</a> |
|
|
<a href="//www.facebook.com/photopea"><img src="//photopea.com/img/facebook.svg" /></a> |
|
|
<a href="//www.twitter.com/photopeacom"><img src="//photopea.com/img/twitter.svg" /></a>
|
|
</div> <div id="main">
|
|
<div id="content">
|
|
|
|
<div class="post" id="post-598">
|
|
<span class="date">November 19, 2017</span>
|
|
<h1>Compress textures with Photopea</h1>
|
|
<div class="entry">
|
|
|
|
<p>Today, we are adding a new feature into Photopea: the support for DDS textures.</p>
|
|
<span id="more-598"></span>
|
|
|
|
<p>Modern video games are accelerated with technologies such as OpenGL, DirectX or Vulkan. The view of the game is rendered "in parallel" by hundreds of small processing units. Each unit may need to access a specific part (pixel) of some texture (e.g. the bottom left pixel).</p>
|
|
|
|
<p>In modern image formats (such as PNG or JPG), it is not possible to view a specific part of the image. We must decompress the whole image first. Thus, JPG and PNG files can not be directly used with OpenGL. But with many large textures, some kind of texture compression would be really handy.</p>
|
|
|
|
<img src="https://www.khronos.org/assets/images/api_logos/opengl.svg" style="width:400px" />
|
|
|
|
<p>In past years, new techniques have been developed (such as <a href="https://en.wikipedia.org/wiki/S3_Texture_Compression">S3TC</a>), which can make textures even eight times smaller (than uncompressed), while still appropriate for OpenGL (easy to access by processing units). The image is divided into small parts: 4x4 pixels. Each such part is compressed independently.
|
|
When a processing unit needs to read some pixel, we first check, in which 4x4 part the pixel is located. Then, we decompress that part (all 16 pixels), read the pixel in concern, and throw away the information about other 15 pixels.</p>
|
|
|
|
<p>Textures, compressed this way, are usually stored in <a href="https://en.wikipedia.org/wiki/DirectDraw_Surface">DDS</a> or similar files. Starting today, Photopea can open these DDS files. It can also export textures in DDS format using File - Export - DDS. Try to download <a href="https://github.com/toji/webgl-texture-utils/blob/master/sample/img/test-dxt1.dds?raw=true">this DDS file</a> and open it in Photopea!</p>
|
|
|
|
<p>This is a next step in our journey to make Photopea open any image format. We released our compression methods in an open-source library <a href="https://github.com/photopea/UTEX.js">UTEX.js</a>. We believe it can have many applications besides Phtopea editor.</p>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div><!--content-->
|
|
|
|
<div style="width:110px; margin: 0px auto;">
|
|
<a href="#" title="Share on Facebook" onclick="smallWindow('http://www.facebook.com/share.php?u=');"><img src="//www.photopea.com/promo/fb.png" /></a>
|
|
<a href="#" title="Share on Google Plus" onclick="smallWindow('https://plus.google.com/share?url=');"><img src="//www.photopea.com/promo/gp.png" /></a>
|
|
<a href="#" title="Share on Twitter" onclick="smallWindow('http://twitter.com/share?url=');"><img src="//www.photopea.com/promo/tw.png" /></a>
|
|
<script type="text/javascript">
|
|
function smallWindow(url)
|
|
{
|
|
var w = 640, h = 300;
|
|
window.open(url+"https://blog.photopea.com/compress-textures-with-photopea.html", "Share", "width="+w+",height="+h+",left="+Math.floor((window.innerWidth-w)/2)+",top="+Math.floor((window.innerHeight-h)/2));
|
|
}
|
|
</script>
|
|
</div>
|
|
</div>
|
|
<div id="disqus_thread"></div>
|
|
<script type="text/javascript">
|
|
var disqus_shortname = 'photopeablog'; // required: replace example with your forum shortname
|
|
(function() { var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
|
|
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
|
|
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); })();
|
|
</script>
|
|
<!--main-->
|
|
<?//php get_sidebar(); ?>
|
|
|
|
<div id="footer">© 2013-2021 support@photopea.com</div>
|
|
</div> <!--page-->
|
|
</body>
|
|
</html> |