HTML5

Shaders with Pixi.js

waterShader

0.Defining the Shader

The easiest place to define a GLSL is the HTML page. By setting the type to ‘shader’ in a script tag we can easily write our GLSL code.We can create the above image effect using the following shader code.

<script id="shader" type="shader">

precision mediump float;


varying vec2 vTextureCoord;//default Texture coords

uniform sampler2D uSampler;//default texture

uniform sampler2D offSetSampler;//values are passed from Pixi.js

uniform float uniform_float;//values are passeed from Pixi.js


vec4 ColorUT;

void main(){

ColorUT = texture2D(offSetSampler, fract(vTextureCoord+uniform_float));

gl_FragColor = texture2D(uSampler, vTextureCoord+ColorUT.xy*0.02);

}

</script>

1. Defining in Pixi

var frag_shaderCode = document.getElementById("shader").innerHTML;

//Pass Uniform data to Shader
simpleShader=newPIXI.Filter(undefined, frag_shaderCode, UniformData);
//default vertex shader will be called

We need to apply the defined shader to a Pixi container. The rendered image texture from the applied container and its texture coordinates are automatically passed by Pixi to ‘vTextureCoord’ and ‘uSampler’ variables in the shader.

2.Passing data

When we need to pass values to defined uniforms in the shader we must
define an object and define member variables using the same name which we used in the shader.

var UniformData = {

uniform_float:0.0

};

....

UniformData.offSetSampler = PIXI_Loader.resources["images/waterOff.jpg"].texture;

3.Updating data from Pixi

In the game loop

//Update Shader Data

UniformData.uniform_float=smoothStep;

4.Putting it all together

Github : https://github.com/kalanadis/pixiShader

Plank.js + Pixi.js

Planck.js is JavaScript rewrite of the famous Box2D physics engine. The following post is about, converting and connecting Plank.js world with Pixi.js world.

plankBall

0.Defining Plank world

plank_world = PLANK.World(
{
gravity:PLANK.Vec2(0, -10)
}
);

1.Understanding the scale

Plank uses SI units (meters, seconds, kilograms), to make things visually realistic, pixel scales in Pixi must have a relationship with the real-world scale. In the example, I ‘ve used a football. In a 576*1024 pixel renderer view, I wanted my football to be 128*128 pixel image. So I have defined the view.
Now a football is approximately 0.20m in diameter.
128 pixels = 0.20 m

2.Understanding coordinate systems

To makes things easier I ‘ve placed the origin of the Plank world on the bottom left corner of the view.

bgCoords

3.Pixi to Plank and Plank to Pixi

According to the above definitions,

function pixiPositionToPlank(x, y) {

//change Y origin point and direction
y=(y-1024)*-1;

//convert pixels to meters (64px = 0.1m)
y*=0.0015625;
x*=0.0015625;

returnPLANK.Vec2(x,y);
}

function plankPositionToPixi(v) {

//convert pixels to meters (64px = 0.1m)
var retY=v.y*640;
var retX=v.x*640;

//change Y origin point and direction
retY= (retY*-1)+1024;

return { x:retX, y:retY };
}

4.Updating the Physics world

In the Game loop,

//Update Physics

plank_world.step(tDelta*0.001);

var po=plankPositionToPixi(ball_body.getPosition());

ball_sprite.position.set(po.x,po.y);
ball_sprite.rotation=ball_body.getAngle()*-1;

5.Applying a force to the ball

var p = pixiPositionToPlank(evt.data.global.x,evt.data.global.y);
var f=PLANK.Vec2(ball_body.getPosition());

f=f.sub(p);//force direction
f.normalize();
f.mul(2);//force magnitude
ball_body.applyLinearImpulse(f, p, true);

6. Collision event

plank_world.on('pre-solve', function(contact, oldManifold) {

var manifold=contact.getManifold();

if (manifold.pointCount==0) {
return;
}

console.log("HIT!!");
});