Параметр наложения в альфа-режиме threejs gltf не работает под некоторыми углами

У меня есть gltf, в котором я применяю текстуры png к прямоугольной сетке. У меня есть прямоугольник png и круг png. узел прямоугольника находится в точке z = 0,01, а круг - в точке z = 0,0. Альфа-режим, используемый для материалов - BLEND. материал двусторонний.

GLTF

{
"scenes" : [
    {
        "nodes" : [
            0
        ]
    }
],
"nodes" : [
    {
        "name" : "Node_0",
        "children" : [
            1,
            3
        ]
    },
    {
        "name" : "Symbol 2",
        "children" : [
            2
        ],
        "translation" : [
            240.25,
            -126.300003,
            0
        ]
    },
    {
        "name" : "Node_2",
        "mesh" : 0,
        "scale" : [
            0.656657,
            0.656657,
            1
        ]
    },
    {
        "name" : "Symbol 1",
        "children" : [
            4
        ],
        "translation" : [
            170,
            -89.050003,
            0
        ]
    },
    {
        "name" : "Node_4",
        "mesh" : 1,
        "translation" : [
            0,
            0,
            -0.01
        ],
        "scale" : [
            2.059968,
            1.399979,
            1
        ]
    }
],
"meshes" : [
    {
        "primitives" : [
            {
                "attributes" : {
                    "POSITION" : 1,
                    "TEXCOORD_0" : 2
                },
                "indices" : 0,
                "material" : 0
            }
        ]
    },
    {
        "primitives" : [
            {
                "attributes" : {
                    "POSITION" : 1,
                    "TEXCOORD_0" : 2
                },
                "indices" : 0,
                "material" : 1
            }
        ]
    }
],
"buffers" : [
    {
        "uri" : "data:application/octet-stream;base64,AQAAAAAAAAADAAAAAwAAAAIAAAABAAAAAAAAAAAAAIAAAAAAAAAAAAAAyMIAAAAAAADIQgAAyMIAAAAAAADIQgAAAIAAAAAAAAAAAAAAAAAAAAAAAACAPwAAgD8AAIA/AACAPwAAAAAAAAAAq6oqPacaKD+nGig/AACAP6caKD+nGig/AACAPwAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAACAAACAPwAAAACrqio9AACAPwAAgD8AAIA/AACAPwAAgD8AAIA/AAAAAABAcEOamfzCAAAAAAAAAAAAAAAAAAAAAAAAAIAAAIA/AAAAAKuqKj2G1gNAfzKzPwAAgD+G1gNAfzKzPwAAgD8AAAAAAAAAAAAAAIAK1yO8AAAAAAAAAAAAAAAAAAAAgAAAgD8AAAAAq6oqPQAAgD8AAIA/AACAPwAAgD8AAIA/AACAPwAAAAAAACpDmhmywgAAAAAAAAAAAAAAAAAAAAAAAACAAACAPw= = ",
        "byteLength" : 376
    }
],
"bufferViews" : [
    {
        "buffer" : 0,
        "byteOffset" : 0,
        "byteLength" : 24,
        "target" : 34963
    },
    {
        "buffer" : 0,
        "byteOffset" : 24,
        "byteLength" : 48,
        "target" : 34962
    },
    {
        "buffer" : 0,
        "byteOffset" : 72,
        "byteLength" : 32,
        "target" : 34962
    }
],
"accessors" : [
    {
        "name" : "accessor_0",
        "bufferView" : 0,
        "byteOffset" : 0,
        "componentType" : 5125,
        "count" : 6,
        "type" : "SCALAR",
        "max" : [
            3
        ],
        "min" : [
            0
        ]
    },
    {
        "name" : "accessor_1",
        "bufferView" : 1,
        "byteOffset" : 0,
        "componentType" : 5126,
        "count" : 4,
        "type" : "VEC3",
        "max" : [
            100,
            0,
            0
        ],
        "min" : [
            0,
            -100,
            0
        ]
    },
    {
        "name" : "accessor_2",
        "bufferView" : 2,
        "byteOffset" : 0,
        "componentType" : 5126,
        "count" : 4,
        "type" : "VEC2",
        "max" : [
            1,
            1
        ],
        "min" : [
            0,
            0
        ]
    }
],
"materials" : [
    {
        "pbrMetallicRoughness" : {
            "baseColorTexture" : {
                "index" : 0
            }
        },
        "alphaMode" : "BLEND",
        "doubleSided" : true
    },
    {
        "pbrMetallicRoughness" : {
            "baseColorTexture" : {
                "index" : 1
            }
        },
        "alphaMode" : "BLEND",
        "doubleSided" : true
    }
],
"samplers" : [
    {
        "magFilter" : 9729,
        "minFilter" : 9987,
        "wrapS" : 33071,
        "wrapT" : 33071
    }
],
"textures" : [
    {
        "sampler" : 0,
        "source" : 0
    },
    {
        "sampler" : 0,
        "source" : 1
    }
],
"images" : [
    {
        "uri" : "Image0.png"
    },
    {
        "uri" : "Image1.png"
    }
],
"asset" : {
    "version" : "2.0"
}

}

