motion-canvas / motion-canvas

Visualize Your Ideas With Code

Home Page:https://motioncanvas.io

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Make fill and stroke options accept shaders

hikarikoda opened this issue · comments

Description
Some shaders are meant to be applied only to certain parts of a node, like backdrop filters that should only be applied to the fill area. Sometimes you don't want the shader to take into consideration the stroke of the node, or the children. Sometimes you want it to be only applied to the stroke, and this can be a bit tricky if the shader always has the whole node and its children in the source texture.

Proposed solution
It would be a lot more convenient to have the fill and stroke parameters accept a shader that gets drawn at the time that element is.

That would allow us to do things like:

view.fill(backgroundShader)

to add a shader as a background to the scene or a node without having to dodge the children drawn on top of it in the shader.

Additional Context
Creating backdrop filters for instance, requires handling the area the filter should be applied to, and then drawing the children and stroke on top of that:

outColor = mix(source, outColor, 1. - floor(source.a));

but this creates issues with the antialiasing of the shapes, specially when you manipulate the color of the destination texture, like on a tinted glass effect.

Here you can see the same object with a tinted shader, the same shader without tint and without a shader. Both options with the shader get broken antialiasing, but the tinted one not also gets the tint color spread over the antialiased area.
image

In most cases when a shader manipulates the destination texture and wants to show the source texture on top of it, having the shader apply when only the fill is set would be the better way. The source texture can be used as a map of where to apply the effect on and not have to be drawn on top of it. Then the actual contents and stroke can be drawn on top with the proper antialiasing.