Яркость изображения A-Frame - PullRequest
Новая
       11

Яркость изображения A-Frame

0 голосов
/ 13 января 2020

У меня есть сцена 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

Есть идеи, как этого добиться?

1 Ответ

0 голосов
/ 13 января 2020

Я понял, все, что мне нужно было сделать, это установить материал для стандартного шейдера, ничего другого, а затем изменить интенсивность окружающего освещения, который я добавил вручную, чтобы заменить стандартные, добавляемые a-frame. 

material="shader:standard"

Если по какой-либо причине есть лучший способ сделать это, пожалуйста, напишите ответ.

...