Pixi.js: Load a separate file GLSL shader as a string

Created on 26 Jan 2017 · 3Comments · Source: pixijs/pixi.js

Hello,

I'm working on GLSL shaders with Pix and I would like to write them in separates files and load the contents with Javascript to use them in a Pixi Filter because writing the shader in a Javascript HTML element as some tutorials show isn't pretty at all.

Considering this code:

const frag_shader = document.getElementById( 'frag_shader' ).innerHTML; //Replacing this by reading the GLSL file 

const filter = new PIXI.Filter('', frag_shader);

Is there any way for Pixi.js to load external GLSL files in order to pass their content to PIXI.Filter ?
If not, is it a planned feature or do you use an external tool such as the glslify npm package to do so (https://github.com/stackgl/glslify) ?

There isn't much information for how Pixi v4 handle GLSL files and SO doesn't seem to have the answers, so I open this issue in order to know if this is something you can come up with.

Thanks for your answer.

Source

SebastienFPRousseau

👍1

Most helpful comment

Yes, PIXI includes glslify. You could use the loader.

PIXI.loader.add(["vert.txt","frag,txt"]);
PIXI.loader.load(finshed);

function finished()
    {
    var vert = PIXI.loader.resources["vert.txt"].data;
    var frag = PIXI.loader.resources["frag.txt"].data
    var myfilter = new PIXI.Filter(vert, frag);
    }

merachefet on 28 Jan 2017

👍3

All 3 comments

Yes, PIXI includes glslify. You could use the loader.

PIXI.loader.add(["vert.txt","frag,txt"]);
PIXI.loader.load(finshed);

function finished()
    {
    var vert = PIXI.loader.resources["vert.txt"].data;
    var frag = PIXI.loader.resources["frag.txt"].data
    var myfilter = new PIXI.Filter(vert, frag);
    }

merachefet on 28 Jan 2017

👍3

Thanks ! That's what i needed.

SebastienFPRousseau on 30 Jan 2017

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.