Converting the GLSL code is unnecessary. You can utilize the same shader by creating a PIXI.Filter and setting the values of the uniforms iResolution and iGlobalTime. Apply the filter to the PIXI.Container. For example:
let app = new PIXI.Application({width : window.innerWidth, height : window.innerHeight});
app.resizeTo = window;
let fragmentShader = document.getElementById('fragmentShader').textContent;
let filter = new PIXI.Filter(null, fragmentShader);
filter.uniforms.iResolution = [app.screen.width, app.screen.height];
filter.uniforms.iGlobalTime = 0.0;
let container = new PIXI.Container();
container.filterArea = app.screen;
container.filters = [filter];
app.stage.addChild(container);
document.body.appendChild(app.view);
It's worth noting that the vertex shader can be omitted, as the default vertex shader of the filter is sufficient.
The process of animating and updating the time uniform (iGlobalTime) closely resembles the approach in THREE.js. For instance:
startTime = Date.now();
app.ticker.add(function(delta) {
var currentTime = Date.now();
filter.uniforms.iGlobalTime = (currentTime - startTime) * 0.0005;
});
Refer to the example in Pixi v5.1.5:
var app = new PIXI.Application({width : window.innerWidth, height : window.innerHeight});
app.resizeTo = window;
let fragmentShader = document.getElementById('fragmentShader').textContent;
let filter = new PIXI.Filter(null, fragmentShader);
filter.uniforms.iResolution = [app.screen.width, app.screen.height];
filter.uniforms.iGlobalTime = 0.0;
let container = new PIXI.Container();
container.filterArea = app.screen;
container.filters = [filter];
app.stage.addChild(container);
document.getElementById('container').appendChild(app.view);
function onresize(event) {
if (app.resize)
app.resize();
container.filterArea = app.screen;
filter.uniforms.iResolution = [app.screen.width, app.screen.height];
}
window.addEventListener('resize', onresize, false);
startTime = Date.now();
app.ticker.add(function(delta) {
var currentTime = Date.now();
filter.uniforms.iGlobalTime = (currentTime - startTime) * 0.0005;
});
html, body { margin: 0; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.8.2/pixi.min.js"></script>
<div id="container"></div>
<script id="fragmentShader" type="x-shader/x-fragment">
uniform vec2 iResolution;
uniform float iGlobalTime;
vec3 hsv2rgb(vec3 c)
{
vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
}
// Remaining shader code
...
// End of shader code
</script>