Blurry | Simulating depth of field with particles on a shader | Augmented Reality library

can anybody help me please about how to show a page using iframe with blurry background after submit ,

what I mean by submit is after submitting a form with the submit bouton ( Example

I try to import a .png file via url() in CSS, but the button ends up being a solid color from within the image, instead of the image itself. I've tried different images and it just loads a different solid color.

The Navbar should be a solid color and there are buttons in the corner but its affected by the blur from surrounding elements. I tried messing with the z-index, but that doesn't change anything. I tried removing blur, and it fixes the blurry gradient, but thats not an issue for me, the .png is still not loading correctly.

I'm still trying to under CSS and this is more than likely because of mixing of different tutorials without understanding the core of CSS, but I'd like to understand why they clash.

Link to my CodeSandbox Example

The smallest innermost circle in the snippet below has a backdrop-filter blur of 10rem that's not being applied. It looks like the span element is inheriting the same exact amount of blur from it's parent instead of taking the higher value that should be applied. Any idea why and/or have any known workarounds?

Context: I am trying to find the directional heading from a small image of a compass. Directional heading meaning if the red (north) point is 90 degrees counter-clockwise from the top, the viewer is facing East, 180 degrees is south, 270 is west, 0 is north. etc. I understand there are limitations with such a small blurry image but I'd like to be as accurate as possible. The compass is overlaid on street view imagery meaning the background is noisy and unpredictable.

The first strategy I thought of was to find the red pixel that is furthest away from the center and calculate the directional heading from that. The math is simple enough.

The tough part for me is differentiating the red pixels from everything else. Especially because almost any color could be in the background.

My first thought was to black out the completely transparent parts to eliminate the everything but the white transparent ring and the tips of the compass.

True Compass Values: 35.9901, 84.8366, 104.4101

These values are taken from the source code.

I then used this solution to find the closest RGB value to a user given list of colors. After calibrating the list of colors I was able to create a list that found some of the compass's inner most pixels. This yielded the correct result within +/- 3 degrees. However, when I tried altering the list to include every pixel of the red compass tip, there would be background pixels that would be registered as "red" and therefore mess up the calculation.

I have manually found the end of the tip using this tool and the result always ends up within +/- 1 degree ( .5 in most cases ) so I hope this should be possible

The original RGB value of the red in the compass is (184, 42, 42) and (204, 47, 48) but the images are from screenshots of a video which results in the tip/edge pixels being blurred and blackish/greyish.

Is there a better way of going about this than the closest_color() method? If so, what, if not, how can I calibrate a list of colors that will work?

I'm trying to stitch two pre-warped images together seamlessly using multi-band blending. I have two input images (that have already been warped) and one mask. However, when I apply MBB, the area surrounding the seams glow brighter and as a result, they become more visible which is the opposite of the objective here. I have absolutely no idea what I'm doing wrong.

To better explain the problem, here are the images and the output:

Target:

Source:

Mask:

And once I blend the source image into the target, this is what I get:

Here's my code for reference:

I'd like to know how can I up-size a UIImage in a UIButton so that when it is scaled up to fill the button, it has sharp edges, instead of blurry?

I.e for use in 8-bit styled artwork. The UIImage I have saved is 64px by 64 px, but is being displayed on a much larger frame.

I took an equirectangular envMap from the three.js docs sample where it appears sharp on a sphere.

If I load the same material into my aframe scene with the following params

I am trying to make publication-quality in Jupyter-lab using matplotlib and LaTeX fonts. I have created a simple document following instructions found here: https://matplotlib.org/stable/tutorials/text/usetex.html

The graph was created with beautiful fonts; however, saved eps file was blank. The same graph could be successfully saved as png, but it looked blurry when import to LaTeX even using dpi=2400 option. Eps files WITHOUT LaTeX fonts were sharp as a razor when imported into LaTeX file.

Suggestions? Workarounds?

Thanks, Radovan

PS. One workaround I found was using gnuplot and cairolatex terminal ... resulting *.tex file could be compiled with Pdflatex with excellent results. But that a different story :-).

I'm having a problem with the main baner image on my website.test website click here use right click inspect element then check the "toggle device toolbar" or use ctrl+shift+m ....

as you will see the main image is repeating itself in mobile mode:

the code:

html: