Code Monkey home page Code Monkey logo

Comments (2)

Alayan-stk-2 avatar Alayan-stk-2 commented on September 4, 2024

What seems to happen is that the graphics engine instructs the GPU driver to take the nearest pixel when resizing, which produces this sort of terrible result.

It is also possible to instruct the GPU driver to take the linear average of the closest pixels (if one finds the right place in the graphics code to do it...), but if the original image is much bigger than the target image, this will also fail horribly in much the same way.

The cleanest solution is therefore likely to get icon mipmaps and to have the graphics code give the appropriate instructions to draw the texture using the mipmaps. Mipmaps contain progressively smaller textures (each by a power of 2, so 4 by area, so the total memory cost of a mipmap is 33%), which means that if the target image size is much smaller than the source image size, we don't get the issue of picking four near pixels that are way too close (leading to the same issue as just taking the nearest pixel), as instead the GPU will start from a mipmap texture which is much closer in size to the target size (so the 4 near pixels will be far enough that blending them removes the pixellation).

from stk-code.

qwertychouskie avatar qwertychouskie commented on September 4, 2024

A while back I was experimenting with some code that renders the SVG at the exact resolution rather than an arbitrary larger size then scaling it down. Code here: https://github.com/STK-helper/stk-code/tree/SVG-native-res-prototype

Obviously this was just a prototype and more work would be needed to make it work for all icons. However, the advantage is that the SVGs get rendered at exactly the size they are needed, no bigger, no smaller, and therefore scaling artifacts are non-existent.

from stk-code.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.