У меня есть сцена A-Frame AR с изображением в ней (прозрачный png), которую я могу перемещать и изменять размеры с помощью жестов.
То, что я сейчас пытаюсь сделать, это изменить яркость этого изображения в соответствии со светом, оцененным на входе камеры. У меня работает бит оценки освещенности, и моя первоначальная идея состояла в том, чтобы просто применить CSS filter: brightness(x.x) к изображению, используя значение, полученное при оценке освещенности.
К сожалению, применение CSS к <a-image>, похоже, не имеет никакого эффекта.
Поэтому я думаю, что этого, вероятно, можно достичь с помощью материалов и шейдеров, но я не знаю, как это будет go, я попытался использовать плоский шейдер и изменить его непрозрачность, но это меняет непрозрачность все изображение, поэтому я получаю слегка непрозрачный черный оттенок.
Вот пример затенения, которое я пробовал:
<a-scene>
<a-image src="http://assets.stickpng.com/thumbs/580b57fcd9996e24bc43c52d.png"
position="0 2 -3"
rotation="0 0 0"
height="5"
width="5"
material="shader:flat;color:black;opacity: 0.5; transparent: true">
</a-image>
</a-scene>
Я также пытался использовать стандартный шейдер с emissiveIntensity но я не могу заставить его работать с черным, любой другой цвет выглядит более или менее там, где я хочу, хотя я не могу получить полностью темное изображение (как было бы, если бы яркость была 0):
//if i change emissive to black then the image is unaffected
material="shader:standard;color:white;emissive:red;emissiveIntensity:0.5;
//like this i can get full black but the image is no longer visible, only the shape
material="shader:standard;color:black;emissive:white;emissiveIntensity:0.5"
jsfiddle
Есть идеи, как этого добиться?