I'm trying to implement a simple LUT color grade in a metal shader. It works with a color LUT, but when the LUT is grayscale, problems crop up. First, loading the grayscale image causes an "image decoding failed" error, which is fixed with this bug workaround.
By recharacterizing the image as a texture in the asset bundle, it loads successfully, but there's banding on the output image. Sure enough, capturing a GPU frame shows that banding has been introduced in the texture:
This banding doesn't appear when doing a Quick Look in the asset bundle, or on the source PNG. Inspecting the texture's pixel format shows that it's been encoded as ASTC_4x4_sRGB, which Apple documentation states is a compressed format for low-dynamic range content. It seems as though this compression may be responsible for degrading the LUT texture. Normally when working with LUTs, I take care to avoid any compression, but I can't find a way to disable compression or force a pixel format in MTKTextureLoader.
I've also tried various MTKTextureLoader options, including enabling/disabling sRGB, mipmaps, etc.
Any ideas on how to fix the banding?
It's important to understand that when using MTKTextureLoader with texture assets in an asset catalog, most runtime texture loader options are ignored. This may not be documented, but it is currently the case.
You may be able to avoid this automatic compression (which is well-intentioned but both clumsy and too aggressive) by selecting your asset in the Xcode asset catalog editor and setting its Pixel Format explicitly to something like "8 Bit Normalized - RGBA", which maps to .rgba8Unorm at runtime.
Related
I am currently making a mobile match-3 like game in unity. I have made all the graphics for the gems(the objects with which you make the matches) in Inkscape at 256x256 and exported them(PNG Files) with 90 dpi(also tried with 360 but nothing changed). My problem is that when I run the game in the editor the graphics seem to be "pixelated" and blurry. In my sprite settings I've set Pixels per Unit to 256, checked Generate Mip Maps, I am using Bilinear Filter Mode and the aniso level is 0. I have also set the max size to 256 and compression to high quality(My Main Camera's size is 10 but I tried to change that and nothing changed as far as the quality of the sprites). What can I do to "perfectly" display my sprites? Do I have to export them in some other way from Inkscape or do I have to change some Unity's settings?
Thank you.
NOTE: My sprites are not "pixel art"!
Edit(Added photos of the purple gem as file and how it is shown in editor):
Because scaling
You're display resolution on the images isn't a 256x256 region where those images are displayed, which means that they must be scaled in some manner in order to display in the desired region. Camera rendering is notoriously bad at scaling. As your images aren't Vector (and Unity doesn't support vector graphic formats anyway), scaling will always result in a loss of detail. Detail like hard edges.
Your options are:
smaller images where you have complete control over how the image is scaled down
bilinear filtering (which is fundamentally blurry)
mipmaps (which are automatically scaled down versions of your image in powers of two)
If the later two aren't giving satisfactory results, your only option is the first.
I'm very new to AEM and I'm trying to reduce the image size by using named transform image servlet in AEM 6.3. After reducing the image size using resize property, the image quality goes down terribly.
I've also tried using attributes sharpen and quality however I'm not able to understand their proper usage even after going through the adobe docs.
This is the original image resolution
1600 x 530
This is the image configuration that I've tried so far:
bounded-resize:width=1423&height=471&upscale=true (using this only reduces the image quality a lot)
quality:quality=82 (this changed nothing)
sharpen:op_usm=3.5,20(this distorted the image completely, sort of oil paint effect)
Above configuration maintains the aspect ration but not the quality.
Need to know what wrong I've done in this and how do I REDUCE THE IMAGE SIZE WHILE MAINTAINING THE ASPECT RATIO AND IMAGE QUALITY.
You should check the order of Image Transformers in your transformer configuration. The documentation states:
Order matters when defining your image transformation rules. For example, a resize then crop can yield significantly different results than a crop then resize.
I am not a 100% sure which makes more sense: Resize and Crop or Crop and Resize. But that would be easy to validate:
Create two transformer configurations. Both should just contain the resize and crop setting but in a different order. Call both of them (with the right URL) and then compare the resulting images.
how do I REDUCE THE IMAGE SIZE WHILE MAINTAINING THE ASPECT RATIO AND
IMAGE QUALITY.
As a best practice, to achieve a high image quality and small file size, start with the following combination of parameters:
fmt=jpg&qlt=85,0&resMode=sharp2&op_usm=1.75,0.3,2,0
This combination of settings products excellent results under most circumstances.
For further reading and learning, Refer to this
I know that APNG is an extension of PNG, while MNG is more of its own format (albeit developed by the original PNG developers). MNG is barely supported in any browser at all, while APNG almost only has native support in Firefox (for various backward compatibility- and decoding-related reasons, it seems).
Except all of these behind-the-scenes things, what are the differences between APNG and MNG? Does one have features the other doesn't (for example, storing only parts that are modified instead of always whole frames)? Does one have better performance or file size than the other?
APNG can create a new frame by replacing the entire image or by overlaying or blending a smaller image over part of it. To display a "pong" game you'd need a new image of the ball in each different location. APNG has essentially the same capabilities as animated GIF, but also allowing 24bit RGB and 8-bit alpha.
MNG can do that, plus it can also retrieve an image that was previously defined in the datastream and place it over the previous frame in a new location. To display your "pong" game you'd only need to transmit one image of the ball and use it like a sprite.
Much more detail is available in the specifications:
apng: (https://wiki.mozilla.org/APNG_Specification‎)
mng: (http://www.libpng.org/pub/mng/spec/mng-lc.html)
I am trying to create a background image on a webpage, which is similar to the 404 page used on tumbler...
http://testing404image.tumblr.com/
Here we can see a PNG which is 1623*1064 pixels, yet appears reasonably smooth gradient wise.
The direct link for the image is
http://testing404image.tumblr.com/images/status_bg.png?2
When I try to create a similar PNG (different colors, but same size) in Photoshop CS4 for Mac, the resulting file ends up at > 400k, whereas tumblers is 90k
Ive tried playing with all Photoshop options, including reducing number of colors to 55, but I cannot get the image below ~240k.
Ive also tried various optimising tools such as ImageOptim (http://imageoptim.com/) but to no avail.
Are there any properties of this PNG which result in a such a low file size?
I tried using JPG, thinking its better suited to gradient images, but even a 100% quality JPG resulted in noticeable aliasing, which an identical content/size PNG didnt have.
Thanks for any advice
Hi there changed the colours with
Image > Adjustments > Hue/Saturation - In Photoshop CS4
and this is the result:
as you can see it's almost the same size (75k).
Try playing around under the
Image > Adjustments
to get the color you are looking for and save as png with NONE for interlace.
Photoshop is not very good with PNG: I simply opened and saved it with the humble xnView (maximum compression), and got 74K. You can also convert it to paletted-image, and do some extra little tuning - PNGoptim gives me a final size of 64.548. I would't expect anything much better than that, the image is just too big.
BTW, be aware that using a gradient that is so big and so smooth that it a digital image (with 8 bits per pixel) cannot represent it without some banding. That image is really oversampled (you could resample it at 25% or less and display it scaled, and the result would be basically the same)
The actual reason is the source image your looking to have a lower gradient quality than the one you are making.
Just uncheck the Dither option (from the top toolbar in Photoshop) when filling the gradient color. the quality and smoothness of the gradient is decreased and therefore you get a very smaller file sized PNG output.
I'm developing an iPad application. I have been provided with a PNG image that contains some transparency - basically a drop shadow. The problem I'm having is that this is rendering poorly within the application, both on the device and in the sim.
I've made up some samples to illustrate. The first is how the image appears in the PSD (correctly that is). The second is how it appears on the device. You can see that the strip of shadow in the middle of the image is distinctly more yellow and poorly looking.
PDF http://www.aspyre.com.au/stackoverflow/photoshop.png On Device http://www.aspyre.com.au/stackoverflow/device.png
Any ideas what I'm doing wrong?
Edit: Links to files:
- PNG
- PSD
Edit 2: I've also tried pngcrush to remove the gamma, in case that was causing a problem, but no luck. Directions I followed were here: pngcrush
The reason you're getting a colour in your shadow is because the PSD's shadow layer is set to Multiply and has a colour in it. When you export it without a background, Photoshop is unable to multiply it to anything and just uses the layer as is. You need to grab the selection of the shadow layer, create a new layer, and fill that selection with black. Then set that new layer's opacity to something that mimics the old shadow.
Also I recommend you use Save-For-Web if you don't already. The colour-profile you use isn't much of an issue then as it will be stripped. However the point is valid that you want to be in sRGB when making iPhone/iPad graphics.
Link to your PSD adjusted: PSD
Common mistakes:
Your color space is non-standard. Either use no color space, or specify sRGB (strongly preferred).
You didn't save the PNG with gamma information included.
Without access to the actual files we're grasping at straws.. Maybe you have an 8-bit instead of 24-bit png?
For your shadow, use black instead of gray. Then adjust the transparency. That should fix it.
I had a similar issue that I resolved by disabling compression for an image. This is done in XCode by removing the .png extension. You can disable png compression for an entire project by editing the 'Compress PNG Files' project setting, but it is not recommended.
More details about Xcode PNG compression: http://iphonedevelopment.blogspot.com/2008/10/iphone-optimized-pngs.html