wassname/phaser
1
0
Fork 0
mirror of https://github.com/wassname/phaser.git synced 2026-06-27 16:10:15 +08:00
Code Issues Packages Projects Releases Wiki Activity

Loads more shaders and some fixes and enhancements to PixiShader

Browse Source
This commit is contained in:
photonstorm
2013-11-20 04:04:48 +00:00
parent e620c99479
commit 93fcb7acbf
13 changed files with 2263 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/wip/classicTunnelFilter.js
+96
View File
@@ -0,0 +1,96 @@
PIXI.TunnelFilter = function(width, height, texture)
{
PIXI.AbstractFilter.call( this );
this.passes = [this];
var d = new Date();
var dates = [
d.getFullYear(), // the year (four digits)
d.getMonth(), // the month (from 0-11)
d.getDate(), // the day of the month (from 1-31)
d.getHours()*60.0*60 + d.getMinutes()*60 + d.getSeconds()
];
this.uniforms = {
iResolution: { type: 'f3', value: { x: width, y: height, z: 0 }},
iGlobalTime: { type: 'f', value: 1 },
iDate: { type: 'f4', value: dates },
iChannel0: { type: 'sampler2D', value: texture, wrap: 'repeat' }
};
// Shader by 4rknova (https://www.shadertoy.com/view/lssGDn)
this.fragmentSrc = [
"precision mediump float;",
"uniform vec3 iResolution;",
"uniform float iGlobalTime;",
"uniform float iChannelTime[4];",
"uniform vec4 iMouse;",
"uniform vec4 iDate;",
"uniform vec3 iChannelResolution[4];",
"uniform sampler2D iChannel0;",
"// add any extra uniforms here",
"#ifdef GL_ES",
"precision highp float;",
"#endif",
"#define S 0.79577471545 // Precalculated 2.5 / PI",
"#define E 0.0001",
"void main(void)",
"{",
"vec2 p = (2.0 * gl_FragCoord.xy / iResolution.xy - 1.0)",
"* vec2(iResolution.x / iResolution.y, 1.0);",
"vec2 t = vec2(S * atan(p.x, p.y), 1.0 / max(length(p), E));",
"vec3 c = texture2D(iChannel0, t + vec2(iGlobalTime * 0.1, iGlobalTime)).xyz;",
"gl_FragColor = vec4(c / (t.y + 0.5), 1.0);",
"}"
];
}
PIXI.TunnelFilter.prototype = Object.create( PIXI.AbstractFilter.prototype );
PIXI.TunnelFilter.prototype.constructor = PIXI.TunnelFilter;
Object.defineProperty(PIXI.TunnelFilter.prototype, 'iGlobalTime', {
get: function() {
return this.uniforms.iGlobalTime.value;
},
set: function(value) {
this.uniforms.iGlobalTime.value = value;
}
});
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update, render: render });
function preload() {
game.load.image('texture', 'wip/tex00.jpg');
}
var filter;
var sprite;
function create() {
sprite = game.add.sprite(0, 0, 'texture');
sprite.width = 800;
sprite.height = 600;
filter = new PIXI.TunnelFilter(sprite.width, sprite.height, sprite.texture);
sprite.filters = [filter];
}
function update() {
filter.iGlobalTime = game.time.totalElapsedSeconds();
}
function render() {
}
examples/wip/deformStarFilter.js
+1 -1
View File
@@ -17,7 +17,7 @@ PIXI.DeformStarFilter = function(width, height, texture)
iResolution: { type: 'f3', value: { x: width, y: height, z: 0 }},
iGlobalTime: { type: 'f', value: 1 },
iDate: { type: 'f4', value: dates },
iChannel0: { type: 'sampler2D', value: texture }
iChannel0: { type: 'sampler2D', value: texture, wrap: 'repeat' }
};
// Shader by iq (https://www.shadertoy.com/view/4dXGRn)
examples/wip/filter.js
+22 -28
View File
@@ -17,7 +17,7 @@ PIXI.StarNestFilter = function(width, height, texture)
iResolution: { type: 'f3', value: { x: width, y: height, z: 0 }},
iGlobalTime: { type: 'f', value: 1 },
iDate: { type: 'f4', value: dates },
iChannel0: { type: 'sampler2D', value: texture }
iChannel0: { type: 'sampler2D', value: texture, wrap: 'repeat' }
};
// Shader by Kali (https://www.shadertoy.com/view/4dfGDM)
@@ -32,43 +32,38 @@ PIXI.StarNestFilter = function(width, height, texture)
"uniform sampler2D iChannel0;",
"// add any extra uniforms here",
"#define M_PI 3.1415926535897932384626433832795",
"#ifdef GL_ES",
"precision highp float;",
"#endif",
"float rand(vec2 co)",
"{",
"return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453);",
"}",
"#define PI 3.1416",
"void main(void)",
"{",
"float size = 30.0;",
"float prob = 0.95;",
"//map the xy pixel co-ordinates to be between -1.0 to +1.0 on x and y axes",
"//and alter the x value according to the aspect ratio so it isn't 'stretched'",
"vec2 p = (2.0 * gl_FragCoord.xy / iResolution.xy - 1.0)",
"* vec2(iResolution.x / iResolution.y, 1.0);",
"vec2 pos = floor(1.0 / size * gl_FragCoord.xy);",
"//now, this is the usual part that uses the formula for texture mapping a ray-",
"//traced cylinder using the vector p that describes the position of the pixel",
"//from the centre.",
"vec2 uv = vec2(atan(p.y, p.x) * 1.0/PI, 1.0 / sqrt(dot(p, p))) * vec2(2.0, 1.0);",
"float color = 0.0;",
"float starValue = rand(pos);",
"if (starValue > prob)",
"{",
"vec2 center = size * pos + vec2(size, size) * 0.5;",
"//now this just 'warps' the texture read by altering the u coordinate depending on",
"//the val of the v coordinate and the current time",
"uv.x += sin(2.0 * uv.y + iGlobalTime * 0.5);",
"float t = 0.9 + 0.2 * sin(iGlobalTime + (starValue - prob) / (1.0 - prob) * 45.0);",
"vec3 c = texture2D(iChannel0, uv).xyz",
"color = 1.0 - distance(gl_FragCoord.xy, center) / (0.5 * size);",
"color = color * t / (abs(gl_FragCoord.y - center.y)) * t / (abs(gl_FragCoord.x - center.x));",
"}",
"else if (rand(gl_FragCoord.xy / iResolution.xy) > 0.996)",
"{",
"float r = rand(gl_FragCoord.xy);",
"color = r * (0.25 * sin(iGlobalTime * (r * 5.0) + 720.0 * r) + 0.75);",
"}",
"//this divison makes the color value 'darker' into the distance, otherwise",
"//everything will be a uniform brightness and no sense of depth will be present.",
"/ (uv.y * 0.5 + 1.0);",
"gl_FragColor = vec4(vec3(color), 1.0);",
"gl_FragColor = vec4(c, 1.0);",
"}"];
}
PIXI.StarNestFilter.prototype = Object.create( PIXI.AbstractFilter.prototype );
@@ -87,8 +82,7 @@ var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: p
function preload() {
// game.load.image('texture', 'wip/64x64.png');
game.load.image('texture', 'wip/tex08.jpg');
game.load.image('texture', 'wip/tex00.jpg');
}
examples/wip/hueRotationFilter.js
+118
View File
@@ -0,0 +1,118 @@
PIXI.HueRotationFilter = function(width, height, texture)
{
PIXI.AbstractFilter.call( this );
this.passes = [this];
var d = new Date();
var dates = [
d.getFullYear(), // the year (four digits)
d.getMonth(), // the month (from 0-11)
d.getDate(), // the day of the month (from 1-31)
d.getHours()*60.0*60 + d.getMinutes()*60 + d.getSeconds()
];
this.uniforms = {
iResolution: { type: 'f3', value: { x: width, y: height, z: 0 }},
iGlobalTime: { type: 'f', value: 1 },
iDate: { type: 'f4', value: dates },
iChannel0: { type: 'sampler2D', value: texture }
};
// Shader by Daniil (https://www.shadertoy.com/view/4sl3DH)
this.fragmentSrc = [
"precision mediump float;",
"uniform vec3 iResolution;",
"uniform float iGlobalTime;",
"uniform float iChannelTime[4];",
"uniform vec4 iMouse;",
"uniform vec4 iDate;",
"uniform vec3 iChannelResolution[4];",
"uniform sampler2D iChannel0;",
"// add any extra uniforms here",
"/* Simple hue rotation filter based on article:",
"http://beesbuzz.biz/code/hsv_color_transforms.php",
"*/",
"#define SPEED 10.0",
"void main(void)",
"{",
"vec2 uv = gl_FragCoord.xy / iResolution.xy;",
"float c = cos(iGlobalTime*SPEED);",
"float s = sin(iGlobalTime*SPEED);",
"mat4 hueRotation =",
"mat4( 0.299, 0.587, 0.114, 0.0,",
"0.299, 0.587, 0.114, 0.0,",
"0.299, 0.587, 0.114, 0.0,",
"0.000, 0.000, 0.000, 1.0) +",
"mat4( 0.701, -0.587, -0.114, 0.0,",
"-0.299, 0.413, -0.114, 0.0,",
"-0.300, -0.588, 0.886, 0.0,",
"0.000, 0.000, 0.000, 0.0) * c +",
"mat4( 0.168, 0.330, -0.497, 0.0,",
"-0.328, 0.035, 0.292, 0.0,",
"1.250, -1.050, -0.203, 0.0,",
"0.000, 0.000, 0.000, 0.0) * s;",
"vec4 pixel = texture2D(iChannel0, uv);",
"gl_FragColor = pixel * hueRotation;",
"}"];
}
PIXI.HueRotationFilter.prototype = Object.create( PIXI.AbstractFilter.prototype );
PIXI.HueRotationFilter.prototype.constructor = PIXI.HueRotationFilter;
Object.defineProperty(PIXI.HueRotationFilter.prototype, 'iGlobalTime', {
get: function() {
return this.uniforms.iGlobalTime.value;
},
set: function(value) {
this.uniforms.iGlobalTime.value = value;
}
});
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update, render: render });
function preload() {
// game.load.image('texture', 'wip/64x64.png');
// game.load.image('texture', 'wip/64x64.png');
game.load.image('texture', 'assets/pics/ra_einstein.png');
}
var filter;
var sprite;
function create() {
sprite = game.add.sprite(0, 0, 'texture');
// sprite.width = 800;
// sprite.height = 600;
filter = new PIXI.HueRotationFilter(sprite.width, sprite.height, sprite.texture);
sprite.filters = [filter];
}
function update() {
filter.iGlobalTime = game.time.totalElapsedSeconds();
}
function render() {
}
examples/wip/mengerTunnelFilter.js
+163
View File
@@ -0,0 +1,163 @@
PIXI.MengerTunnelFilter = function(width, height, texture)
{
PIXI.AbstractFilter.call( this );
this.passes = [this];
var d = new Date();
var dates = [
d.getFullYear(), // the year (four digits)
d.getMonth(), // the month (from 0-11)
d.getDate(), // the day of the month (from 1-31)
d.getHours()*60.0*60 + d.getMinutes()*60 + d.getSeconds()
];
this.uniforms = {
iResolution: { type: 'f3', value: { x: width, y: height, z: 0 }},
iGlobalTime: { type: 'f', value: 1 },
iDate: { type: 'f4', value: dates },
iChannel0: { type: 'sampler2D', value: texture, wrap: 'repeat' }
};
// Shader by fb39ca4 (https://www.shadertoy.com/view/XslGzl)
this.fragmentSrc = [
"precision mediump float;",
"uniform vec3 iResolution;",
"uniform float iGlobalTime;",
"uniform float iChannelTime[4];",
"uniform vec4 iMouse;",
"uniform vec4 iDate;",
"uniform vec3 iChannelResolution[4];",
"uniform sampler2D iChannel0;",
"// add any extra uniforms here",
"const int MAX_RAY_STEPS = 64;",
"const float RAY_STOP_TRESHOLD = 0.0001;",
"const int MENGER_ITERATIONS = 5;",
"float maxcomp(vec2 v) { return max(v.x, v.y); }",
"float sdCross(vec3 p) {",
"p = abs(p);",
"vec3 d = vec3(max(p.x, p.y),",
"max(p.y, p.z),",
"max(p.z, p.x));",
"return min(d.x, min(d.y, d.z)) - (1.0 / 3.0);",
"}",
"float sdCrossRep(vec3 p) {",
"vec3 q = mod(p + 1.0, 2.0) - 1.0;",
"return sdCross(q);",
"}",
"float sdCrossRepScale(vec3 p, float s) {",
"return sdCrossRep(p * s) / s;",
"}",
"float scene(vec3 p) {",
"float scale = 1.0;",
"float dist = 0.0;",
"for (int i = 0; i < MENGER_ITERATIONS; i++) {",
"dist = max(dist, -sdCrossRepScale(p, scale));",
"scale *= 3.0;",
"}",
"return dist;",
"}",
"vec3 hsv2rgb(vec3 c)",
"{",
"vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);",
"vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);",
"return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);",
"}",
"vec4 colorize(float c) {",
"float hue = mix(0.6, 1.15, min(c * 1.2 - 0.05, 1.0));",
"float sat = 1.0 - pow(c, 4.0);",
"float lum = c;",
"vec3 hsv = vec3(hue, sat, lum);",
"vec3 rgb = hsv2rgb(hsv);",
"return vec4(rgb, 1.0);",
"}",
"void main(void)",
"{",
"vec2 screenPos = gl_FragCoord.xy / iResolution.xy * 2.0 - 1.0;",
"vec2 mousePos = iMouse.xy / iResolution.xy * 2.0 - 1.0;",
"vec3 cameraPos = vec3(0.16 * sin(iGlobalTime), 0.16 * cos(iGlobalTime), iGlobalTime);",
"//vec3 cameraPos = vec3(0.0);",
"vec3 cameraDir = vec3(0.0, 0.0, 1.0);",
"vec3 cameraPlaneU = vec3(1.0, 0.0, 0.0);",
"vec3 cameraPlaneV = vec3(0.0, 1.0, 0.0) * (iResolution.y / iResolution.x);",
"vec3 rayPos = cameraPos;",
"vec3 rayDir = cameraDir + screenPos.x * cameraPlaneU + screenPos.y * cameraPlaneV;",
"rayDir = normalize(rayDir);",
"float dist = scene(rayPos);",
"int stepsTaken;",
"for (int i = 0; i < MAX_RAY_STEPS; i++) {",
"if (dist < RAY_STOP_TRESHOLD) {",
"continue;",
"}",
"rayPos += rayDir * dist;",
"dist = scene(rayPos);",
"stepsTaken = i;",
"}",
"vec4 color = colorize(pow(float(stepsTaken) / float(MAX_RAY_STEPS), 0.9));",
"gl_FragColor = color;",
"}"];
}
PIXI.MengerTunnelFilter.prototype = Object.create( PIXI.AbstractFilter.prototype );
PIXI.MengerTunnelFilter.prototype.constructor = PIXI.MengerTunnelFilter;
Object.defineProperty(PIXI.MengerTunnelFilter.prototype, 'iGlobalTime', {
get: function() {
return this.uniforms.iGlobalTime.value;
},
set: function(value) {
this.uniforms.iGlobalTime.value = value;
}
});
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update, render: render });
function preload() {
game.load.image('texture', 'wip/tex15.png');
}
var filter;
var sprite;
function create() {
sprite = game.add.sprite(0, 0, 'texture');
sprite.width = 800;
sprite.height = 600;
filter = new PIXI.MengerTunnelFilter(sprite.width, sprite.height, sprite.texture);
sprite.filters = [filter];
}
function update() {
filter.iGlobalTime = game.time.totalElapsedSeconds();
}
function render() {
}
examples/wip/shadertoy-effect.js
+1200
View File
File diff suppressed because it is too large Load Diff
examples/wip/sineWaveFilter.js
+89
View File
@@ -0,0 +1,89 @@
PIXI.SineWaveFilter = function(width, height, texture)
{
PIXI.AbstractFilter.call( this );
this.passes = [this];
var d = new Date();
var dates = [
d.getFullYear(), // the year (four digits)
d.getMonth(), // the month (from 0-11)
d.getDate(), // the day of the month (from 1-31)
d.getHours()*60.0*60 + d.getMinutes()*60 + d.getSeconds()
];
this.uniforms = {
iResolution: { type: 'f3', value: { x: width, y: height, z: 0 }},
iGlobalTime: { type: 'f', value: 1 },
iDate: { type: 'f4', value: dates },
iChannel0: { type: 'sampler2D', value: texture, wrap: 'repeat' }
};
// Shader by Kali (https://www.shadertoy.com/view/4dfGDM)
this.fragmentSrc = [
"precision mediump float;",
"uniform vec3 iResolution;",
"uniform float iGlobalTime;",
"uniform float iChannelTime[4];",
"uniform vec4 iMouse;",
"uniform vec4 iDate;",
"uniform vec3 iChannelResolution[4];",
"uniform sampler2D iChannel0;",
"// add any extra uniforms here",
"void main(void)",
"{",
"vec2 uv = gl_FragCoord.xy / iResolution.xy;",
"uv.y += (sin((uv.x + (iGlobalTime * 0.5)) * 10.0) * 0.1) +",
"(sin((uv.x + (iGlobalTime * 0.2)) * 32.0) * 0.01);",
"vec4 texColor = texture2D(iChannel0, uv);",
"gl_FragColor = texColor;",
"}"];
}
PIXI.SineWaveFilter.prototype = Object.create( PIXI.AbstractFilter.prototype );
PIXI.SineWaveFilter.prototype.constructor = PIXI.SineWaveFilter;
Object.defineProperty(PIXI.SineWaveFilter.prototype, 'iGlobalTime', {
get: function() {
return this.uniforms.iGlobalTime.value;
},
set: function(value) {
this.uniforms.iGlobalTime.value = value;
}
});
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update, render: render });
function preload() {
// game.load.image('texture', 'wip/64x64.png');
game.load.image('texture', 'wip/tex07.jpg');
}
var filter;
var sprite;
function create() {
sprite = game.add.sprite(0, 0, 'texture');
sprite.width = 800;
sprite.height = 600;
filter = new PIXI.SineWaveFilter(sprite.width, sprite.height, sprite.texture);
sprite.filters = [filter];
}
function update() {
filter.iGlobalTime = game.time.totalElapsedSeconds();
}
function render() {
}
examples/wip/softTunnelFilter.js
+192
View File
@@ -0,0 +1,192 @@
PIXI.SoftTunnelFilter = function(width, height, texture)
{
PIXI.AbstractFilter.call( this );
this.passes = [this];
var d = new Date();
var dates = [
d.getFullYear(), // the year (four digits)
d.getMonth(), // the month (from 0-11)
d.getDate(), // the day of the month (from 1-31)
d.getHours()*60.0*60 + d.getMinutes()*60 + d.getSeconds()
];
this.uniforms = {
iResolution: { type: 'f3', value: { x: width, y: height, z: 0 }},
iGlobalTime: { type: 'f', value: 1 },
iDate: { type: 'f4', value: dates },
iChannel0: { type: 'sampler2D', value: texture, wrap: 'repeat' }
};
// Shader by HeGu (https://www.shadertoy.com/view/XdXGD4)
this.fragmentSrc = [
"precision mediump float;",
"uniform vec3 iResolution;",
"uniform float iGlobalTime;",
"uniform float iChannelTime[4];",
"uniform vec4 iMouse;",
"uniform vec4 iDate;",
"uniform vec3 iChannelResolution[4];",
"uniform sampler2D iChannel0;",
"// add any extra uniforms here",
"uniform sampler2D Texture0;",
"uniform float Time;",
"uniform vec2 Mcoord;",
"uniform vec2 Vcoord;",
"varying vec2 texCoord;",
"vec2 mod289(vec2 x) {",
"return x - floor(x * (1.0 / 289.0)) * 289.0;",
"}",
"vec3 mod289(vec3 x) {",
"return x - floor(x * (1.0 / 289.0)) * 289.0;",
"}",
"vec3 permute(vec3 x) {",
"return mod289(((x*34.0)+1.0)*x);",
"}",
"float snoise(vec2 v)",
"{",
"const vec4 C = vec4(0.211324865405187,0.366025403784439,-0.577350269189626,0.024390243902439);",
"vec2 i = floor(v + dot(v, C.yy) );",
"vec2 x0 = v - i + dot(i, C.xx);",
"vec2 i1;",
"i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);",
"vec4 x12 = x0.xyxy + C.xxzz;",
"x12.xy -= i1;",
"i = mod289(i); // Avoid truncation effects in permutation",
"vec3 p = permute( permute( i.y + vec3(0.0, i1.y, 1.0 ))",
"+ i.x + vec3(0.0, i1.x, 1.0 ));",
"vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy), dot(x12.zw,x12.zw)), 0.0);",
"m = m*m ;",
"m = m*m ;",
"vec3 x = 2.0 * fract(p * C.www) - 1.0;",
"vec3 h = abs(x) - 0.5;",
"vec3 ox = floor(x + 0.5);",
"vec3 a0 = x - ox;",
"m *= 1.79284291400159 - 0.85373472095314 * ( a0*a0 + h*h );",
"vec3 g;",
"g.x = a0.x * x0.x + h.x * x0.y;",
"g.yz = a0.yz * x12.xz + h.yz * x12.yw;",
"return 130.0 * dot(m, g);",
"}",
"float fbm(vec2 p) {",
"float f = 0.0;",
"float w = 0.5;",
"for (int i = 0; i < 5; i ++) {",
"f += w * snoise(p);",
"p *= 2.;",
"w *= 0.5;",
"}",
"return f;",
"}",
"vec4 tunneliter(vec2 texCoord,vec4 incol,float cx,float cy,float limita,float limitb,vec4 coloz,float tadd)",
"{",
"vec2 texc;",
"vec2 tex;",
"vec4 outCol;",
"float disty;",
"texc=(texCoord-vec2(cx,cy));",
"disty=distance(texc,vec2(0.0,0.0));",
"tex.x=(abs(atan(texc.x,texc.y)))/6.2830;",
"tex.y=0.5/disty;",
"tex.y+=(iGlobalTime*0.9)+tadd;",
"float fbmval=abs(fbm(tex));",
"float bex=mix(fbmval,1.0,smoothstep(limitb,limita,disty))*smoothstep(limitb,limita,disty);",
"outCol=mix(incol,coloz*(1.0-fbmval),bex);",
"return outCol;",
"}",
"void main(void)",
"{",
"vec2 uv = gl_FragCoord.xy / iResolution.xy;",
"gl_FragColor = vec4(uv,0.5+0.5*sin(iGlobalTime),1.0);",
"vec4 finalCol;",
"float xa=(sin(iGlobalTime)*0.4)+(sin((iGlobalTime*1.3)+0.5)*0.24);",
"float ya=(cos(iGlobalTime)*0.45)+(cos((iGlobalTime*0.6)-0.7)*0.3);",
"finalCol=vec4(1.0,0.0,1.0,1.0);",
"finalCol=tunneliter(uv,vec4(1.0,1.0,1.0,1.0),0.5+(xa*0.80),0.5+(ya*0.80),0.04,0.01,vec4(0.9,0.9,1.0,1.0),3.1);",
"finalCol=tunneliter(uv,finalCol,0.5+(xa*0.90),0.5+(ya*0.70),0.08,0.03,vec4(0.7,0.7,0.8,1.0),7.2);",
"finalCol=tunneliter(uv,finalCol,0.5+(xa*0.70),0.5+(ya*0.70),0.14,0.05,vec4(0.6,0.6,0.7,1.0),9.3);",
"finalCol=tunneliter(uv,finalCol,0.5+(xa*0.58),0.5+(ya*0.58),0.18,0.10,vec4(0.5,0.5,0.6,1.0),4.4);",
"finalCol=tunneliter(uv,finalCol,0.5+(xa*0.35),0.5+(ya*0.35),0.24,0.15,vec4(0.4,0.4,0.5,1.0),2.5);",
"finalCol=tunneliter(uv,finalCol,0.5+(xa*0.22),0.5+(ya*0.22),0.30,0.20,vec4(0.4,0.4,0.5,1.0),9.6);",
"finalCol=tunneliter(uv,finalCol,0.5+(xa*0.15),0.5+(ya*0.15),0.40,0.25,vec4(0.3,0.3,0.4,1.0),6.7);",
"finalCol=tunneliter(uv,finalCol,0.5+(xa*0.12),0.5+(ya*0.12),0.50,0.35,vec4(0.3,0.3,0.4,1.0),3.8);",
"finalCol=tunneliter(uv,finalCol,0.5+(xa*0.10),0.5+(ya*0.10),0.60,0.40,vec4(0.3,0.3,0.4,1.0),7.9);",
"gl_FragColor = vec4(vec3(finalCol.xyz),1.0);",
"}"];
}
PIXI.SoftTunnelFilter.prototype = Object.create( PIXI.AbstractFilter.prototype );
PIXI.SoftTunnelFilter.prototype.constructor = PIXI.SoftTunnelFilter;
Object.defineProperty(PIXI.SoftTunnelFilter.prototype, 'iGlobalTime', {
get: function() {
return this.uniforms.iGlobalTime.value;
},
set: function(value) {
this.uniforms.iGlobalTime.value = value;
}
});
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update, render: render });
function preload() {
game.load.image('texture', 'wip/tex15.png');
}
var filter;
var sprite;
function create() {
sprite = game.add.sprite(0, 0, 'texture');
sprite.width = 800;
sprite.height = 600;
filter = new PIXI.SoftTunnelFilter(sprite.width, sprite.height, sprite.texture);
sprite.filters = [filter];
}
function update() {
filter.iGlobalTime = game.time.totalElapsedSeconds();
}
function render() {
}
examples/wip/starNurseryFilter.js
+2 -2
View File
@@ -17,7 +17,7 @@ PIXI.StarNurseryFilter = function(width, height, texture)
iResolution: { type: 'f3', value: { x: width, y: height, z: 0 }},
iGlobalTime: { type: 'f', value: 1 },
iDate: { type: 'f4', value: dates },
iChannel0: { type: 'sampler2D', value: texture }
iChannel0: { type: 'sampler2D', value: texture, wrap: 'repeat' }
};
// Shader by Dave Hoskins (https://www.shadertoy.com/view/XsfGzH)
@@ -206,7 +206,7 @@ var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: p
function preload() {
// game.load.image('texture', 'wip/64x64.png');
game.load.image('texture', 'wip/tex16.png');
game.load.image('texture', 'wip/tex12.png');
}
examples/wip/starfieldFilter.js
+3 -3
View File
@@ -17,7 +17,7 @@ PIXI.StarFieldFilter = function(width, height, texture)
iResolution: { type: 'f3', value: { x: width, y: height, z: 0 }},
iGlobalTime: { type: 'f', value: 1 },
iDate: { type: 'f4', value: dates },
iChannel0: { type: 'sampler2D', value: texture }
iChannel0: { type: 'sampler2D', value: texture, wrap: 'repeat' }
};
// Shader by Rebb / TRSI (https://www.shadertoy.com/view/XdX3Wn)
@@ -125,8 +125,8 @@ var sprite;
function create() {
sprite = game.add.sprite(0, 0, 'texture');
sprite.width = 512;
sprite.height = 512;
sprite.width = 800;
sprite.height = 600;
filter = new PIXI.StarFieldFilter(sprite.width, sprite.height, sprite.texture);
examples/wip/tunnelFilter.js
+157
View File
@@ -0,0 +1,157 @@
PIXI.TunnelFilter = function(width, height, texture)
{
PIXI.AbstractFilter.call( this );
this.passes = [this];
var d = new Date();
var dates = [
d.getFullYear(), // the year (four digits)
d.getMonth(), // the month (from 0-11)
d.getDate(), // the day of the month (from 1-31)
d.getHours()*60.0*60 + d.getMinutes()*60 + d.getSeconds()
];
this.uniforms = {
iResolution: { type: 'f3', value: { x: width, y: height, z: 0 }},
iGlobalTime: { type: 'f', value: 1 },
iDate: { type: 'f4', value: dates },
iChannel0: { type: 'sampler2D', value: texture, wrap: 'nearest-repeat' }
};
// Shader by reiska (https://www.shadertoy.com/view/4sX3z7)
this.fragmentSrc = [
"precision mediump float;",
"uniform vec3 iResolution;",
"uniform float iGlobalTime;",
"uniform float iChannelTime[4];",
"uniform vec4 iMouse;",
"uniform vec4 iDate;",
"uniform vec3 iChannelResolution[4];",
"uniform sampler2D iChannel0;",
"// add any extra uniforms here",
"void main(void)",
"{",
"float cameraPinch = 1.0; // values between 0 - 2, this will modify (pinch) the view",
"float cameraZPinch = 1.0; //",
"float cameraZFactor = 1.0; // 0-1",
"float zoomFactor = 1.0; // large values will create a kaleidoscopic effect!",
"float texCoordUScale = 0.125;",
"float texCoordVScale = 1.0;",
"float texCoordUMoveSpeed = 0.20;",
"float texCoordVMoveSpeed = -0.125;",
"float cameraRotationSpeed = 0.5; // 0.0 to switch off rotation (look straight ahead)",
"float tunnelPinch = 2.0; // 1.0 = round tunnel, change the value to modify the shape",
"float spikeCount = 5.0;",
"float spikeFactor = sin(iGlobalTime) * 0.1; // 0.0 to switch off spikes",
"vec3 fogColor = vec3(0.0, 0.0, 0.0);",
"float fogPower = 10.0;",
"vec2 coord = 2.0 * ((gl_FragCoord.xy / iResolution.xy) - vec2(0.5, 0.5));",
"float aspectRatio = iResolution.x / iResolution.y;",
"coord.x *= aspectRatio;",
"coord *= zoomFactor;",
"coord = vec2(sign(coord.x) * pow(abs(coord.x), cameraPinch), sign(coord.y) * pow(abs(coord.y), cameraPinch));",
"// camera angles",
"float camAng = iGlobalTime * cameraRotationSpeed;",
"// camera rotation vectors",
"vec3 cx = vec3(cos(camAng), 0.0, -sin(camAng));",
"vec3 cy = vec3(0.0, 1.0, 0.0);",
"vec3 cz = vec3(sin(camAng), 0.0, cos(camAng));",
"mat3 cameraRot =",
"mat3(",
"cx.x, cx.y, cx.z,",
"cy.x, cy.y, cy.z,",
"cz.x, cz.y, cz.z);",
"vec3 cameraDir = normalize(vec3(sin(coord.x), sin(coord.y), cos(coord.x) * cos(coord.y)));",
"cameraDir = cameraRot * cameraDir;",
"float angle = atan(cameraDir.x, cameraDir.y);",
"cameraDir.z *= 1.0 + sin(angle * spikeCount) * spikeFactor;",
"cameraDir.z = cameraZFactor * sign(cameraDir.z) * pow(abs(cameraDir.z), cameraZPinch);",
"vec3 cameraOrigin = vec3(0.0, 0.0, 0.0);",
"float l = sqrt(pow(cameraDir.x * cameraDir.x, tunnelPinch) + pow(cameraDir.y * cameraDir.y, tunnelPinch));",
"float d = 1.0 / l;",
"vec3 hitPos = cameraOrigin + cameraDir * d;",
"vec2 uv = vec2(hitPos.z, angle / 3.14159);",
"uv.x = uv.x * texCoordUScale + iGlobalTime * texCoordUMoveSpeed;",
"uv.y = uv.y * texCoordVScale + iGlobalTime * texCoordVMoveSpeed;",
"vec3 color = texture2D(iChannel0, uv).rgb;",
"float alpha = 1.0 - pow(min(1.0, abs(cameraDir.z)), fogPower);",
"color = fogColor * (1.0 - alpha) + color * alpha;",
"gl_FragColor = vec4(color, 1.0);",
"}"];
}
PIXI.TunnelFilter.prototype = Object.create( PIXI.AbstractFilter.prototype );
PIXI.TunnelFilter.prototype.constructor = PIXI.TunnelFilter;
Object.defineProperty(PIXI.TunnelFilter.prototype, 'iGlobalTime', {
get: function() {
return this.uniforms.iGlobalTime.value;
},
set: function(value) {
this.uniforms.iGlobalTime.value = value;
}
});
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update, render: render });
function preload() {
game.load.image('texture', 'wip/tex15.png');
}
var filter;
var sprite;
function create() {
sprite = game.add.sprite(0, 0, 'texture');
sprite.width = 800;
sprite.height = 600;
filter = new PIXI.TunnelFilter(sprite.width, sprite.height, sprite.texture);
sprite.filters = [filter];
}
function update() {
filter.iGlobalTime = game.time.totalElapsedSeconds();
}
function render() {
}
examples/wip/vortexFilter.js
+111
View File
@@ -0,0 +1,111 @@
PIXI.VortexFilter = function(width, height, texture)
{
PIXI.AbstractFilter.call( this );
this.passes = [this];
var d = new Date();
var dates = [
d.getFullYear(), // the year (four digits)
d.getMonth(), // the month (from 0-11)
d.getDate(), // the day of the month (from 1-31)
d.getHours()*60.0*60 + d.getMinutes()*60 + d.getSeconds()
];
this.uniforms = {
iResolution: { type: 'f3', value: { x: width, y: height, z: 0 }},
iGlobalTime: { type: 'f', value: 1 },
iDate: { type: 'f4', value: dates },
iChannel0: { type: 'sampler2D', value: texture, wrap: 'repeat' }
};
// Shader by GhettoWolf (https://www.shadertoy.com/view/Xdl3WH)
this.fragmentSrc = [
"precision mediump float;",
"uniform vec3 iResolution;",
"uniform float iGlobalTime;",
"uniform float iChannelTime[4];",
"uniform vec4 iMouse;",
"uniform vec4 iDate;",
"uniform vec3 iChannelResolution[4];",
"uniform sampler2D iChannel0;",
"// add any extra uniforms here",
"#ifdef GL_ES",
"precision highp float;",
"#endif",
"#define PI 3.1416",
"void main(void)",
"{",
"//map the xy pixel co-ordinates to be between -1.0 to +1.0 on x and y axes",
"//and alter the x value according to the aspect ratio so it isn't 'stretched'",
"vec2 p = (2.0 * gl_FragCoord.xy / iResolution.xy - 1.0)",
"* vec2(iResolution.x / iResolution.y, 1.0);",
"//now, this is the usual part that uses the formula for texture mapping a ray-",
"//traced cylinder using the vector p that describes the position of the pixel",
"//from the centre.",
"vec2 uv = vec2(atan(p.y, p.x) * 1.0/PI, 1.0 / sqrt(dot(p, p))) * vec2(2.0, 1.0);",
"//now this just 'warps' the texture read by altering the u coordinate depending on",
"//the val of the v coordinate and the current time",
"uv.x += sin(2.0 * uv.y + iGlobalTime * 0.5);",
"vec3 c = texture2D(iChannel0, uv).xyz",
"//this divison makes the color value 'darker' into the distance, otherwise",
"//everything will be a uniform brightness and no sense of depth will be present.",
"/ (uv.y * 0.5 + 1.0);",
"gl_FragColor = vec4(c, 1.0);",
"}"];
}
PIXI.VortexFilter.prototype = Object.create( PIXI.AbstractFilter.prototype );
PIXI.VortexFilter.prototype.constructor = PIXI.VortexFilter;
Object.defineProperty(PIXI.VortexFilter.prototype, 'iGlobalTime', {
get: function() {
return this.uniforms.iGlobalTime.value;
},
set: function(value) {
this.uniforms.iGlobalTime.value = value;
}
});
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update, render: render });
function preload() {
game.load.image('texture', 'wip/tex00.jpg');
}
var filter;
var sprite;
function create() {
sprite = game.add.sprite(0, 0, 'texture');
sprite.width = 800;
sprite.height = 600;
filter = new PIXI.VortexFilter(sprite.width, sprite.height, sprite.texture);
sprite.filters = [filter];
}
function update() {
filter.iGlobalTime = game.time.totalElapsedSeconds();
}
function render() {
}
src/pixi/renderers/webgl/PixiShader.js
+109 -11
View File
@@ -107,22 +107,18 @@ PIXI.PixiShader.prototype.syncUniforms = function()
}
if(type == "f2")
{
// console.log(this.program[key])
gl.uniform2f(this.uniforms[key].uniformLocation, this.uniforms[key].value.x, this.uniforms[key].value.y);
}
else if(type == "f3")
{
// console.log(this.uniforms[key].value)
gl.uniform3f(this.uniforms[key].uniformLocation, this.uniforms[key].value.x, this.uniforms[key].value.y, this.uniforms[key].value.z);
}
else if(type == "f3v")
{
// console.log(this.uniforms[key].value)
gl.uniform3fv(this.uniforms[key].uniformLocation, this.uniforms[key].value);
}
else if(type == "f4")
{
// console.log(this.uniforms[key].value)
gl.uniform4fv(this.uniforms[key].uniformLocation, this.uniforms[key].value);
}
else if(type == "mat4")
@@ -131,13 +127,50 @@ PIXI.PixiShader.prototype.syncUniforms = function()
}
else if(type == "sampler2D")
{
// first texture...
var texture = this.uniforms[key].value;
gl.activeTexture(gl.TEXTURE1);
gl.bindTexture(gl.TEXTURE_2D, texture.baseTexture._glTexture);
gl.uniform1i(this.uniforms[key].uniformLocation, 1);
var texture = this.uniforms[key].value.baseTexture._glTexture;
var image = this.uniforms[key].value.baseTexture.source;
var format = gl.RGBA;
if (this.uniforms[key].format && this.uniforms[key].format == 'luminance')
{
format = gl.LUMINANCE;
}
gl.activeTexture(gl.TEXTURE1);
if (this.uniforms[key].wrap)
{
if (this.uniforms[key].wrap == 'no-repeat' || this.uniforms[key].wrap === false)
{
this.createGLTextureLinear(gl, image, texture);
}
else if (this.uniforms[key].wrap == 'repeat' || this.uniforms[key].wrap === true)
{
this.createGLTexture(gl, image, format, texture);
}
else if (this.uniforms[key].wrap == 'nearest-repeat')
{
this.createGLTextureNearestRepeat(gl, image, texture);
}
else if (this.uniforms[key].wrap == 'nearest')
{
this.createGLTextureNearest(gl, image, texture);
}
else if (this.uniforms[key].wrap == 'audio')
{
this.createAudioTexture(gl, texture);
}
else if (this.uniforms[key].wrap == 'keyboard')
{
this.createKeyboardTexture(gl, texture);
}
}
else
{
this.createGLTextureLinear(gl, image, texture);
}
gl.uniform1i(this.uniforms[key].uniformLocation, 1);
// activate texture..
// gl.uniformMatrix4fv(this.program[key], false, this.uniforms[key].value);
@@ -145,6 +178,71 @@ PIXI.PixiShader.prototype.syncUniforms = function()
}
}
};
PIXI.PixiShader.prototype.createGLTexture = function(gl, image, format, texture)
{
gl.bindTexture( gl.TEXTURE_2D, texture);
gl.pixelStorei( gl.UNPACK_FLIP_Y_WEBGL, false);
gl.texImage2D( gl.TEXTURE_2D, 0, format, gl.RGBA, gl.UNSIGNED_BYTE, image);
gl.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR);
gl.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
gl.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);
gl.generateMipmap(gl.TEXTURE_2D);
}
PIXI.PixiShader.prototype.createGLTextureLinear = function(gl, image, texture)
{
gl.bindTexture( gl.TEXTURE_2D, texture);
gl.pixelStorei( gl.UNPACK_FLIP_Y_WEBGL, false);
gl.texImage2D( gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
}
PIXI.PixiShader.prototype.createGLTextureNearestRepeat = function(gl, image, texture)
{
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);
}
PIXI.PixiShader.prototype.createGLTextureNearest = function(gl, image, texture)
{
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
}
PIXI.PixiShader.prototype.createAudioTexture = function(gl, texture)
{
gl.bindTexture( gl.TEXTURE_2D, texture );
gl.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR );
gl.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR );
gl.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE );
gl.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE) ;
gl.texImage2D( gl.TEXTURE_2D, 0, gl.LUMINANCE, 512, 2, 0, gl.LUMINANCE, gl.UNSIGNED_BYTE, null);
}
PIXI.PixiShader.prototype.createKeyboardTexture = function(gl, texture)
{
gl.bindTexture( gl.TEXTURE_2D, texture );
gl.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST );
gl.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST );
gl.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE );
gl.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE) ;
gl.texImage2D( gl.TEXTURE_2D, 0, gl.LUMINANCE, 256, 2, 0, gl.LUMINANCE, gl.UNSIGNED_BYTE, null);
}
PIXI.PixiShader.defaultVertexSrc = [