pixi.js - v2.0.0 - displacement shader vs twist shader
HTML
<script src="https://cdn.rawgit.com/GoodBoyDigital/pixi.js/v2.0.0/bin/pixi.js"></script>
<div id="twist"></div>sdf
CSS
canvas {
margin:5px;
}
img {
width:64px;
}
JavaScript
var Mode7 = function () {
PIXI.AbstractFilter.call(this);
this.passes = [this];
// set the uniforms
this.uniforms = {
pos_x: {type: '1f',value: 0.5},
pos_y: {type: '1f',value: 0.5},
ang: {type: '1f',value: 0.7}, // FIXME
horizon: {type: '1f',value: -0.5},
fov: {type: '1f',value: 1.0},
scale_x: {type: '1f',value: 1.0},
scale_y: {type: '1f',value: 1.0},
};
this.fragmentSrc = [
'precision mediump float;',
'varying vec2 vTextureCoord;',
'varying vec4 vColor;',
'uniform vec4 dimensions;',
'uniform sampler2D uSampler;',
'precision highp float;',
'uniform highp float pos_x;',
'uniform highp float pos_y;',
'uniform highp float ang;',
'uniform highp float pixelWidth;',
'uniform highp float pixelHeight;',
'uniform highp float horizon;',
'uniform highp float fov;',
'uniform highp float scale_x;',
'uniform highp float scale_y;',
'void main(void) {',
' float px = vTextureCoord.x-0.5;',
' float py = vTextureCoord.y-0.5 - horizon - fov;',
' float pz = vTextureCoord.y-0.5 - horizon;',
' //projection',
' float sx = px / pz;',
' float sy = py / pz;',
' float sin_ang = sin(radians(ang));',
' float cos_ang = cos(radians(ang));',
' float xx = sx * cos_ang - sy * sin_ang;',
' float yy = - sx * sin_ang - sy * cos_ang;',
' float tx = xx * scale_x + pos_y;',
' float ty = yy * scale_y + pos_x;',
' if (tx > 1.0 || tx < 0.0 || ty > 1.0 || ty < 0.0) {',
' gl_FragColor = vec4(0.0,0.0,0.0,0.0);',
' } else {',
' gl_FragColor = texture2D(uSampler, vec2(tx, ty));',
' }',
'}', ];
};
Mode7.prototype = Object.create(PIXI.AbstractFilter.prototype);
Mode7.prototype.constructor =...