How do you import this module?

[supermoos]

import * as PIXI from 'pixi.js'
// @ts-ignore
import 'pixi-picture';

Results in:
pixi-picture.js:258 Uncaught ReferenceError: PIXI is not defined
at pixi-picture.js:258
at Object../node_modules/pixi-picture/dist/pixi-picture.js (pixi-picture.js:260)

[ivanpopelyshev]

For any of my pixi plugins

import * as PIXI from 'pixi.js'
window.PIXI = PIXI;
import 'pixi-picture'; // or require('pixi-picture')

Just remember that its fr pixi-v4, i havent convert it to v5 yet

[ivanpopelyshev]

Which features from pixi-picture do you want to use?

[supermoos]

Just the blendmode overlay in pixi v5 webgl :-)

[ivanpopelyshev]

ok, I'll try to update it this weekend or next week. I needed someone to poke me :) Last week I updated https://github.com/pixijs/pixi-compressed-textures/

[ivanpopelyshev]

For some limited cases you can do it yourself. For example, if you just want to blend one image on top of another. If there are more images then it'll be a problem.

[supermoos]

I actually just need to have an image have it's blendmode set to overlay layered on top of a solid color below it and save the results once. I don't even need it to be dynamic as I'm gonna cache it as a bitmap once it's outputted once. Any other workaround that may be able to render the overlay effect? Thanks for your pointers.

[ivanpopelyshev]

oh, then there's a easier way.

Here's the frag part that you can use: https://github.com/pixijs/pixi-picture/blob/master/src/OverlayShader.ts#L14

Put it in https://pixijs.io/examples/#/filters-advanced/custom.js (here's its frag: https://pixijs.io/examples/examples/assets/pixi-filters/shader.frag )

Or in https://pixijs.io/examples/#/mesh/triangle-textured.js .
Use samplers from example, and color conversion code from this plugin.

Its a good way to learn how shaders work, but it requires some time and attention :)

[supermoos]

Thanks for the pointers, I tried to port it to v5 by extrapolating some of the SPRITE_UNIFORM code from the dist build. I ended up with:

		this.overlayFilter = new PIXI.Filter(`attribute vec2 aVertexPosition;
		attribute vec2 aTextureCoord;
		attribute vec4 aColor;
		
		uniform mat3 projectionMatrix;
		uniform mat3 mapMatrix;
		
		varying vec2 vTextureCoord;
		varying vec2 vMapCoord;
	
		void main(void)
		{
		    gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);
		        vTextureCoord = aTextureCoord;
		            vMapCoord = (mapMatrix * vec3(aVertexPosition, 1.0)).xy;
		            }
		            `,
			`varying vec2 vTextureCoord;
varying vec2 vMapCoord;
varying vec4 vColor;
uniform sampler2D uSampler[2];
uniform vec4 uColor;
uniform vec4 uTextureClamp;
void main(void)
{
	vec2 textureCoord = clamp(vTextureCoord, uTextureClamp.xy, uTextureClamp.zw);

    vec4 source = texture2D(uSampler[0], textureCoord) * uColor;
    vec4 target = texture2D(uSampler[1], vMapCoord);
    //reverse hardlight
    if (source.a == 0.0) {
        gl_FragColor = vec4(0, 0, 0, 0);
        return;
    }
    //yeah, premultiplied
    vec3 Cb = source.rgb/source.a, Cs;
    if (target.a > 0.0) {
        Cs = target.rgb / target.a;
    }
    vec3 multiply = Cb * Cs * 2.0;
    vec3 Cb2 = Cb * 2.0 - 1.0;
    vec3 screen = Cb2 + Cs - Cb2 * Cs;
    vec3 B;
    if (Cs.r <= 0.5) {
        B.r = multiply.r;
    } else {
        B.r = screen.r;
    }
    if (Cs.g <= 0.5) {
        B.g = multiply.g;
    } else {
        B.g = screen.g;
    }
    if (Cs.b <= 0.5) {
        B.b = multiply.b;
    } else {
        B.b = screen.b;
    }
    vec4 res;
    res.xyz = (1.0 - source.a) * Cs + source.a * B;
    res.a = source.a + target.a * (1.0-source.a);
    gl_FragColor = vec4(res.xyz * res.a, res.a);
}
`);

