Tips for rendering only lighting in specific region with alpha

[Veiss]

Hello, I’m working on an interface for a touchscreen and would like to render out just the lighting in a specific region of a button element. I’d like to animate the brightness and render only the lighting so that I may ultimately display the lighting on the button only when the button is activated in my automation software. So basically a GIF on top of the static image that has all the buttons off.

Here you can see on the left the button with the lighting and on the right without. The lighting is area lights created from a ring of faces at the base of the circular button. Area lights seem to produce a better result than an emission material.

I know I can use the render region to get the square area of the button, but ideally would like to make the region pixel accurate if possible while maintaining the original background size so when I drop the small lighting gif it matches the unlit background. I’ve seen this addon for doing what i’d like, but haven’t confirmed it’ll work in 2.93/3 yet. https://blendermarket.com/products/brendon

So my main hurdle seems to be getting just the light to render with an alpha. I’m not sure how to best utilize compositing/render passes to do this. Each button is in a different part of the screen where the background is different. I don’t mind that the lighting is the same and am hoping since there will be an alpha it’ll look slightly different over the background in different areas.

Hopefully my intent isn’t too confusing.
Thanks for any replies

[JRENG]

Do you need to render only the emission pass? IIRC there’s a checkbox on render settings that will enable render emission pass on Compositor nodes. Probably need some tweaking if you want to look it as it as rendered as a single composite.

I haven’t tried it myself, because when i need to animate certain object (with emission) and render them as UI elements i’ve always ended to print them with its background (which casts emission).

[DNorman]

@Veiss

getting just the light to render with an alpha

You need some glossiness/reflectivity to mix with transparent to get the light to shine on a transparent object.

You could copy your button/s and light/s to a different scene and give the button/s a material mixing glossy and transparent.

I am not sure how you did the noisy texture, I used a noise texture to displace the button, if you have different textures for each button make a different material for each one.

Render the “transparent” scene with the film transparent option.

You can then mix the scenes with compositor.

@Veiss

the region pixel accurate if possible while maintaining the original background size

To preserve the pixel density you have to render the buttons with the same camera as the background, then if you use render region the density will be the same.

[Veiss]

Thanks, I have it looking good in the viewport, but when rendering it doesn’t stay transparent. I have transparent enabled under Film.

[DNorman]

Hmm, I am not sure why, here are my render settings (I know you said you did have film transparent on) and render result, make sure you are viewing colour and alpha:

[Veiss]

Ah, I had Composite selected instead of View Layer for some reason.

Thanks!

[Veiss]

When I try to save the file nothing or very little shows up in the PNG or the render layer in the compositor.

What happens if you try to render your test to a PNG with alpha?

[DNorman]

There should be no problem to make your animation inside Blender, (although in the compositor the preview image of your render layer node does not show the transparent image). The viewer node should work and your renders should be fine.

Here my setup is a bit different from yours, I used 2 scenes instead of render layers and mixed them with an alpha over node. Then I animated the factor of the alpha over.

One of my scenes has the “transparent button”, the other has a dark green button and a yellowish plane. Both use the same lighting and camera.
Note that my render layer node also looks blank but it isn’t

Here is the animation I did:

Button.mkv (76.7 KB)

As for png format there are problems exporting alpha to png, I do not really understand what is going on and these threads are a bit technical. The bottom line was it is best to export images with alpha in exr format.
If you want a hard read here you go! :

Rendering an ACTUALLY transparent Glass? (Cycles)

Hello everybody! Blender noob here, with a Blender rendering question I want to render a see-thru glass with an alpha channel, so that later i could composite it in photoshop/after effects and have the background move and change underneath it. i know the background won’t be refracted (i could fake the refraction in after effects) [image] I just want those cool highight shapes to be extracted from the sphere without this gray color in the way. I already figured out that it h…

Blender 2.92 not saving alpha values properly

Hi I got a problem with 2.92. Made a funny animation with some postprocessing. The result looks nice on the screen but when saving the render, blender only saves the renderlayer and not the renderlayer+postpro… Here’s a pic of this: [image] On the left the render that i like a lot and on the right, the saved image in gimp. The alpha layer is missing transparency fade. I tried to save in various formats including exr float but nothing seems to work. Am i missing something…

[Veiss]

Thanks, the EXR format did indeed work better, but it’s a bit pixelated using multiple lossless codecs. I experienced similar issues with certain PNG renders I did. Maybe because my resolution is so low at 105x105.

Here I have it in Blender on the left, and in PS with a black fill layer under it to highlight the pixilation.

Here it is at 1575x1575, better but still noisy. I might just have to do this and downscale it…

After editing that in PS and converting to PNG it looks like it does when exporting to PNG from Blender where the pixels are really dark… Having a great time with this alpha stuff…

^see it^