Using of PIXI's shaders outside framework

[Yuriy Miroshnyk]

Hi.

I'm working on PIXI plugin for Neutrino Particles (neutrinoparticles.com). Because JS is not my favorite language (it's C++ one), it is not straightforward for me to understand and use some JS constructions. In particular, I didn't get how modules of PIXI are connected into one file and how they include features of each other. So, I see how shaders are created inside the framework, but I can't create them outside pixi.js framework.

Is it possible to use such features, like shaders and VAO outside?

P.S. Currently, the plugin works pretty good. I still need to resolve some troubles with saving/restoring gl state, but the rest is fine (not perfect). I made rendering with my own shaders and vertex buffers, but I thinks it would be much better to use PIXI's features for that. Canvas works fine - it was much easier to get up.

You can find sources of the plugin and samples for PIXI here: https://github.com/ymiroshnyk/neutrinoparticles.js/tree/PIXI

The sources are work in progress and are in separate "PIXI" branch until finished.

Neutrino Particles would be a great addition to PIXI features. You can check live JS gallery and a couple of latest video tutorials.

Thanks.

[merachefet]

Wait, so right now you're manipulating the WebGL context yourself to load shaders, and you just want to know how to use PIXI's interface for that instead? Is this just going over my head? I'm not even smart enough to configure Node.js.

Pixi exposes shaders through the PIXI.Filter class.

// use a custom shader and then the included Blur extension for this thing
var filters = [];
filters.push(new PIXI.Filter("Vertex GLSL Source", "Fragment GLSL Source"));
filters.push(new PIXI.filters.BlurFilter());
PixiRenderableThing.filters = filters;
PixiRenderableThing.filters[0].uniforms.sweet = true;
PixiRenderableThing.filters[0].uniforms.sour = false;
PixiRenderableThing.filters[1].blur = 7;
renderer.render(PixiRenderableThing);