In my A-Frame AR scene, there is an image (transparent png) that can be moved and resized using gestures.
My goal now is to adjust the brightness of this image based on the light estimated from the camera input. I have successfully implemented the light estimation feature and initially thought of applying a CSS filter: brightness(x.x) to the image using the light estimation value.
Unfortunately, applying CSS directly to the <a-image> element does not seem to yield any effect.
As a result, I believe this effect can be achieved using materials and shaders, but I am unsure about how to proceed. I attempted to use a flat shader and adjust its opacity, but this resulted in the entire image becoming slightly opaque with a black tint.
Below is an example of the shading approach I experimented with:
<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 experimented with a standard shader using emissiveIntensity, but had difficulty achieving full darkness with black. Other colors come close to the desired effect, yet a completely dark image remains out of reach:
//when set emissive to black, the image remains unchanged
material="shader:standard;color:white;emissive:red;emissiveIntensity:0.5;
//using this approach results in complete blackness, but the image becomes invisible
material="shader:standard;color:black;emissive:white;emissiveIntensity:0.5"
Any suggestions on how to achieve this effect?