Skip to content

Instantly share code, notes, and snippets.

/pixijs-shaders.markdown

Created December 3, 2016 15:07
Show Gist options
  • Save anonymous/93852d65ae26fbe313260b23d268f57b to your computer and use it in GitHub Desktop.
Save anonymous/93852d65ae26fbe313260b23d268f57b to your computer and use it in GitHub Desktop.
Download ZIP
PixiJS Shaders
Raw
pixijs-shaders.markdown
Raw
script.js
var width = window.innerWidth;
var height = window.innerHeight;
// create an new instance of a pixi stage
var stage = new PIXI.Stage(0x0, true);
// create a renderer instance
var renderer = PIXI.autoDetectRenderer(width, height);
// add the renderer view element to the DOM
document.body.appendChild(renderer.view);
// smoke shader
var uniforms = {};
uniforms.resolution = {
type: '2f',
value: {
x: width,
y: height
}
};
uniforms.alpha = {
type: '1f',
value: 1.0
};
uniforms.shift = {
type: '1f',
value: 1.6
};
uniforms.time = {
type: '1f',
value: 0
};
uniforms.speed = {
type: '2f',
value: {
x: 0.7,
y: 0.4
}
};
var fragmentSrc = [
"precision mediump float;",
"uniform vec2 resolution;",
"uniform float time;",
"uniform float alpha;",
"uniform vec2 speed;",
"uniform float shift;",
"float rand(vec2 n) {",
"return fract(cos(dot(n, vec2(12.9898, 4.1414))) * 43758.5453);",
"}",
"float noise(vec2 n) {",
"const vec2 d = vec2(0.0, 1.0);",
"vec2 b = floor(n), f = smoothstep(vec2(0.0), vec2(1.0), fract(n));",
"return mix(mix(rand(b), rand(b + d.yx), f.x), mix(rand(b + d.xy), rand(b + d.yy), f.x), f.y);",
"}",
"float fbm(vec2 n) {",
"float total = 0.0, amplitude = 1.0;",
"for (int i = 0; i < 4; i++) {",
"total += noise(n) * amplitude;",
"n += n;",
"amplitude *= 0.5;",
"}",
"return total;",
"}",
"void main() {",
"const vec3 c1 = vec3(126.0/255.0, 0.0/255.0, 97.0/255.0);",
"const vec3 c2 = vec3(173.0/255.0, 0.0/255.0, 161.4/255.0);",
"const vec3 c3 = vec3(0.2, 0.0, 0.0);",
"const vec3 c4 = vec3(164.0/255.0, 1.0/255.0, 214.4/255.0);",
"const vec3 c5 = vec3(0.1);",
"const vec3 c6 = vec3(0.9);",
"vec2 p = gl_FragCoord.xy * 8.0 / resolution.xx;",
"float q = fbm(p - time * 0.1);",
"vec2 r = vec2(fbm(p + q + time * speed.x - p.x - p.y), fbm(p + q - time * speed.y));",
"vec3 c = mix(c1, c2, fbm(p + r)) + mix(c3, c4, r.x) - mix(c5, c6, r.y);",
"float grad = gl_FragCoord.y / resolution.y;",
"gl_FragColor = vec4(c * cos(shift * gl_FragCoord.y / resolution.y), 1.0);",
"gl_FragColor.xyz *= 1.0-grad;",
"}"
];
var coolFilter = new PIXI.AbstractFilter(fragmentSrc, uniforms);
var bg = PIXI.Sprite.fromImage("http://www.goodboydigital.com/pixijs/examples/25/test_BG.jpg");
bg.width = width;
bg.height = height;
bg.shader = coolFilter;
stage.addChild(bg);
var logo = PIXI.Sprite.fromImage("http://www.goodboydigital.com/pixijs/examples/25/pixiJsV2.png");
logo.x = width / 2;
logo.y = height / 2;
logo.anchor.set(0.5);
logo.blendMode = PIXI.blendModes.ADD;
stage.addChild(logo);
var count = 0;
function animate() {
count += 0.01;
coolFilter.uniforms.time.value = count;
coolFilter.syncUniforms();
renderer.render(stage);
requestAnimFrame(animate);
}
requestAnimFrame(animate);
Raw
scripts
<script src="http://www.goodboydigital.com/pixijs/examples/25/pixi.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.13.2/plugins/ColorPropsPlugin.min.js"></script>
Raw
style.css
body {
overflow: hidden;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment