1
0
Fork 0
mirror of https://github.com/Orama-Interactive/Pixelorama.git synced 2025-01-18 09:09:47 +00:00

Implement cleanEdge rotation and scaling (#794)

* Implement clear4x rotation

* Don't use pixelated uvs on the final result, only on the preview, and fix pivot positioning

* Update to cleanEdge algorithm

* Add cleanEdge scaling
This commit is contained in:
Emmanouil Papadeas 2022-12-24 15:11:34 -08:00 committed by GitHub
parent 4658b1cfb6
commit 222e7a1ea8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 452 additions and 5 deletions

View file

@ -1,6 +1,7 @@
extends Node
enum GradientDirection { TOP, BOTTOM, LEFT, RIGHT }
var clean_edge_shader: Shader = preload("res://src/Shaders/Rotation/cleanEdge.gdshader")
# Algorithm based on http://members.chello.at/easyfilter/bresenham.html
@ -427,8 +428,7 @@ func scale_image(width: int, height: int, interpolation: int) -> void:
continue
var sprite := Image.new()
sprite.copy_from(f.cels[i].image)
# Different method for scale_3x
if interpolation == 5:
if interpolation == 5: # scale3x
var times: Vector2 = Vector2(
ceil(width / (3.0 * sprite.get_width())),
ceil(height / (3.0 * sprite.get_height()))
@ -436,6 +436,10 @@ func scale_image(width: int, height: int, interpolation: int) -> void:
for _j in range(max(times.x, times.y)):
sprite.copy_from(scale_3x(sprite))
sprite.resize(width, height, 0)
elif interpolation == 6: # cleanEdge
var params := {"angle": 0, "slope": true, "cleanup": true, "preview": false}
var gen := ShaderImageEffect.new()
gen.generate_image(sprite, clean_edge_shader, params, Vector2(width, height))
else:
sprite.resize(width, height, interpolation)
Global.current_project.undo_redo.add_do_property(f.cels[i].image, "data", sprite.data)

View file

@ -0,0 +1,411 @@
/*** MIT LICENSE
Copyright (c) 2022 torcado
Permission is hereby granted, free of charge, to any person
obtaining a copy of this software and associated documentation
files (the "Software"), to deal in the Software without
restriction, including without limitation the rights to use,
copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the
Software is furnished to do so, subject to the following
conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
OTHER DEALINGS IN THE SOFTWARE.
***/
shader_type canvas_item;
//enables 2:1 slopes. otherwise only uses 45 degree slopes
//#define SLOPE
//cleans up small detail slope transitions (if SLOPE is enabled)
//if only using for rotation, CLEANUP has negligable effect and should be disabled for speed
//#define CLEANUP
// The commented out defines exposed as uniforms
uniform bool slope;
uniform bool cleanup;
// This shader has been modified to work for Pixelorama
// Godot 3.x does not support #defines, so we will uncomment them when we port to Godot 4.x
// NearestNeighbor rotation logic has also been added into the code
// The original file can be found at
// https://gist.github.com/torcado194/e2794f5a4b22049ac0a41f972d14c329#file-cleanedge-gdshader
uniform float angle;
uniform sampler2D selection_tex;
uniform vec2 selection_pivot;
uniform vec2 selection_size;
uniform bool preview;
//the color with the highest priority.
// other colors will be tested based on distance to this
// color to determine which colors take priority for overlaps.
uniform vec3 highestColor = vec3(1.,1.,1.);
//how close two colors should be to be considered "similar".
// can group shapes of visually similar colors, but creates
// some artifacting and should be kept as low as possible.
uniform float similarThreshold = 0.0;
uniform float lineWidth = 1.0;
const mat3 yuv_matrix = mat3(vec3(0.299, 0.587, 0.114), vec3(-0.169, -0.331, 0.5), vec3(0.5, -0.419, -0.081));
vec3 yuv(vec3 col){
mat3 yuv = transpose(yuv_matrix);
return yuv * col;
}
bool similar(vec4 col1, vec4 col2){
return (col1.a == 0. && col2.a == 0.) || distance(col1, col2) <= similarThreshold;
}
//multiple versions because godot doesn't support function overloading
//note: inner check should ideally check between all permutations
// but this is good enough, and faster
bool similar3(vec4 col1, vec4 col2, vec4 col3){
return similar(col1, col2) && similar(col2, col3);
}
bool similar4(vec4 col1, vec4 col2, vec4 col3, vec4 col4){
return similar(col1, col2) && similar(col2, col3) && similar(col3, col4);
}
bool similar5(vec4 col1, vec4 col2, vec4 col3, vec4 col4, vec4 col5){
return similar(col1, col2) && similar(col2, col3) && similar(col3, col4) && similar(col4, col5);
}
bool higher(vec4 thisCol, vec4 otherCol){
if(similar(thisCol, otherCol)) return false;
if(thisCol.a == otherCol.a){
// return yuv(thisCol.rgb).x > yuv(otherCol.rgb).x;
// return distance(yuv(thisCol.rgb), yuv(highestColor)) < distance(yuv(otherCol.rgb), yuv(highestColor));
return distance(thisCol.rgb, highestColor) < distance(otherCol.rgb, highestColor);
} else {
return thisCol.a > otherCol.a;
}
}
vec4 higherCol(vec4 thisCol, vec4 otherCol){
return higher(thisCol, otherCol) ? thisCol : otherCol;
}
//color distance
float cd(vec4 col1, vec4 col2){
return distance(col1.rgba, col2.rgba);
}
float distToLine(vec2 testPt, vec2 pt1, vec2 pt2, vec2 dir){
vec2 lineDir = pt2 - pt1;
vec2 perpDir = vec2(lineDir.y, -lineDir.x);
vec2 dirToPt1 = pt1 - testPt;
return (dot(perpDir, dir) > 0.0 ? 1.0 : -1.0) * (dot(normalize(perpDir), dirToPt1));
}
//based on down-forward direction
vec4 sliceDist(vec2 point, vec2 mainDir, vec2 pointDir, vec4 u, vec4 uf, vec4 uff, vec4 b, vec4 c, vec4 f, vec4 ff, vec4 db, vec4 d, vec4 df, vec4 dff, vec4 ddb, vec4 dd, vec4 ddf){
float minWidth;
float maxWidth;
if (slope) {
minWidth = 0.44;
maxWidth = 1.142;
}
else {
minWidth = 0.0;
maxWidth = 1.4;
}
// #endif
float _lineWidth = max(minWidth, min(maxWidth, lineWidth));
point = mainDir * (point - 0.5) + 0.5; //flip point
//edge detection
float distAgainst = 4.0*cd(f,d) + cd(uf,c) + cd(c,db) + cd(ff,df) + cd(df,dd);
float distTowards = 4.0*cd(c,df) + cd(u,f) + cd(f,dff) + cd(b,d) + cd(d,ddf);
bool shouldSlice =
(distAgainst < distTowards)
|| (distAgainst < distTowards + 0.001) && !higher(c, f); //equivalent edges edge case
if(similar4(f, d, b, u) && similar3(uf, df, db/*, ub*/) && !similar(c, f)){ //checkerboard edge case
shouldSlice = false;
}
if(!shouldSlice) return vec4(-1.0);
//only applicable for very large lineWidth (>1.3)
// if(similar3(c, f, df)){ //don't make slice for same color
// return vec4(-1.0);
// }
float dist = 1.0;
bool flip = false;
vec2 center = vec2(0.5,0.5);
// #ifdef SLOPE
if(slope && similar3(f, d, db) && !similar3(f, d, b) && !similar(uf, db)){ //lower shallow 2:1 slant
if(similar(c, df) && higher(c, f)){ //single pixel wide diagonal, dont flip
} else {
//priority edge cases
if(higher(c, f)){
flip = true;
}
if(similar(u, f) && !similar(c, df) && !higher(c, u)){
flip = true;
}
}
if(flip){
dist = _lineWidth-distToLine(point, center+vec2(1.5, -1.0)*pointDir, center+vec2(-0.5, 0.0)*pointDir, -pointDir); //midpoints of neighbor two-pixel groupings
} else {
dist = distToLine(point, center+vec2(1.5, 0.0)*pointDir, center+vec2(-0.5, 1.0)*pointDir, pointDir); //midpoints of neighbor two-pixel groupings
}
//cleanup slant transitions
if (cleanup) {
if(!flip && similar(c, uf) && !(similar3(c, uf, uff) && !similar3(c, uf, ff) && !similar(d, uff))){ //shallow
float dist2 = distToLine(point, center+vec2(2.0, -1.0)*pointDir, center+vec2(-0.0, 1.0)*pointDir, pointDir);
dist = min(dist, dist2);
}
}
// #endif
dist -= (_lineWidth/2.0);
return dist <= 0.0 ? ((cd(c,f) <= cd(c,d)) ? f : d) : vec4(-1.0);
} else if(slope && similar3(uf, f, d) && !similar3(u, f, d) && !similar(uf, db)){ //forward steep 2:1 slant
if(similar(c, df) && higher(c, d)){ //single pixel wide diagonal, dont flip
} else {
//priority edge cases
if(higher(c, d)){
flip = true;
}
if(similar(b, d) && !similar(c, df) && !higher(c, d)){
flip = true;
}
}
if(flip){
dist = _lineWidth-distToLine(point, center+vec2(0.0, -0.5)*pointDir, center+vec2(-1.0, 1.5)*pointDir, -pointDir); //midpoints of neighbor two-pixel groupings
} else {
dist = distToLine(point, center+vec2(1.0, -0.5)*pointDir, center+vec2(0.0, 1.5)*pointDir, pointDir); //midpoints of neighbor two-pixel groupings
}
//cleanup slant transitions
if (cleanup) {
if(!flip && similar(c, db) && !(similar3(c, db, ddb) && !similar3(c, db, dd) && !similar(f, ddb))){ //steep
float dist2 = distToLine(point, center+vec2(1.0, 0.0)*pointDir, center+vec2(-1.0, 2.0)*pointDir, pointDir);
dist = min(dist, dist2);
}
}
// #endif
dist -= (_lineWidth/2.0);
return dist <= 0.0 ? ((cd(c,f) <= cd(c,d)) ? f : d) : vec4(-1.0);
} else
// #endif
if(similar(f, d)) { //45 diagonal
if(similar(c, df) && higher(c, f)){ //single pixel diagonal along neighbors, dont flip
if(!similar(c, dd) && !similar(c, ff)){ //line against triple color stripe edge case
flip = true;
}
} else {
//priority edge cases
if(higher(c, f)){
flip = true;
}
if(!similar(c, b) && similar4(b, f, d, u)){
flip = true;
}
}
//single pixel 2:1 slope, dont flip
if((( (similar(f, db) && similar3(u, f, df)) || (similar(uf, d) && similar3(b, d, df)) ) && !similar(c, df))){
flip = true;
}
if (flip) {
dist = _lineWidth-distToLine(point, center+vec2(1.0, -1.0)*pointDir, center+vec2(-1.0, 1.0)*pointDir, -pointDir); //midpoints of own diagonal pixels
} else {
dist = distToLine(point, center+vec2(1.0, 0.0)*pointDir, center+vec2(0.0, 1.0)*pointDir, pointDir); //midpoints of corner neighbor pixels
}
//cleanup slant transitions
if (slope && cleanup) {
if(!flip && similar3(c, uf, uff) && !similar3(c, uf, ff) && !similar(d, uff)){ //shallow
float dist2 = distToLine(point, center+vec2(1.5, 0.0)*pointDir, center+vec2(-0.5, 1.0)*pointDir, pointDir);
dist = max(dist, dist2);
}
if(!flip && similar3(ddb, db, c) && !similar3(dd, db, c) && !similar(ddb, f)){ //steep
float dist2 = distToLine(point, center+vec2(1.0, -0.5)*pointDir, center+vec2(0.0, 1.5)*pointDir, pointDir);
dist = max(dist, dist2);
}
}
// #endif
// #endif
dist -= (_lineWidth/2.0);
return dist <= 0.0 ? ((cd(c,f) <= cd(c,d)) ? f : d) : vec4(-1.0);
}
// #ifdef SLOPE
else if(slope && similar3(ff, df, d) && !similar3(ff, df, c) && !similar(uff, d)){ //far corner of shallow slant
if(similar(f, dff) && higher(f, ff)){ //single pixel wide diagonal, dont flip
} else {
//priority edge cases
if(higher(f, ff)){
flip = true;
}
if(similar(uf, ff) && !similar(f, dff) && !higher(f, uf)){
flip = true;
}
}
if(flip){
dist = _lineWidth-distToLine(point, center+vec2(1.5+1.0, -1.0)*pointDir, center+vec2(-0.5+1.0, 0.0)*pointDir, -pointDir); //midpoints of neighbor two-pixel groupings
} else {
dist = distToLine(point, center+vec2(1.5+1.0, 0.0)*pointDir, center+vec2(-0.5+1.0, 1.0)*pointDir, pointDir); //midpoints of neighbor two-pixel groupings
}
dist -= (_lineWidth/2.0);
return dist <= 0.0 ? ((cd(f,ff) <= cd(f,df)) ? ff : df) : vec4(-1.0);
} else if(slope && similar3(f, df, dd) && !similar3(c, df, dd) && !similar(f, ddb)){ //far corner of steep slant
if(similar(d, ddf) && higher(d, dd)){ //single pixel wide diagonal, dont flip
} else {
//priority edge cases
if(higher(d, dd)){
flip = true;
}
if(similar(db, dd) && !similar(d, ddf) && !higher(d, dd)){
flip = true;
}
// if(!higher(d, dd)){
// return vec4(1.0);
// flip = true;
// }
}
if(flip){
dist = _lineWidth-distToLine(point, center+vec2(0.0, -0.5+1.0)*pointDir, center+vec2(-1.0, 1.5+1.0)*pointDir, -pointDir); //midpoints of neighbor two-pixel groupings
} else {
dist = distToLine(point, center+vec2(1.0, -0.5+1.0)*pointDir, center+vec2(0.0, 1.5+1.0)*pointDir, pointDir); //midpoints of neighbor two-pixel groupings
}
dist -= (_lineWidth/2.0);
return dist <= 0.0 ? ((cd(d,df) <= cd(d,dd)) ? df : dd) : vec4(-1.0);
}
// #endif
return vec4(-1.0);
}
vec2 rotate(vec2 uv, vec2 pivot, float ratio) { // Taken from NearestNeighbour shader
// Scale and center image
uv.x -= pivot.x;
uv.x *= ratio;
uv.x += pivot.x;
// Rotate image
uv -= pivot;
uv = vec2(cos(angle) * uv.x + sin(angle) * uv.y,
-sin(angle) * uv.x + cos(angle) * uv.y);
uv.x /= ratio;
uv += pivot;
return uv;
}
void fragment() {
vec4 original = texture(TEXTURE, UV);
float selection = texture(selection_tex, UV).a;
vec2 size = 1.0/TEXTURE_PIXEL_SIZE+0.0001; //fix for some sort of rounding error
vec2 pivot = selection_pivot / size; // Normalize pivot position
float ratio = size.x / size.y; // Resolution ratio
vec2 pixelated_uv = floor(UV * size) / (size - 1.0); // Pixelate UV to fit resolution
// vec2 px = UV * size;
vec2 px;
if (preview) {
px = rotate(pixelated_uv, pivot, ratio) * size;
}
else {
px = rotate(UV, pivot, ratio) * size;
}
vec2 local = fract(px);
px = ceil(px);
vec2 pointDir = round(local)*2.0-1.0;
//neighbor pixels
//Up, Down, Forward, and Back
//relative to quadrant of current location within pixel
vec4 uub = texture(TEXTURE, (px+vec2(-1.0,-2.0)*pointDir)/size);
vec4 uu = texture(TEXTURE, (px+vec2( 0.0,-2.0)*pointDir)/size);
vec4 uuf = texture(TEXTURE, (px+vec2( 1.0,-2.0)*pointDir)/size);
vec4 ubb = texture(TEXTURE, (px+vec2(-2.0,-2.0)*pointDir)/size);
vec4 ub = texture(TEXTURE, (px+vec2(-1.0,-1.0)*pointDir)/size);
vec4 u = texture(TEXTURE, (px+vec2( 0.0,-1.0)*pointDir)/size);
vec4 uf = texture(TEXTURE, (px+vec2( 1.0,-1.0)*pointDir)/size);
vec4 uff = texture(TEXTURE, (px+vec2( 2.0,-1.0)*pointDir)/size);
vec4 bb = texture(TEXTURE, (px+vec2(-2.0, 0.0)*pointDir)/size);
vec4 b = texture(TEXTURE, (px+vec2(-1.0, 0.0)*pointDir)/size);
vec4 c = texture(TEXTURE, (px+vec2( 0.0, 0.0)*pointDir)/size);
vec4 f = texture(TEXTURE, (px+vec2( 1.0, 0.0)*pointDir)/size);
vec4 ff = texture(TEXTURE, (px+vec2( 2.0, 0.0)*pointDir)/size);
vec4 dbb = texture(TEXTURE, (px+vec2(-2.0, 1.0)*pointDir)/size);
vec4 db = texture(TEXTURE, (px+vec2(-1.0, 1.0)*pointDir)/size);
vec4 d = texture(TEXTURE, (px+vec2( 0.0, 1.0)*pointDir)/size);
vec4 df = texture(TEXTURE, (px+vec2( 1.0, 1.0)*pointDir)/size);
vec4 dff = texture(TEXTURE, (px+vec2( 2.0, 1.0)*pointDir)/size);
vec4 ddb = texture(TEXTURE, (px+vec2(-1.0, 2.0)*pointDir)/size);
vec4 dd = texture(TEXTURE, (px+vec2( 0.0, 2.0)*pointDir)/size);
vec4 ddf = texture(TEXTURE, (px+vec2( 1.0, 2.0)*pointDir)/size);
vec4 col = c;
//c_orner, b_ack, and u_p slices
// (slices from neighbor pixels will only ever reach these 3 quadrants
vec4 c_col = sliceDist(local, vec2( 1.0, 1.0), pointDir, u, uf, uff, b, c, f, ff, db, d, df, dff, ddb, dd, ddf);
vec4 b_col = sliceDist(local, vec2(-1.0, 1.0), pointDir, u, ub, ubb, f, c, b, bb, df, d, db, dbb, ddf, dd, ddb);
vec4 u_col = sliceDist(local, vec2( 1.0,-1.0), pointDir, d, df, dff, b, c, f, ff, ub, u, uf, uff, uub, uu, uuf);
if(c_col.r >= 0.0){
col = c_col;
}
if(b_col.r >= 0.0){
col = b_col;
}
if(u_col.r >= 0.0){
col = u_col;
}
// Taken from NearestNeighbour shader
col.a *= texture(selection_tex, rotate(pixelated_uv, pivot, ratio)).a; // Combine with selection mask
// Make a border to prevent stretching pixels on the edge
vec2 border_uv = rotate(pixelated_uv, pivot, ratio);
// Center the border
border_uv -= 0.5;
border_uv *= 2.0;
border_uv = abs(border_uv);
float border = max(border_uv.x, border_uv.y); // This is a rectangular gradient
border = floor(border - TEXTURE_PIXEL_SIZE.x); // Turn the grad into a rectangle shape
border = 1.0 - clamp(border, 0.0, 1.0); // Invert the rectangle
float mask = mix(selection, 1.0, 1.0 - ceil(original.a)); // Combine selection mask with area outside original
// Combine original and rotated image only when intersecting, otherwise just pure rotated image.
COLOR.rgb = mix(mix(original.rgb, col.rgb, col.a * border), col.rgb, mask);
COLOR.a = mix(original.a, 0.0, selection); // Remove alpha on the selected area
COLOR.a = mix(COLOR.a, 1.0, col.a * border); // Combine alpha of original image and rotated
// COLOR = col;
}

View file

@ -3,6 +3,7 @@ extends ImageEffect
var live_preview: bool = true
var rotxel_shader: Shader
var nn_shader: Shader = preload("res://src/Shaders/Rotation/NearestNeightbour.shader")
var clean_edge_shader: Shader = DrawingAlgos.clean_edge_shader
var pivot := Vector2.INF
var drag_pivot := false
@ -23,6 +24,7 @@ func _ready() -> void:
if OS.get_name() != "HTML5":
type_option_button.add_item("Rotxel with Smear")
rotxel_shader = load("res://src/Shaders/Rotation/SmearRotxel.shader")
type_option_button.add_item("cleanEdge")
type_option_button.add_item("Nearest neighbour (Shader)")
type_option_button.add_item("Nearest neighbour")
type_option_button.add_item("Rotxel")
@ -51,7 +53,10 @@ func decide_pivot() -> void:
pivot = size / 2
# Pivot correction in case of even size
if type_option_button.text != "Nearest neighbour (Shader)":
if (
type_option_button.text != "Nearest neighbour (Shader)"
and type_option_button.text != "cleanEdge"
):
if int(size.x) % 2 == 0:
pivot.x -= 0.5
if int(size.y) % 2 == 0:
@ -63,7 +68,10 @@ func decide_pivot() -> void:
selection_rectangle.position
+ ((selection_rectangle.end - selection_rectangle.position) / 2)
)
if type_option_button.text != "Nearest neighbour (Shader)":
if (
type_option_button.text != "Nearest neighbour (Shader)"
and type_option_button.text != "cleanEdge"
):
# Pivot correction in case of even size
if int(selection_rectangle.end.x - selection_rectangle.position.x) % 2 == 0:
pivot.x -= 0.5
@ -119,6 +127,24 @@ func commit_action(cel: Image, _project: Project = Global.current_project) -> vo
gen.generate_image(cel, rotxel_shader, params, _project.size)
yield(gen, "done")
"cleanEdge":
var params := {
"angle": angle,
"selection_tex": selection_tex,
"selection_pivot": pivot,
"selection_size": selection_size,
"slope": true,
"cleanup": false,
"preview": true
}
if !confirmed:
for param in params:
preview.material.set_shader_param(param, params[param])
else:
params["preview"] = false
var gen := ShaderImageEffect.new()
gen.generate_image(cel, clean_edge_shader, params, _project.size)
yield(gen, "done")
"Nearest neighbour (Shader)":
var params := {
"angle": angle,
@ -150,6 +176,7 @@ func _type_is_shader() -> bool:
return (
type_option_button.text == "Nearest neighbour (Shader)"
or type_option_button.text == "Rotxel with Smear"
or type_option_button.text == "cleanEdge"
)
@ -159,6 +186,11 @@ func _on_TypeOptionButton_item_selected(_id: int) -> void:
sm.shader = rotxel_shader
preview.set_material(sm)
smear_options.visible = true
elif type_option_button.text == "cleanEdge":
var sm := ShaderMaterial.new()
sm.shader = clean_edge_shader
preview.set_material(sm)
smear_options.visible = false
elif type_option_button.text == "Nearest neighbour (Shader)":
var sm := ShaderMaterial.new()
sm.shader = nn_shader

View file

@ -208,7 +208,7 @@ margin_bottom = 20.0
mouse_default_cursor_shape = 2
size_flags_horizontal = 3
text = "Nearest"
items = [ "Nearest", null, false, 0, null, "Bilinear", null, false, 1, null, "Cubic", null, false, 2, null, "Trilinear", null, false, 3, null, "Lanczos", null, false, 4, null, "Scale3X", null, false, 5, null ]
items = [ "Nearest", null, false, 0, null, "Bilinear", null, false, 1, null, "Cubic", null, false, 2, null, "Trilinear", null, false, 3, null, "Lanczos", null, false, 4, null, "Scale3X", null, false, 5, null, "cleanEdge", null, false, 6, null ]
selected = 0
[connection signal="about_to_show" from="." to="." method="_on_ScaleImage_about_to_show"]