Comments (26)
Implementation
The 2 images from WebGL port of SMAA (see more at
https://github.com/mrdoob/three.js/blob/dev/examples/js/shaders/SMAAShader.js,
https://github.com/mrdoob/three.js/blob/dev/examples/js/postprocessing/SMAAPass.js)
pic 1: getTextureArea(), png, depth 24 bits
pic 2: getSearchTexture(), png, depth 8 bits
pic3 : modified version of pic 2, rgba32 bits
from pixelfarm.
Apply SMAA's edge detection filter (step 1)
pic 2: just draw the img on GLES2 surface, no other filter
the original code, this steps alpha value always = 0.0
(so you will not see any thing, you will see just a red rect.)
so I modified the shader for debugging purpose.
pic 3: On GLES2, SMAA edge detection
on red background,
black => discard color
yellow line => full edges (ignore original weight, just an opaque yellow, ) with alpha = 1.0,
lets discard color as original,
and let the edges have weight as original (vary yellow) with alpha =1.0
pic 4: GLES2, SMAA edge detection
and when turn it to the original code
pic 5: just a red rect
from pixelfarm.
since pic 3-4-5 have red background.
here, the left one is stage 1 output image without red background
compare with the original output(right).
pic 6: you can see the red and green pixels, but this is not correct
from pixelfarm.
Early experiment with errs : (
pic 1: attemp1, err
pic 2: pic 1 (above) zoom
pic 3: lion, err
pic 4: attemp 4
pic 5: zoom on pic 4, (1) anti-alias at left leg of the lion compare to the original alias(2)
You can see that there are some anti-alias results.
We come into the nearly correct way now!
pic 6: fix SMAA_AREATEX_SELECT, still err
developing ...
from pixelfarm.
attempt 2: step1 edge detect
I think it is pixel perfect !
pic 4: Color Edge detection, PixelFarm (left) vs original (right)
pic 5: pic 4 zoom in, lion's forehead , PixelFarm (top) vs original (bottom)
pic 6: pic 4 zoom in, text part, PixelFarm (top) vs original (bottom)
from pixelfarm.
I'm working on this ...
from pixelfarm.
from pixelfarm.
pic 1: edges
pic 2: blend weight, not correct
errs
attemp 5, errs
from pixelfarm.
MLAA's L, Z, U shapes
from pixelfarm.
Area Texture
Calculates the area for a given pattern and distances to the left and to the
right, biased by an offset:
Orthogonal Pattern 0
Orthogonal Pattern 1
Orthogonal Pattern 2
Orthogonal Pattern 3
-0.375
-0.25
-0.125
+0
+0.125
+0.25
+0.375
from pixelfarm.
Orthogonal Pattern 4
-0.375
-0.25
-0.125
+0
+0.125
+0.25
+0.375
Orthogonal Pattern 5
-0.375
-0.25
-0.125
+0
+0.125
+0.25
Orthogonal Pattern 6
Orthogonal Pattern 7
-0.375
-0.25
-0.125
+0
+0.125
+0.25
+0.375
Orthogonal Pattern 8
-0.375
-0.25
-0.125
+0
+0.125
+0.25
+0.375
from pixelfarm.
Orthogonal Pattern 9
Orthogonal Pattern 10
-0.375
-0.25
-0.125
+0
+0.125
+0.25
+0.375
Orthogonal Pattern 11
-0.375
-0.25
-0.125
+0
+0.125
+0.25
+0.375
Orthogonal Pattern 12
-0.375
-0.25
-0.125
+0
+0.125
+0.25
+0.375
from pixelfarm.
Orthogonal Pattern 13
Orthogonal Pattern 14
Orthogonal Pattern 15
from pixelfarm.
Diagonal Patterns
from SMAA paper, fig 8 , Diagonal patterns map (left) and their precomputed
area texture (right)
Diagonal Pattern 0
Diagonal Pattern 1
Diagonal Pattern 2
Diagonal Pattern 3
Diagonal Pattern 4
Diagonal Pattern 5
Diagonal Pattern 6
Diagonal Pattern 7
Diagonal Pattern 8
Diagonal Pattern 9
Diagonal Pattern 10
Diagonal Pattern 11
Diagonal Pattern 12
Diagonal Pattern 13
Diagonal Pattern 14
Diagonal Pattern 15
from pixelfarm.
Orthogonal Pattern Location
pic 1: offset 0, 16 patterns with location
pic 2: left, original and right my re-arranged to show to changes
pic 3: zoom upper part, offset -0.375,-0.25,-0.125
pic 4: zoom lower part, offset +0.125, +0.25, +0.375
from pixelfarm.
pic 4: bilinear func
pic 5: This dict returns which edges are active for a certain bilinear fetch. (it's the reverse lookup of the bilinear function), see pic 5, red point => sampling position
from pixelfarm.
Checking texture coordinates
pic 8: observing , the nature of texture coord
pic 9: observing , texture coord is +0.5,0.5 from grid coord
pic 10: texture coord offset back -0.5,-0.5 compare diff with floor(tex_coord), diff nearly 0
pic 11: texture coord offset back +0.5,+0.5 compare diff with floor(tex_coord),, diff nearly 1
from pixelfarm.
Texture examples
pic 2: result of step 1 (find edges)
pic 3: pic 2, various offset
from pixelfarm.
X-offset only, Zoom In
pic 4 :from SMAA step 1(edge detection)
pic 5: offset x +0.125 and -0.125
pic 6: zoom in, observe diff at arrow marks
A = 255/255 => 1
B = 223/255 => 0.8745
C = B =E=G=I
D= A= F =H
N=Q= S =A = 255/255 => 1
M=O=P=R = 223/255 => 0.8745
when we offset sampling point to left side 1/8 of pixel
the leftmost pixel loss 'color energy' = 1/8 pixel
remaining = 7/8 of original
so remaining = (7/8)255 = 0.875 * 255 => 233.125
notes:
When we offset sampling point X to +0.125 side (to right side) =>
the px take more right-side color (eg black) into itself.
When we offset sampling point X to -0.125 side (to left side) =>
the px take more left-side color (eg black) into itself.
from pixelfarm.
Y-offset only, Zoom In
pic 7 : from step 1, edge filter
pic 8: zoom in
notes:
When we offset sampling point Y to +0.125 side (to lower side) =>
the px take more lower -side color (eg black) into itself.
When we offset sampling point X to -0.125 side (to upper side) =>
the px take more upper -side color (eg black) into itself.
Analysis on vertical axis
pic 9: left img=> offset=(+0.0px,+0.125px), right img => offset =(+0.0px,-0.125px)
pic 10: zoom, left img=> offset=(+0.0px,+0.125px), right img => offset =(+0.0px,-0.125px)
A, C= 223/255 => 0.8745
B, D = 255/255 => 1
N, P, R = 223/255 => 0.8745
M, O, Q = 255/255 => 1
notes:
When we offset sampling point Y to +0.125 side (to lower side) =>
the px take more lower -side color (eg black) into itself.
When we offset sampling point X to -0.125 side (to upper side) =>
the px take more upper -side color (eg black) into itself.
when we offset sampling point to top side 1/8 of pixel
the topmost pixel loss 'color energy' = 1/8 pixel
remaining = 7/8 of original
so remaining = (7/8)255 = 0.875 * 255 => 233.125
from pixelfarm.
X Offset only, -0.25 px
B = 255/255 = 1
A , C , D = 191/255 = 0.749
*so remaining = (3/4)255 = 0.75 * 255 => 191.25
from pixelfarm.
Y Offset only -0.125
A = 223/255 => 0.8745
so remaining = (7/8) * 255 = 0.875 * 255 => 223.125
from pixelfarm.
X offset -0.25px and Y offset -0.125 px
pic 13: offset x -0.25px and offset y -0.125px
A = 167/255 => 0.6549
B = 167/255 => 0.6549
C = 223/255 => 0.8745
D = 223/255 => 0.8745
E = 167/255 => 0.6549
F = 191/255 => 0.7490
G= 175/255 => 0.6863
Lets do some calculation at A pixel
It value 167/255 can be calculated from bilinear interpolation
1). see pic 11, only X offset -0.25px => A pixel value= (3/4) *255 = 191.25
then bring 191.25 to 2) below
2. see pic 12, only Y offset -0.125px => (7/8) * 191.25 => 167.34375
so A = 167 :)
OR
A= (3/4) * (7/8) * 255
= (0.65625) * 255
= 167.34375
if we use 'normalized' pixel value (where value range starts from 0.0 to 1.0)
in this case, A pixel value = (3 / 4 ) * (7 / 8)= 0.65625
if you look at pic 5 (above), 0.65625 is here, exact the same as real specimen.
Think back...
If you sampling texture at position offset (-0.25px,-0.125px)
and you get sampling value= 0.65625
you can assume that you are at the Left-Upper corner
from pixelfarm.
Z shape and its area
Sampling around Z-shape
from pixelfarm.
Z shape and its area
pic 17: z-shapes
pic 18: area under the line
from pixelfarm.
U shape and its area
from pixelfarm.
Related Issues (20)
- .NET Standard version of PixelFarm HOT 1
- Update latest Typography
- CosmosOS RenderSurface Developing HOT 24
- Oblique Glyph Simulation
- PostScript and Pdf
- About subpixel rendering HOT 3
- How to deal with 3 repo?, Submodules consideration HOT 23
- From today, I have a busy job for 3-4 weeks!
- Fixing SmoothLineAA shader HOT 1
- Please give me some ideas about tools that convert C# to C / C++ HOT 1
- [INFO] GLCanvas Coordinate note HOT 2
- [INFO] Tesselation Note HOT 2
- [INFO] Mask
- [INFO] Stroke Generator Notes
- [INFO] Brushes Notes
- HAPPY NEW YEAR 2019 HOT 3
- Clean build fails - many missing files in Typography project HOT 3
- HAPPY NEW YEAR 2020 :)
- Implement Evan Wallace's Rendering Technique HOT 1
- Msdf3, Font TextureAtlas Development HOT 6
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from pixelfarm.