Why does pixi.js webgl differs from three.js? - three.js

Question

I have tried to port this https://codepen.io/jhnsnc/pen/qPZvvM
to pixi but without success.
What I have tried so far is the following
let video = document.createElement("video");
video.src = videoUrl;
video.loop = true;
video.muted = true;
var videoTexture = PIXI.Texture.fromVideo(video);
let uniforms = {
time: { type: "f", value: 1.0 },
texture: { type: "sampler2D", value: videoTexture }
};
this.videoSprite = new PIXI.Sprite(videoTexture);
this.videoSprite.filters = [new PIXI.Filter(document.getElementById( 'vertexShader' ).textContent,document.getElementById( 'fragmentShader' ).textContent,uniforms)]
<script id="vertexShader" type="x-shader/x-vertex">
// varying vec2 vUv;
void main()
{
// vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
#ifdef GL_ES
precision highp float;
#endif
uniform float time;
uniform sampler2D texture;
// varying vec2 vUv;
void main( void ) {
gl_FragColor = vec4(
texture2D(textureA, vec2(512.0, 0.5 + 256.0/2.)).rgb,
texture2D(textureA, vec2(512.0, 256.0/2.)).r
);
}
</script>
I'm getting error "castToBaseTexture is not a function"
This is how it has been done in pixi, 4 years ago but doesn't work anymore in pixi 4 and 5.
https://github.com/ENAML/pixi-alpha-video

Answer 1

Why does pixi.js webgl differs from three.js?
Because they are different libraries written by different people
They will all have different ways to specify attributes, uniforms, create textures, etc...
The names used in three.js like projectionMatrix, modelViewMatrix, position, uv, vUv, normal, vNormal, vColor etc.. are all names chosen by three.js, They could have been named foo, moo, bar, banana, etc. They are not part of WebGL anymore than the variables you declare in JavaScript are part of JavaScript.
The only variables that are defined by WebGL start with gl_ like gl_Position and gl_FragColor. All other variables are user defined, in this case the user being the developers of the three.js and pixi.js
if you want to use a shader designed for one library (three.js) in another library (pixi.js). you'll need to read through the docs and lookup what that particular library decided to name all of its variables.
Further, the way you provide values to those variables are entirely defined by the creators of those libraries. You may need to set up attributes, buffers, textures, uniforms, how to do that will be different in every library. Again, you'll need to read their docs or look through their source or examples to figure out what they want.
This is all no different than say React vs Vue vs Angular. They might all be built on the same tech (JS/HTML) but how you use them to do something is completely different. Similarly, both three.js and pixi.js might happen to use WebGL, but they are not WebGL, they are their own things and you need to read their docs/examples/source to figure out how to use them.