Три.js - Пикселяция на обрезанных краях при использовании буфера трафарета для прозрачного PNG на макете чашки ⇐ Javascript

[Anonymous]

Я работаю над проектом Three.js, где я применяю пять слоев на холсте для создания макета чашки. Слои отображаются в следующей последовательности: < /p>
сцена - фоновая сцена.
Mask - определяет видимую область чашки.
Color - базовый цветовой слой чашки.
Изображение логотипа - изображение логотипа, чтобы нанести на чашку. Слой сцены применяется как есть. Пикселированные края).
Если я применяю три. МОЛЬТИПЛАНДИЯ, чтобы исправить искажение, он вводит новую проблему:
Если цветовой слой черный, изображение логотипа также выглядит черным или темнее, в зависимости от цвета цветового слоя. < /p>
Что я пробовал:
anage -lephatering flattering. Свойства Premultiplyalpha.
Установка глубины и свойства глубины на материале. Лучший подход, чтобы обрезать цвет и слои логотипа в видимую область чашки с помощью буфера трафарета?[
{
"id": "e5083b10-0b2a-4784-8d90-576dc288c758",
"color": {},
"bounds": [
552,
178,
1763,
1272
],
"layername": "Highlights/Shadows",
"name": "Highlights/Shadows",
"opacity": 100,
"size": {
"height": 1094,
"width": 1211
},
"src": "",
"src_type": "data",
"type": "normal",
"visibility": true,
"blendMode": 0,
"position": {
"x": 552,
"y": 178
},
"scale": {
"x": 1,
"y": 1
},
"filters": {},
"has_mask": false,
"duplicates": []
},
{
"id": "8c16fe97-5afc-4af1-b5c7-b43996d32b87",
"color": {},
"bounds": [
547,
173,
1433,
1282
],
"layername": "mm_wrp:Your Image",
"name": "Your Image",
"opacity": 100,
"size": {
"width": 1232,
"height": 1136
},
"src": "",
"src_type": "data",
"type": "smart-object",
"visibility": true,
"blendMode": 0,
"position": {
"x": 547,
"y": 173
},
"scale": {
"x": 0.7191558441558441,
"y": 0.9762323943661971
},
"filters": {
"perspective": {
"active": true,
"corners": [
{
"x": 547,
"y": 175
},
{
"x": 1436,
"y": 175
},
{
"x": 547,
"y": 1313
},
{
"x": 1436,
"y": 1313
}
]
},
"warp": {
"active": true,
"bounds": {
"bottom": 1136,
"left": 0,
"right": 1232,
"top": 0
},
"name": "Warp Tool",
"slug": "warp-tool",
"meshPoints": [
{
"x": 174.46440302909394,
"y": 12.818316817418491
},
{
"x": 245.66505887251031,
"y": 12.643502967870518
},
{
"x": 982.2924678690165,
"y": 9.84943576644153
},
{
"x": 1057.2106523643752,
"y": 9.59763574081606
},
{
"x": 176.0147617327779,
"y": 364.6231199348013
},
{
"x": 251.21857562251319,
"y": 367.4634797784075
},
{
"x": 969.8256693063158,
"y": 378.15037217432774
},
{
"x": 1062.209576124691,
"y": 359.64863398789134
},
{
"x": 181.47903989646983,
"y": 704.2217368709732
},
{
"x": 265.681064004429,
"y": 746.7739941022621
},
{
"x": 977.7337631302089,
"y": 755.6163441412489
},
{
"x": 1056.5102416564232,
"y": 695.9159634196955
},
{
"x": 190.23397630101243,
"y": 1030.4272348003547
},
{
"x": 233.41951453461434,
"y": 1144.017570589892
},
{
"x": 992.4480535596977,
"y": 1148.1313251224299
},
{
"x": 1051.0930824070533,
"y": 1028.5457455569522
}
],
"uOrder": 4,
"vOrder": 4,
"warpPerspective": 0
}
},
"has_mask": true,
"child_object": {
"layers": [
{
"id": "89a5ba82-6f11-4938-bca3-9b9c4e9eb263",
"color": {},
"bounds": [
0,
0,
1232,
1136
],
"layername": "mm",
"name": "mm",
"opacity": 100,
"size": {
"height": 1136,
"width": 1232
},
"src": "",
"src_type": "data",
"type": "normal",
"visibility": true,
"blendMode": 0,
"position": {
"x": 0,
"y": 0
},
"scale": {
"x": 1,
"y": 1
},
"filters": {},
"has_mask": false
}
],
"placeholder": "placeholder",
"size": {
"width": 1232,
"height": 1136
}
},
"mask": "b63a1782-c8eb-4943-a96c-a443dc64b61b",
"duplicates": []
},
{
"id": "38607230-32e2-46c0-812d-6554d776891f",
"color": {
"red": 255,
"green": 255,
"blue": 255
},
"bounds": [
431,
47,
1862,
1302
],
"layername": "mm_clr:Mug Color",
"name": "Mug Color",
"opacity": 100,
"size": {
"height": 1255,
"width": 1431
},
"src": "",
"src_type": "data",
"type": "color",
"visibility": true,
"blendMode": 0,
"position": {
"x": 431,
"y": 47
},
"scale": {
"x": 1,
"y": 1
},
"filters": {},
"has_mask": true,
"mask": "b63a1782-c8eb-4943-a96c-a443dc64b61b",
"backgroundColor": "rgb(255,255,255)",
"duplicates": []
},
{
"id": "b63a1782-c8eb-4943-a96c-a443dc64b61b",
"color": {},
"bounds": [
552,
178,
1763,
1272
],
"layername": "mm_msk:mask",
"name": "mask",
"opacity": 100,
"size": {
"height": 1094,
"width": 1211
},
"src": "",
"src_type": "data",
"type": "msk",
"visibility": true,
"blendMode": 0,
"position": {
"x": 552,
"y": 178
},
"scale": {
"x": 1,
"y": 1
},
"filters": {},
"has_mask": false,
"is_mask": true,
"duplicates": []
},
{
"id": "f9db8713-fec1-4b91-b2d2-8814f0eef8ba",
"color": {},
"bounds": [
0,
0,
2100,
1400
],
"layername": "Scene",
"name": "Scene",
"opacity": 100,
"size": {
"height": 1400,
"width": 2100
},
"src": "",
"src_type": "data",
"type": "normal",
"visibility": true,
"blendMode": 0,
"position": {
"x": 0,
"y": 0
},
"scale": {
"x": 1,
"y": 1
},
"filters": {},
"has_mask": false,
"duplicates": []
}
]```

I tried using LinearFilter for texture filtering. Adjusting the alphaTest and premultiplyAlpha properties. Setting depthTest and depthWrite properties on the material. Ensuring the canvas resolution matches the device resolution (setPixelRatio).


Подробнее здесь: https://stackoverflow.com/questions/795 ... ransparent