PNGПараметр наложения в альфа-режиме threejs gltf не работает под некоторыми углами

Параметр наложения в альфа-режиме threejs gltf не работает под некоторыми углами

Я использую программу просмотра gltf от ThreeJs. https://gltf-viewer.donmccurdy.com/ смешивание отлично работает под некоторыми углами, но когда я вращаюсь вокруг некоторых углов, смешивание не работает. скриншоты Параметр наложения в альфа-режиме threejs gltf не работает под некоторыми угламиПараметр наложения в альфа-режиме threejs gltf не работает под некоторыми углами

Может ли кто-нибудь объяснить мне это поведение и как мне добиться правильного смешивания под всеми углами.

Я не могу загрузить ваш glTF в упомянутую программу просмотра или Sketchfab. Я полагаю, ваш опубликованный JSON неполный.

Mugen87 02.05.2018 11:20

В вашем файле glTF нет средств доступа, буферов или файла bin для хранения данных вершин. Это определенно выглядит неполным.

emackey 02.05.2018 17:58

извините, я только что разместил соответствующее содержимое gltf, чтобы дать представление о содержимом gltf, которого было бы достаточно. но теперь я добавил полный gltf. Спасибо.

Jaswant Singh Ranawat 03.05.2018 07:14

Здесь может помочь некоторый живой код, хотя gltf легко читается, я бы лучше понял, если бы мог зарегистрировать ваш экземпляр THREE.Scene, хотя на 80% уверен, что ответ решит эту проблему.

pailhead 03.05.2018 07:19
Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
0
4
431
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Если это три отдельных узла, и все они находятся на 0,0,0, у вас могут возникнуть проблемы с сортировкой. GLTF читается, но я не настолько знаком со спецификацией, чтобы сказать, что происходит. Все узлы, упомянутые в файле, не имеющие поля перевода, могут быть расположены в 0,0,0.

В любом случае, если вы хотите продолжить сортировку, решение чего-то подобного - назначить другой yourMesh.renderOrder = yourDesiredOrder. Итак, для этих элементов вы можете установить 1,2,3,4 ... и контролировать, когда вы хотите, чтобы они отображали / указывали сортировке, чтобы учитывать эти веса.

да установка renderOrder Решает проблему, но это я могу сделать во время выполнения, но другие загрузчики gltf не будут знать о renderOrder, поскольку для него нет возможности использовать формат gltf. Так что я думаю, что это ограничение формата gltf

Jaswant Singh Ranawat 03.05.2018 10:17

нет, это ограничение графики вообще, а может, three.js. Это непросто отсортировать

pailhead 03.05.2018 11:20

Другие вопросы по теме