Jump to content

Using of PIXI's shaders outside framework


Recommended Posts

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.

PIXI_screen01.png

Link to post
Share on other sites

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);

 

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...