Green screen workflow tested and working - rembg AI background removal creates clean #00FF00 backgrounds like reference
This commit is contained in:
147
test_transparency/comparison.html
Normal file
147
test_transparency/comparison.html
Normal file
@@ -0,0 +1,147 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>🧪 Test Transparency - 5 Sample Images</title>
|
||||
<style>
|
||||
body {
|
||||
background: #1a1a2e;
|
||||
color: white;
|
||||
font-family: Arial, sans-serif;
|
||||
padding: 30px;
|
||||
}
|
||||
h1 {
|
||||
color: #ff4444;
|
||||
text-align: center;
|
||||
}
|
||||
.comparison {
|
||||
display: flex;
|
||||
gap: 40px;
|
||||
margin: 30px 0;
|
||||
padding: 20px;
|
||||
background: rgba(0,0,0,0.3);
|
||||
border-radius: 15px;
|
||||
}
|
||||
.image-box {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
.image-box h3 {
|
||||
color: #ff6666;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.image-box img {
|
||||
max-width: 300px;
|
||||
max-height: 300px;
|
||||
border: 2px solid #333;
|
||||
border-radius: 10px;
|
||||
}
|
||||
/* Checkerboard background for transparency */
|
||||
.transparent-bg {
|
||||
background: linear-gradient(45deg, #333 25%, transparent 25%),
|
||||
linear-gradient(-45deg, #333 25%, transparent 25%),
|
||||
linear-gradient(45deg, transparent 75%, #333 75%),
|
||||
linear-gradient(-45deg, transparent 75%, #333 75%);
|
||||
background-size: 20px 20px;
|
||||
background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
|
||||
background-color: #555;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.label {
|
||||
margin-top: 10px;
|
||||
font-size: 0.9em;
|
||||
color: #aaa;
|
||||
}
|
||||
.success { color: #44ff44; }
|
||||
.info {
|
||||
text-align: center;
|
||||
color: #888;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>🧪 Test Transparency - Before & After</h1>
|
||||
<p class="info">Left: Original (white/black background) | Right: Processed (transparent with checkerboard)</p>
|
||||
|
||||
<div class="comparison">
|
||||
<div class="image-box">
|
||||
<h3>📷 ORIGINAL</h3>
|
||||
<img src="watering_can_ORIGINAL.png" alt="Original">
|
||||
<div class="label">watering_can_ORIGINAL.png</div>
|
||||
</div>
|
||||
<div class="image-box">
|
||||
<h3 class="success">✅ PROCESSED</h3>
|
||||
<div class="transparent-bg">
|
||||
<img src="watering_can_PROCESSED.png" alt="Processed">
|
||||
</div>
|
||||
<div class="label">watering_can_PROCESSED.png</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="comparison">
|
||||
<div class="image-box">
|
||||
<h3>📷 ORIGINAL</h3>
|
||||
<img src="horse_ORIGINAL.png" alt="Original">
|
||||
<div class="label">horse_ORIGINAL.png</div>
|
||||
</div>
|
||||
<div class="image-box">
|
||||
<h3 class="success">✅ PROCESSED</h3>
|
||||
<div class="transparent-bg">
|
||||
<img src="horse_PROCESSED.png" alt="Processed">
|
||||
</div>
|
||||
<div class="label">horse_PROCESSED.png</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="comparison">
|
||||
<div class="image-box">
|
||||
<h3>📷 ORIGINAL</h3>
|
||||
<img src="manure_pile_ORIGINAL.png" alt="Original">
|
||||
<div class="label">manure_pile_ORIGINAL.png</div>
|
||||
</div>
|
||||
<div class="image-box">
|
||||
<h3 class="success">✅ PROCESSED</h3>
|
||||
<div class="transparent-bg">
|
||||
<img src="manure_pile_PROCESSED.png" alt="Processed">
|
||||
</div>
|
||||
<div class="label">manure_pile_PROCESSED.png</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="comparison">
|
||||
<div class="image-box">
|
||||
<h3>📷 ORIGINAL</h3>
|
||||
<img src="pickaxe_ORIGINAL.png" alt="Original">
|
||||
<div class="label">pickaxe_ORIGINAL.png</div>
|
||||
</div>
|
||||
<div class="image-box">
|
||||
<h3 class="success">✅ PROCESSED</h3>
|
||||
<div class="transparent-bg">
|
||||
<img src="pickaxe_PROCESSED.png" alt="Processed">
|
||||
</div>
|
||||
<div class="label">pickaxe_PROCESSED.png</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="comparison">
|
||||
<div class="image-box">
|
||||
<h3>📷 ORIGINAL</h3>
|
||||
<img src="walk_ORIGINAL.png" alt="Original">
|
||||
<div class="label">walk_ORIGINAL.png</div>
|
||||
</div>
|
||||
<div class="image-box">
|
||||
<h3 class="success">✅ PROCESSED</h3>
|
||||
<div class="transparent-bg">
|
||||
<img src="walk_PROCESSED.png" alt="Processed">
|
||||
</div>
|
||||
<div class="label">walk_PROCESSED.png</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="info" style="margin-top: 40px;">
|
||||
If you see the gray checkerboard pattern behind the processed images, transparency is working! 🎉
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
264
test_transparency/comparison_ai.html
Normal file
264
test_transparency/comparison_ai.html
Normal file
@@ -0,0 +1,264 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>🤖 AI Background Removal Test</title>
|
||||
<style>
|
||||
body {
|
||||
background: #1a1a2e;
|
||||
color: white;
|
||||
font-family: Arial, sans-serif;
|
||||
padding: 30px;
|
||||
}
|
||||
h1 { color: #ff4444; text-align: center; }
|
||||
.ref-note {
|
||||
background: linear-gradient(135deg, #00ff00, #00aa00);
|
||||
color: black;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.comparison {
|
||||
display: flex;
|
||||
gap: 30px;
|
||||
margin: 30px 0;
|
||||
padding: 20px;
|
||||
background: rgba(0,0,0,0.3);
|
||||
border-radius: 15px;
|
||||
align-items: center;
|
||||
}
|
||||
.image-box {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
.image-box h3 { color: #ff6666; margin-bottom: 15px; }
|
||||
.image-box img {
|
||||
max-width: 250px;
|
||||
max-height: 250px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.bg-checker {
|
||||
background: linear-gradient(45deg, #333 25%, #555 25%, #555 50%, #333 50%, #333 75%, #555 75%);
|
||||
background-size: 16px 16px;
|
||||
padding: 15px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.bg-green {
|
||||
background: #00ff00;
|
||||
padding: 15px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.bg-game {
|
||||
background: linear-gradient(to bottom, #3d6b1f, #234010);
|
||||
padding: 15px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.bg-red {
|
||||
background: #cc3333;
|
||||
padding: 15px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.label { margin-top: 8px; font-size: 0.8em; color: #888; }
|
||||
.success { color: #44ff44; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>🤖 AI Background Removal (rembg)</h1>
|
||||
<div class="ref-note">
|
||||
🎯 Using neural networks to detect subjects and remove backgrounds!
|
||||
</div>
|
||||
|
||||
<div class="comparison">
|
||||
<div class="image-box">
|
||||
<h3>📷 ORIGINAL</h3>
|
||||
<div class="bg-checker">
|
||||
<img src="watering_can_ORIGINAL.png" alt="Original">
|
||||
</div>
|
||||
<div class="label">Original</div>
|
||||
</div>
|
||||
<div class="image-box">
|
||||
<h3 class="success">🤖 AI (Checker)</h3>
|
||||
<div class="bg-checker">
|
||||
<img src="watering_can_AI.png" alt="AI">
|
||||
</div>
|
||||
<div class="label">Transparency check</div>
|
||||
</div>
|
||||
<div class="image-box">
|
||||
<h3 class="success">🤖 AI (Green)</h3>
|
||||
<div class="bg-green">
|
||||
<img src="watering_can_AI.png" alt="On Green">
|
||||
</div>
|
||||
<div class="label">Green screen test</div>
|
||||
</div>
|
||||
<div class="image-box">
|
||||
<h3 class="success">🤖 AI (Grass)</h3>
|
||||
<div class="bg-game">
|
||||
<img src="watering_can_AI.png" alt="In Game">
|
||||
</div>
|
||||
<div class="label">In-game preview</div>
|
||||
</div>
|
||||
<div class="image-box">
|
||||
<h3 class="success">🤖 AI (Red)</h3>
|
||||
<div class="bg-red">
|
||||
<img src="watering_can_AI.png" alt="On Red">
|
||||
</div>
|
||||
<div class="label">Contrast test</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="comparison">
|
||||
<div class="image-box">
|
||||
<h3>📷 ORIGINAL</h3>
|
||||
<div class="bg-checker">
|
||||
<img src="horse_ORIGINAL.png" alt="Original">
|
||||
</div>
|
||||
<div class="label">Original</div>
|
||||
</div>
|
||||
<div class="image-box">
|
||||
<h3 class="success">🤖 AI (Checker)</h3>
|
||||
<div class="bg-checker">
|
||||
<img src="horse_AI.png" alt="AI">
|
||||
</div>
|
||||
<div class="label">Transparency check</div>
|
||||
</div>
|
||||
<div class="image-box">
|
||||
<h3 class="success">🤖 AI (Green)</h3>
|
||||
<div class="bg-green">
|
||||
<img src="horse_AI.png" alt="On Green">
|
||||
</div>
|
||||
<div class="label">Green screen test</div>
|
||||
</div>
|
||||
<div class="image-box">
|
||||
<h3 class="success">🤖 AI (Grass)</h3>
|
||||
<div class="bg-game">
|
||||
<img src="horse_AI.png" alt="In Game">
|
||||
</div>
|
||||
<div class="label">In-game preview</div>
|
||||
</div>
|
||||
<div class="image-box">
|
||||
<h3 class="success">🤖 AI (Red)</h3>
|
||||
<div class="bg-red">
|
||||
<img src="horse_AI.png" alt="On Red">
|
||||
</div>
|
||||
<div class="label">Contrast test</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="comparison">
|
||||
<div class="image-box">
|
||||
<h3>📷 ORIGINAL</h3>
|
||||
<div class="bg-checker">
|
||||
<img src="manure_pile_ORIGINAL.png" alt="Original">
|
||||
</div>
|
||||
<div class="label">Original</div>
|
||||
</div>
|
||||
<div class="image-box">
|
||||
<h3 class="success">🤖 AI (Checker)</h3>
|
||||
<div class="bg-checker">
|
||||
<img src="manure_pile_AI.png" alt="AI">
|
||||
</div>
|
||||
<div class="label">Transparency check</div>
|
||||
</div>
|
||||
<div class="image-box">
|
||||
<h3 class="success">🤖 AI (Green)</h3>
|
||||
<div class="bg-green">
|
||||
<img src="manure_pile_AI.png" alt="On Green">
|
||||
</div>
|
||||
<div class="label">Green screen test</div>
|
||||
</div>
|
||||
<div class="image-box">
|
||||
<h3 class="success">🤖 AI (Grass)</h3>
|
||||
<div class="bg-game">
|
||||
<img src="manure_pile_AI.png" alt="In Game">
|
||||
</div>
|
||||
<div class="label">In-game preview</div>
|
||||
</div>
|
||||
<div class="image-box">
|
||||
<h3 class="success">🤖 AI (Red)</h3>
|
||||
<div class="bg-red">
|
||||
<img src="manure_pile_AI.png" alt="On Red">
|
||||
</div>
|
||||
<div class="label">Contrast test</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="comparison">
|
||||
<div class="image-box">
|
||||
<h3>📷 ORIGINAL</h3>
|
||||
<div class="bg-checker">
|
||||
<img src="pickaxe_ORIGINAL.png" alt="Original">
|
||||
</div>
|
||||
<div class="label">Original</div>
|
||||
</div>
|
||||
<div class="image-box">
|
||||
<h3 class="success">🤖 AI (Checker)</h3>
|
||||
<div class="bg-checker">
|
||||
<img src="pickaxe_AI.png" alt="AI">
|
||||
</div>
|
||||
<div class="label">Transparency check</div>
|
||||
</div>
|
||||
<div class="image-box">
|
||||
<h3 class="success">🤖 AI (Green)</h3>
|
||||
<div class="bg-green">
|
||||
<img src="pickaxe_AI.png" alt="On Green">
|
||||
</div>
|
||||
<div class="label">Green screen test</div>
|
||||
</div>
|
||||
<div class="image-box">
|
||||
<h3 class="success">🤖 AI (Grass)</h3>
|
||||
<div class="bg-game">
|
||||
<img src="pickaxe_AI.png" alt="In Game">
|
||||
</div>
|
||||
<div class="label">In-game preview</div>
|
||||
</div>
|
||||
<div class="image-box">
|
||||
<h3 class="success">🤖 AI (Red)</h3>
|
||||
<div class="bg-red">
|
||||
<img src="pickaxe_AI.png" alt="On Red">
|
||||
</div>
|
||||
<div class="label">Contrast test</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="comparison">
|
||||
<div class="image-box">
|
||||
<h3>📷 ORIGINAL</h3>
|
||||
<div class="bg-checker">
|
||||
<img src="walk_ORIGINAL.png" alt="Original">
|
||||
</div>
|
||||
<div class="label">Original</div>
|
||||
</div>
|
||||
<div class="image-box">
|
||||
<h3 class="success">🤖 AI (Checker)</h3>
|
||||
<div class="bg-checker">
|
||||
<img src="walk_AI.png" alt="AI">
|
||||
</div>
|
||||
<div class="label">Transparency check</div>
|
||||
</div>
|
||||
<div class="image-box">
|
||||
<h3 class="success">🤖 AI (Green)</h3>
|
||||
<div class="bg-green">
|
||||
<img src="walk_AI.png" alt="On Green">
|
||||
</div>
|
||||
<div class="label">Green screen test</div>
|
||||
</div>
|
||||
<div class="image-box">
|
||||
<h3 class="success">🤖 AI (Grass)</h3>
|
||||
<div class="bg-game">
|
||||
<img src="walk_AI.png" alt="In Game">
|
||||
</div>
|
||||
<div class="label">In-game preview</div>
|
||||
</div>
|
||||
<div class="image-box">
|
||||
<h3 class="success">🤖 AI (Red)</h3>
|
||||
<div class="bg-red">
|
||||
<img src="walk_AI.png" alt="On Red">
|
||||
</div>
|
||||
<div class="label">Contrast test</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
210
test_transparency/comparison_v2.html
Normal file
210
test_transparency/comparison_v2.html
Normal file
@@ -0,0 +1,210 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>🔥 Aggressive BG Removal Test</title>
|
||||
<style>
|
||||
body {
|
||||
background: #1a1a2e;
|
||||
color: white;
|
||||
font-family: Arial, sans-serif;
|
||||
padding: 30px;
|
||||
}
|
||||
h1 { color: #ff4444; text-align: center; }
|
||||
.ref-note {
|
||||
background: #00ff00;
|
||||
color: black;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.comparison {
|
||||
display: flex;
|
||||
gap: 40px;
|
||||
margin: 30px 0;
|
||||
padding: 20px;
|
||||
background: rgba(0,0,0,0.3);
|
||||
border-radius: 15px;
|
||||
align-items: center;
|
||||
}
|
||||
.image-box {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
.image-box h3 { color: #ff6666; margin-bottom: 15px; }
|
||||
.image-box img {
|
||||
max-width: 300px;
|
||||
max-height: 300px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
/* Multiple background options to test */
|
||||
.bg-checker {
|
||||
background: linear-gradient(45deg, #444 25%, #666 25%, #666 50%, #444 50%, #444 75%, #666 75%);
|
||||
background-size: 20px 20px;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.bg-green {
|
||||
background: #00ff00;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.bg-game {
|
||||
background: linear-gradient(to bottom, #2d5016, #1a3009);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.label { margin-top: 10px; font-size: 0.85em; color: #aaa; }
|
||||
.success { color: #44ff44; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>🔥 Aggressive Background Removal Test</h1>
|
||||
<div class="ref-note">
|
||||
🎯 TARGET: Clean edges like the zombie bunny reference (no white shadows!)
|
||||
</div>
|
||||
|
||||
<div class="comparison">
|
||||
<div class="image-box">
|
||||
<h3>📷 ORIGINAL</h3>
|
||||
<div class="bg-checker">
|
||||
<img src="watering_can_ORIGINAL.png" alt="Original">
|
||||
</div>
|
||||
<div class="label">watering_can</div>
|
||||
</div>
|
||||
<div class="image-box">
|
||||
<h3 class="success">✅ CLEANED (Checker)</h3>
|
||||
<div class="bg-checker">
|
||||
<img src="watering_can_CLEAN.png" alt="Cleaned">
|
||||
</div>
|
||||
</div>
|
||||
<div class="image-box">
|
||||
<h3 class="success">✅ CLEANED (Green)</h3>
|
||||
<div class="bg-green">
|
||||
<img src="watering_can_CLEAN.png" alt="On Green">
|
||||
</div>
|
||||
</div>
|
||||
<div class="image-box">
|
||||
<h3 class="success">✅ CLEANED (Game)</h3>
|
||||
<div class="bg-game">
|
||||
<img src="watering_can_CLEAN.png" alt="In Game">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="comparison">
|
||||
<div class="image-box">
|
||||
<h3>📷 ORIGINAL</h3>
|
||||
<div class="bg-checker">
|
||||
<img src="horse_ORIGINAL.png" alt="Original">
|
||||
</div>
|
||||
<div class="label">horse</div>
|
||||
</div>
|
||||
<div class="image-box">
|
||||
<h3 class="success">✅ CLEANED (Checker)</h3>
|
||||
<div class="bg-checker">
|
||||
<img src="horse_CLEAN.png" alt="Cleaned">
|
||||
</div>
|
||||
</div>
|
||||
<div class="image-box">
|
||||
<h3 class="success">✅ CLEANED (Green)</h3>
|
||||
<div class="bg-green">
|
||||
<img src="horse_CLEAN.png" alt="On Green">
|
||||
</div>
|
||||
</div>
|
||||
<div class="image-box">
|
||||
<h3 class="success">✅ CLEANED (Game)</h3>
|
||||
<div class="bg-game">
|
||||
<img src="horse_CLEAN.png" alt="In Game">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="comparison">
|
||||
<div class="image-box">
|
||||
<h3>📷 ORIGINAL</h3>
|
||||
<div class="bg-checker">
|
||||
<img src="manure_pile_ORIGINAL.png" alt="Original">
|
||||
</div>
|
||||
<div class="label">manure_pile</div>
|
||||
</div>
|
||||
<div class="image-box">
|
||||
<h3 class="success">✅ CLEANED (Checker)</h3>
|
||||
<div class="bg-checker">
|
||||
<img src="manure_pile_CLEAN.png" alt="Cleaned">
|
||||
</div>
|
||||
</div>
|
||||
<div class="image-box">
|
||||
<h3 class="success">✅ CLEANED (Green)</h3>
|
||||
<div class="bg-green">
|
||||
<img src="manure_pile_CLEAN.png" alt="On Green">
|
||||
</div>
|
||||
</div>
|
||||
<div class="image-box">
|
||||
<h3 class="success">✅ CLEANED (Game)</h3>
|
||||
<div class="bg-game">
|
||||
<img src="manure_pile_CLEAN.png" alt="In Game">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="comparison">
|
||||
<div class="image-box">
|
||||
<h3>📷 ORIGINAL</h3>
|
||||
<div class="bg-checker">
|
||||
<img src="pickaxe_ORIGINAL.png" alt="Original">
|
||||
</div>
|
||||
<div class="label">pickaxe</div>
|
||||
</div>
|
||||
<div class="image-box">
|
||||
<h3 class="success">✅ CLEANED (Checker)</h3>
|
||||
<div class="bg-checker">
|
||||
<img src="pickaxe_CLEAN.png" alt="Cleaned">
|
||||
</div>
|
||||
</div>
|
||||
<div class="image-box">
|
||||
<h3 class="success">✅ CLEANED (Green)</h3>
|
||||
<div class="bg-green">
|
||||
<img src="pickaxe_CLEAN.png" alt="On Green">
|
||||
</div>
|
||||
</div>
|
||||
<div class="image-box">
|
||||
<h3 class="success">✅ CLEANED (Game)</h3>
|
||||
<div class="bg-game">
|
||||
<img src="pickaxe_CLEAN.png" alt="In Game">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="comparison">
|
||||
<div class="image-box">
|
||||
<h3>📷 ORIGINAL</h3>
|
||||
<div class="bg-checker">
|
||||
<img src="walk_ORIGINAL.png" alt="Original">
|
||||
</div>
|
||||
<div class="label">walk</div>
|
||||
</div>
|
||||
<div class="image-box">
|
||||
<h3 class="success">✅ CLEANED (Checker)</h3>
|
||||
<div class="bg-checker">
|
||||
<img src="walk_CLEAN.png" alt="Cleaned">
|
||||
</div>
|
||||
</div>
|
||||
<div class="image-box">
|
||||
<h3 class="success">✅ CLEANED (Green)</h3>
|
||||
<div class="bg-green">
|
||||
<img src="walk_CLEAN.png" alt="On Green">
|
||||
</div>
|
||||
</div>
|
||||
<div class="image-box">
|
||||
<h3 class="success">✅ CLEANED (Game)</h3>
|
||||
<div class="bg-game">
|
||||
<img src="walk_CLEAN.png" alt="In Game">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
225
test_transparency/green_screen_test.html
Normal file
225
test_transparency/green_screen_test.html
Normal file
@@ -0,0 +1,225 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>🟢 Green Screen Test</title>
|
||||
<style>
|
||||
body {
|
||||
background: #1a1a2e;
|
||||
color: white;
|
||||
font-family: Arial, sans-serif;
|
||||
padding: 30px;
|
||||
}
|
||||
h1 { color: #00ff00; text-align: center; text-shadow: 2px 2px #000; }
|
||||
.note {
|
||||
background: #00ff00;
|
||||
color: black;
|
||||
padding: 15px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.comparison {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
margin: 25px 0;
|
||||
padding: 20px;
|
||||
background: rgba(0,0,0,0.4);
|
||||
border-radius: 15px;
|
||||
align-items: center;
|
||||
}
|
||||
.image-box {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
.image-box h3 { color: #aaa; margin-bottom: 10px; font-size: 0.9em; }
|
||||
.image-box img {
|
||||
max-width: 200px;
|
||||
max-height: 200px;
|
||||
border-radius: 8px;
|
||||
border: 2px solid #333;
|
||||
}
|
||||
.green-bg {
|
||||
background: #00ff00;
|
||||
padding: 10px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.checker-bg {
|
||||
background: linear-gradient(45deg, #333 25%, #555 25%, #555 50%, #333 50%, #333 75%, #555 75%);
|
||||
background-size: 16px 16px;
|
||||
padding: 10px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.grass-bg {
|
||||
background: linear-gradient(to bottom, #4a7c23, #2d4d15);
|
||||
padding: 10px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.label { font-size: 0.75em; color: #666; margin-top: 5px; }
|
||||
.highlight { color: #00ff00; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>🟢 GREEN SCREEN WORKFLOW</h1>
|
||||
<div class="note">
|
||||
Workflow: Original → AI Remove BG → Green Screen (#00FF00) → Alpha Transparency
|
||||
</div>
|
||||
|
||||
<div class="comparison">
|
||||
<div class="image-box">
|
||||
<h3>📷 ORIGINAL</h3>
|
||||
<div class="checker-bg">
|
||||
<img src="watering_can_ORIGINAL.png" alt="Original">
|
||||
</div>
|
||||
<div class="label">Source file</div>
|
||||
</div>
|
||||
<div class="image-box">
|
||||
<h3 class="highlight">🟢 GREEN SCREEN</h3>
|
||||
<div class="green-bg">
|
||||
<img src="watering_can_GREEN.png" alt="Green">
|
||||
</div>
|
||||
<div class="label">#00FF00 background</div>
|
||||
</div>
|
||||
<div class="image-box">
|
||||
<h3>✅ ALPHA (Checker)</h3>
|
||||
<div class="checker-bg">
|
||||
<img src="watering_can_ALPHA.png" alt="Alpha">
|
||||
</div>
|
||||
<div class="label">Transparent</div>
|
||||
</div>
|
||||
<div class="image-box">
|
||||
<h3>🌿 IN GAME</h3>
|
||||
<div class="grass-bg">
|
||||
<img src="watering_can_ALPHA.png" alt="Game">
|
||||
</div>
|
||||
<div class="label">On grass</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="comparison">
|
||||
<div class="image-box">
|
||||
<h3>📷 ORIGINAL</h3>
|
||||
<div class="checker-bg">
|
||||
<img src="horse_ORIGINAL.png" alt="Original">
|
||||
</div>
|
||||
<div class="label">Source file</div>
|
||||
</div>
|
||||
<div class="image-box">
|
||||
<h3 class="highlight">🟢 GREEN SCREEN</h3>
|
||||
<div class="green-bg">
|
||||
<img src="horse_GREEN.png" alt="Green">
|
||||
</div>
|
||||
<div class="label">#00FF00 background</div>
|
||||
</div>
|
||||
<div class="image-box">
|
||||
<h3>✅ ALPHA (Checker)</h3>
|
||||
<div class="checker-bg">
|
||||
<img src="horse_ALPHA.png" alt="Alpha">
|
||||
</div>
|
||||
<div class="label">Transparent</div>
|
||||
</div>
|
||||
<div class="image-box">
|
||||
<h3>🌿 IN GAME</h3>
|
||||
<div class="grass-bg">
|
||||
<img src="horse_ALPHA.png" alt="Game">
|
||||
</div>
|
||||
<div class="label">On grass</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="comparison">
|
||||
<div class="image-box">
|
||||
<h3>📷 ORIGINAL</h3>
|
||||
<div class="checker-bg">
|
||||
<img src="manure_pile_ORIGINAL.png" alt="Original">
|
||||
</div>
|
||||
<div class="label">Source file</div>
|
||||
</div>
|
||||
<div class="image-box">
|
||||
<h3 class="highlight">🟢 GREEN SCREEN</h3>
|
||||
<div class="green-bg">
|
||||
<img src="manure_pile_GREEN.png" alt="Green">
|
||||
</div>
|
||||
<div class="label">#00FF00 background</div>
|
||||
</div>
|
||||
<div class="image-box">
|
||||
<h3>✅ ALPHA (Checker)</h3>
|
||||
<div class="checker-bg">
|
||||
<img src="manure_pile_ALPHA.png" alt="Alpha">
|
||||
</div>
|
||||
<div class="label">Transparent</div>
|
||||
</div>
|
||||
<div class="image-box">
|
||||
<h3>🌿 IN GAME</h3>
|
||||
<div class="grass-bg">
|
||||
<img src="manure_pile_ALPHA.png" alt="Game">
|
||||
</div>
|
||||
<div class="label">On grass</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="comparison">
|
||||
<div class="image-box">
|
||||
<h3>📷 ORIGINAL</h3>
|
||||
<div class="checker-bg">
|
||||
<img src="pickaxe_ORIGINAL.png" alt="Original">
|
||||
</div>
|
||||
<div class="label">Source file</div>
|
||||
</div>
|
||||
<div class="image-box">
|
||||
<h3 class="highlight">🟢 GREEN SCREEN</h3>
|
||||
<div class="green-bg">
|
||||
<img src="pickaxe_GREEN.png" alt="Green">
|
||||
</div>
|
||||
<div class="label">#00FF00 background</div>
|
||||
</div>
|
||||
<div class="image-box">
|
||||
<h3>✅ ALPHA (Checker)</h3>
|
||||
<div class="checker-bg">
|
||||
<img src="pickaxe_ALPHA.png" alt="Alpha">
|
||||
</div>
|
||||
<div class="label">Transparent</div>
|
||||
</div>
|
||||
<div class="image-box">
|
||||
<h3>🌿 IN GAME</h3>
|
||||
<div class="grass-bg">
|
||||
<img src="pickaxe_ALPHA.png" alt="Game">
|
||||
</div>
|
||||
<div class="label">On grass</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="comparison">
|
||||
<div class="image-box">
|
||||
<h3>📷 ORIGINAL</h3>
|
||||
<div class="checker-bg">
|
||||
<img src="walk_ORIGINAL.png" alt="Original">
|
||||
</div>
|
||||
<div class="label">Source file</div>
|
||||
</div>
|
||||
<div class="image-box">
|
||||
<h3 class="highlight">🟢 GREEN SCREEN</h3>
|
||||
<div class="green-bg">
|
||||
<img src="walk_GREEN.png" alt="Green">
|
||||
</div>
|
||||
<div class="label">#00FF00 background</div>
|
||||
</div>
|
||||
<div class="image-box">
|
||||
<h3>✅ ALPHA (Checker)</h3>
|
||||
<div class="checker-bg">
|
||||
<img src="walk_ALPHA.png" alt="Alpha">
|
||||
</div>
|
||||
<div class="label">Transparent</div>
|
||||
</div>
|
||||
<div class="image-box">
|
||||
<h3>🌿 IN GAME</h3>
|
||||
<div class="grass-bg">
|
||||
<img src="walk_ALPHA.png" alt="Game">
|
||||
</div>
|
||||
<div class="label">On grass</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
BIN
test_transparency/horse_AI.png
Normal file
BIN
test_transparency/horse_AI.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 411 KiB |
BIN
test_transparency/horse_ALPHA.png
Normal file
BIN
test_transparency/horse_ALPHA.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 411 KiB |
BIN
test_transparency/horse_CLEAN.png
Normal file
BIN
test_transparency/horse_CLEAN.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 332 KiB |
BIN
test_transparency/horse_GREEN.png
Normal file
BIN
test_transparency/horse_GREEN.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 361 KiB |
BIN
test_transparency/horse_ORIGINAL.png
Normal file
BIN
test_transparency/horse_ORIGINAL.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 485 KiB |
BIN
test_transparency/horse_PROCESSED.png
Normal file
BIN
test_transparency/horse_PROCESSED.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 707 KiB |
BIN
test_transparency/manure_pile_AI.png
Normal file
BIN
test_transparency/manure_pile_AI.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 612 KiB |
BIN
test_transparency/manure_pile_ALPHA.png
Normal file
BIN
test_transparency/manure_pile_ALPHA.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 612 KiB |
BIN
test_transparency/manure_pile_CLEAN.png
Normal file
BIN
test_transparency/manure_pile_CLEAN.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 805 KiB |
BIN
test_transparency/manure_pile_GREEN.png
Normal file
BIN
test_transparency/manure_pile_GREEN.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 530 KiB |
BIN
test_transparency/manure_pile_ORIGINAL.png
Normal file
BIN
test_transparency/manure_pile_ORIGINAL.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 605 KiB |
BIN
test_transparency/manure_pile_PROCESSED.png
Normal file
BIN
test_transparency/manure_pile_PROCESSED.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 MiB |
BIN
test_transparency/pickaxe_AI.png
Normal file
BIN
test_transparency/pickaxe_AI.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 447 KiB |
BIN
test_transparency/pickaxe_ALPHA.png
Normal file
BIN
test_transparency/pickaxe_ALPHA.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 447 KiB |
BIN
test_transparency/pickaxe_CLEAN.png
Normal file
BIN
test_transparency/pickaxe_CLEAN.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 484 KiB |
BIN
test_transparency/pickaxe_GREEN.png
Normal file
BIN
test_transparency/pickaxe_GREEN.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 380 KiB |
BIN
test_transparency/pickaxe_ORIGINAL.png
Normal file
BIN
test_transparency/pickaxe_ORIGINAL.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 533 KiB |
BIN
test_transparency/pickaxe_PROCESSED.png
Normal file
BIN
test_transparency/pickaxe_PROCESSED.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 680 KiB |
BIN
test_transparency/walk_AI.png
Normal file
BIN
test_transparency/walk_AI.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 496 KiB |
BIN
test_transparency/walk_ALPHA.png
Normal file
BIN
test_transparency/walk_ALPHA.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 496 KiB |
BIN
test_transparency/walk_CLEAN.png
Normal file
BIN
test_transparency/walk_CLEAN.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 228 KiB |
BIN
test_transparency/walk_GREEN.png
Normal file
BIN
test_transparency/walk_GREEN.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 438 KiB |
BIN
test_transparency/walk_ORIGINAL.png
Normal file
BIN
test_transparency/walk_ORIGINAL.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 437 KiB |
BIN
test_transparency/walk_PROCESSED.png
Normal file
BIN
test_transparency/walk_PROCESSED.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 665 KiB |
BIN
test_transparency/watering_can_AI.png
Normal file
BIN
test_transparency/watering_can_AI.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 461 KiB |
BIN
test_transparency/watering_can_ALPHA.png
Normal file
BIN
test_transparency/watering_can_ALPHA.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 461 KiB |
BIN
test_transparency/watering_can_CLEAN.png
Normal file
BIN
test_transparency/watering_can_CLEAN.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 892 KiB |
BIN
test_transparency/watering_can_GREEN.png
Normal file
BIN
test_transparency/watering_can_GREEN.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 403 KiB |
BIN
test_transparency/watering_can_ORIGINAL.png
Normal file
BIN
test_transparency/watering_can_ORIGINAL.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 418 KiB |
BIN
test_transparency/watering_can_PROCESSED.png
Normal file
BIN
test_transparency/watering_can_PROCESSED.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 888 KiB |
Reference in New Issue
Block a user