A 帧图像亮度

Question

I have an A-Frame AR scene with an image in it (transparent png) that i can move around and resize through gestures.

What I'm trying to do now is change the brightness of that image according to the light estimated from the camera input. I have the light estimation bit working and my initial idea was to simply apply a CSS filter: brightness(xx) to the image using the value outputted by the light estimation.

Sadly applying the CSS on the <a-image> doesn't seem to have any effect.

Therefore I'm thinking this can probably be achieved with materials and shaders, but I don't know how that would go, I tried using a flat shader and changing it's opacity but that changes the opacity of the whole image so i end up with a slightly opaque black shade.

Here's an example of the shading I was trying:

<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>

I also tried also using a standard shader with emissiveIntensity but i can't seem to make it work with black, any other color seems to get more or less where i want, although i can't get a fully dark image (as it would be if brightness was 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

Any idea how to achieve this?

Answer 1

I got it, all i had to do was set the material to a standard shader with nothing else and then change the intensity of the ambient light that i added manually to replace the default ones a-frame adds.

material="shader:standard"

If by any chance there is a better way to do this please post an answer.