The blend equation is a linear function on the source color and destination color that calculates the output color. MULTIPLY – The colors are multiplied, which always results in darker colors.SUBTRACT – Subtracts the source color from the destination.ADD – Sums the source and destination color with equal weighting instead of alpha-weighting.The blend modes in the 1st column change the arithmetic used to mix the source and destination color. The DST_OVER blend mode will make a scene appear as if z-indices were reversed. Even though the blue squares are rendered after the red circles, they are behind with DST blend modes. The blend modes with prefix DST switch which color is in the foreground. But since PixiJS only applies the blend mode in the blue square’s area, this is not possible with blending. An actual IN operation would erase non-overlapping areas in the red circle. For example, SRC_IN and SRC_ATOP look the same when. In PixiJS, the blend modes only apply to pixels in the object being rendered, so the compositing operations look a bit different. ATOP – colors are outputted only over existing content.OUT – colors are outputted only in non-overlapping areas.IN – only overlapping areas are rendered.OVER – colors are mixed for the whole object being rendered.These represent image compositing operations. The blend modes in the 2nd and 3rd columns have suffixes OVER, IN, OUT, and ATOP describing Porter Duff operations. The normal blend mode makes the source color, blue, appear in the foreground over the destination color, red, in the background. In the 4th column here are the blend modes PixiJS Picture adds. Below, blend modes supported in PixiJS are shown by rendering a semi-transparent blue square over a red circle: A showcase of all the blends modes available in PixiJS. In more simple terms, a blend mode is used to mix the colors of two objects where they overlap. The blend mode defines how colors output by the fragment shader are combined with the framebuffer’s colors. This section goes over blend modes and how they work in WebGL. Apart from blending, the “backdrop” texture it exposes can be used for other kinds of filtering. The next one up is PixiJS Picture Kit – a shader-based implementation for blending modes that WebGL doesn’t actively support. Ivan Popleyshev has been working hard upgrading the libraries he has authored to PixiJS 6.
0 Comments
Leave a Reply. |