However when running it I get this error:

Uncaught TypeError: Failed to execute 'uniform1iv' on 'WebGL2RenderingContext': No function was found that matched the signature provided.
    at eval (eval at generateUniformsSync (core.es.js:7419), <anonymous>:8:16)
    at ShaderSystem.syncUniforms (core.es.js:9417)
    at ShaderSystem.syncUniformGroup (core.es.js:9403)
    at ShaderSystem.bind (core.es.js:9376)
    at FilterSystem.applyFilter (core.es.js:5296)
    at Filter.apply (core.es.js:8239)
    at FilterSystem.pop (core.es.js:5248)
    at Sprite.renderAdvanced (display.es.js:1692)
    at Sprite.render (display.es.js:1618)
    at Container.renderAdvanced (display.es.js:1680)
(anonymous) @ VM14967:8
syncUniforms @ core.es.js:9417
syncUniformGroup @ core.es.js:9403
bind @ core.es.js:9376
applyFilter @ core.es.js:5296
apply @ core.es.js:8239
pop @ core.es.js:5248
renderAdvanced @ display.es.js:1692
render @ display.es.js:1618
renderAdvanced @ display.es.js:1680
render @ display.es.js:1618
render @ display.es.js:1627
render @ core.es.js:11204
render @ app.es.js:73
emit @ ticker.es.js:134
update @ ticker.es.js:673
Ticker._tick @ ticker.es.js:372
requestAnimationFrame (async)
Ticker._tick @ ticker.es.js:376

[ivanpopelyshev]

put it in codepen, jsfiddle or in pixi-playground please, I'll edit it :)

[supermoos]

Sure thing, thanks! https://www.pixiplayground.com/#/edit/wm_vv6gp0ELsSD4fAEWVy

[ivanpopelyshev]

you need two images for that overlay. bunny over something, right? where's that something?

[supermoos]

Actually just a solid color is what I'm looking for it doesn't need to blend with another image. So a solid color image would work - which I guess would be best to just do right in the shader instead of another image?

[ivanpopelyshev]

OH, RIGHT! I forgot that. OK, one demo, coming right up.

[ivanpopelyshev]

Here: https://www.pixiplayground.com/#/edit/wm_vv6gp0ELsSD4fAEWVy

So, i've got targetColor through uniform - that's our backdrop!

Cb stands for "color of backdrop", target color.
Cs stands for "color of source" , bunny texture.

Formulae is taken from css blending documentation, https://www.w3.org/TR/compositing-1/#blendingoverlay

If you modify the color that is passed to uniforms - you'll see that filter takes rectangular area on screen. You might want to modify how alpha is handled, for example always preserve source alpha instead of setting it to 1 because target has alpha=1 in the easy case.

I'm happy that you've chosen that way, because now we'll have one more person who knows how to do that stuff.

[ivanpopelyshev]

I've put the post here: https://github.com/pixijs/pixi.js/wiki/v5-Hacks#single-color-blending

[supermoos]

Thanks for the pointers, I ended up using the original overlay shader code (slightly modified for v5): https://www.pixiplayground.com/#/edit/4_8~zBItAuarz_ntitt59 - this now replicates proper overlay shader similar to chrome's built in in css.

[ivanpopelyshev]

Oh, wait, i switched Cb and Cs because i thought there's a mistake.. and you switched it back , good job :) Now we both know which variant is correct.

[bigbadwofl]

Any update on getting pixi-picture ready for v5? Thanks in advance!

[ShukantPal]

FYI With PixiJS 6, it's a simple import:

// ESM
import { Sprite, BlendFilter } from '@pixi/picture';

// Require
const { Sprite, BlendFilter } = require('@pixi/picture');

// IIFE
PIXI.picture.Sprite, PIXI.picture.BlendFilter