PIXI-CUSTOM provides PIXI users a flexible(sort of) way to use custom geometries and vertex shader in PIXI 3.
PIXI-CUSTOM is made with browserify and love. However, I believe most of our users use the standalone version for PIXI, therefore even though you can install PIXI-CUSTOM with npm pixi-custom, I assume you have your PIXI exposed as a global variable in your website. If you just use to download the standalone version of PIXI-CUSTOM, you can DOWNLOAD IT HERE
Do you want to put a 3D globe or other 3D models into PIXI? Pixi-custom can make it happens!
Not convinced yet? Check out the the following examples:
var shader = new pixiCustom.Shader({
renderer: renderer,
vs : vsString,
fs : fsString,
attributes : {
aRandom: { type: '1f' }
},
uniforms : {
uTime: { type: '1f' }
}
});The codes above will define the shader interface but it doesn't store the data.
As you have to have vertices in the PIXI mesh, otherwise it will throw an error, I pre-inserted the default vertices attribute in the Class like:
attributes : {
vertices: {
// id is the variable name in the glsl, if not defined, it uses the property name instead
id: 'aVertexPosition',
// usage: 'DYNAMIC_DRAW',
// not support object type like v2 PIXI.Point
type: '2f'
}
}If you want to override it using 3 dimensional float, you can add the whole chunk in to override it (See Mesh)
After the shader is created, the values will be placed at the root of the object like this:
particles = new pixiCustom.Points({
shader : shader,
vertices : vertices,
aRandom : aRandom,
uTime : 0,
beforeRender : function(gl) {
// in case you want to do some advanced stuff
// gl.enable(gl.DEPTH_TEST);
// gl.enable(gl.CULL_FACE);
// gl.cullFace(gl.BACK);
},
afterRender : function(gl) {
// gl.disable(gl.DEPTH_TEST);
}
});Which means you can easily change the values by doing:
particles.aRandom[0] = 100;
particles.dirties['aRandom'] = true;
particles.uTime += dt;
If we don't take good use of the PIXI container system, there is no point to use PIXI. So, PIXI Custom respect the internal uniform setting.
// translation matrix
uniform mat3 translationMatrix;
// projection matrix
uniform mat3 projectionMatrix;
// alpha value that multiplied parent container alpha
uniform float alpha;
As Pixi-custom allows us to customize the geometry and to use the vertex shader, there is no way for PIXI to know what is the actual bound box of the instance to apply the filters. So, since PIXI-custom 0.0.7, we allow you to set the bound box manually so that the filters can work properly.
var myMesh = new pixiCustom.Mesh({...});
myMesh.bounds = new PIXI.Rectangle(-100, -100, 200, 200); // x: -100, y: -100, width: 200, height: 2000
var blurFilter = new PIXI.filters.BlurFilter();
blurFilter.blur = 4;
myMesh.filters = [blurFilter];
Please files issues for any bugs you ran into and features you want to be added into PIXI-CUSTOM. Any pull requests are welcome as well :)
This content is released under the (http://opensource.org/licenses/MIT) MIT License.