Nano Hash - криптовалюты, майнинг, программирование

Aframe - PNG с прозрачностью перед объектом

Возможно, это не относится к Aframe, поэтому приносим свои извинения, если это скорее общий вопрос HTML, но если у вас есть PNG с прозрачностью и вы помещаете его перед другим изображением или любым объектом с непрозрачностью менее 1,0, прозрачная часть PNG маскирует то, что за ним скрывается. Есть ли способ решить эту проблему, не размещая PNG за другим объектом?

Вот пример того, как png ведет себя так, как он должен перед примитивами. Это работает, потому что все примитивы полностью непрозрачны: https://codepen.io/iBrews/pen/dWNymp

<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>

<a-assets>
<img id="pngImage" crossorigin="anonymous" 
src="http://ekladata.com/hXTGfWnZm170W274zDRObDlqOlc.png">
</a-assets>

<a-scene>
<a-image position = "0 1.5 -1" width="1" height="1" src="#pngImage"></a-image>

<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
<a-box position="-1 0.5 -3" rotation="0 45 0" width="1" height="1" depth="1" color="#4CC3D9"></a-box>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-sky color="#ECECEC"></a-sky>
</a-scene>

Вот пример моей проблемы. PNG с прозрачностью маскирует ВСЕ изображения позади него, независимо от того, имеют они прозрачность или нет, а также любые примитивы с непрозрачностью менее 1,0 https://codepen.io/iBrews/pen/ZKLpqp

<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>

<a-assets>
<img id="transpImage" crossorigin="anonymous" src="http://ekladata.com/hXTGfWnZm170W274zDRObDlqOlc.png">
<img id="flatImage" crossorigin="anonymous" src="https://upload.wikimedia.org/wikipedia/commons/e/e9/Felis_silvestris_silvestris_small_gradual_decrease_of_quality.png">
</a-assets>

<a-scene>
<a-image position = "0 1.6 -1" width="1" height="1" src="#transpImage"></a-image>
<a-image position = "1 1.8 -1.5" width="1" height="1" src="#transpImage"></a-image>
<a-image position = "-.7 2 -1.5" width="1" height="1" src="#flatImage"></a-image>

<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
<a-box position="-1 0.5 -3" opacity= ".5" rotation="0 45 0" width="1" height="1" depth="1" color="#4CC3D9"></a-box>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-sky color="#ECECEC"></a-sky>
</a-scene>
image transparency aframe
26.04.2017

  • Где твой код? Прозрачные PNG в Интернете работают так, как вы ожидаете; все, что находится под ним, будет видно сквозь прозрачные области. Если вы визуализируете прозрачный PNG в canvas, это совершенно другое, но вы не предоставили никакой полезной информации, поэтому невозможно предоставить контекстную помощь. 26.04.2017
  • Извините, код и примеры добавлены. 26.04.2017
  • Ваш код выглядит так, как будто он должен работать, возможно, добавьте transparent="true" к <a-image />? (обратите внимание на других, разметка HTML в этом вопросе используется библиотекой A-Frame для визуализации контекста WebGL, поэтому это не стандартный <image> поверх других элементов DOM) 27.04.2017
  • Не работает. Взгляните на новый пример codepen, который я добавил внизу — он прекрасно иллюстрирует проблему. 27.04.2017

Ответы:


1

Вы можете установить альфа-тест материала на 0,5. На мастере A-Frame (доставка до 0.6.0) вы можете сделать:

<a-image material="alphaTest: 0.5"> или, возможно, <a-image alpha-test="0.5"></a-image>

На A-Frame 0.5.0 это можно сделать вручную:

<script>
  AFRAME.registerComponent('alpha-test', {
    dependencies: ['material'],
    init: function () {
      this.el.getObject3D('mesh').material.alphaTest = 0.5;
    }
  });
</script>

<a-image src="#transpImage" alpha-test></a-image>

Ручка: https://codepen.io/mozvr/pen/jmyVRG

26.04.2017
  • Это было очень полезно! Отлично работает на прозрачном фоне PNG, но не так хорошо на градиентах. Есть ли способ заставить его работать и с градиентами? 27.10.2017
    • Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..