Sword Shader

by roomyrooms

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.2.2/pixi.min.js"></script>
<script type="x-data-url" id="sword-url">
  data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACsAAAArCAYAAADhXXHAAAAAAXNSR0IArs4c6QAAA35JREFUWAnNmE9IFFEcx38bq5dAc7cSiQxEiy4KgUWpEVFWEBvsRYQsCupQ1Kk/ZghbUWHHoiQIsTYrD+YhqD1URLESCELdopA6dZAihQhTeO33bd/xMc7uooz75sGb93tv3s77zPf3fr+dmZAEuMRicUW8dPoNzeC1AH2RGlXTf5Su0WhEhYOHOUeUGn4kqFU1G/TgsrlTwbGg4tDgkNxo/hYcKC+SWGS5msm4vr9utfq+uVoBHNVrbtHG4pvKFaq5IEGnk3ENaxXSBIT9+1O3AwxQQlJR80aKZhMScMkdUQfQBIbrAQz3W1MUQABBBezI+VoHGP2DW8p0hY0K4KKp6F6IqhIayqIC7GxrRM3+VColZdouBLrkqevp2GSIN/Bk30qJ3z0hH0uVJE7d1sMvI+Wy50FM253HqqS2LJxT2SWHhaKD6V+SfHxaA5VWX9Zt/ZoS3b5qDcu5h8+1faj3q3wYvSC59uySw4KirWmFdLTf1EA4ADTeeVy36CdunZTh91PyZWo21NB4XSpmpjA8rzgumnfG5wEq3HUgquG4DbBM/d8sxqWxSQ3s89KFL2cGFoMLkc/AMjMEAo5ZIt+eLbzqImcQkCmLoMkjlTqNMSug5RzciDVYLM48ihagBAKUaQPYOijzKJUlEFoCmnY+R/qeDeB+pCmmqIm965w86gbZWFniBJRpu+f51mcg4YKwEShQrP/encwj/g/19vUz/Y+Fcbrdt8UXeiEAAoLQsL1A4WrWha7h23xAQknWXKC+LbjYC1FVgOZTdLHX9+13JqjXHrXuct5pIVAEE2A531oLUEa8l6LYDqzWgAHJCphcoHQ/Wyuqmq73CiaMWVPSrQhgoWY+Rd2/sdI3VXXn0UAoyv2JlgHlBi121Ht+mAMg35noyoGBXjnc0Sbv0iNysfua9DRX8JS91u1yqGkq2tK0VSvNaLcWVG5QPDHlArUh57xtgOdQuBylpWmbjI8Pyvad+3W/p3lC8LqMt1A9UOSD8/DNfQrQmpq1Dgb26dUrXU7fpuHAAoJP91AU5X4yq2o2oCak4Wi7Hrd10LBeqprqwv0AxQcIW1vAEQiw5j8TggpRz8gPROLP0IYBemb3KgecwZTq26XHoKb0BkBRwIKoMfFZRhN1sj5jp/qy+1JDZvrW3Q7A/yWEpI4vdyxBhCSbhmUHbZCUNLlg/wMzJ2jPirS6SwAAAABJRU5ErkJggg==
</script>

<script type="x-data-url" id="tree-url">
 ...

JavaScript

var treeUrl = document.getElementById('tree-url').textContent;
var swordUrl = document.getElementById('sword-url').textContent;

var fragmentShader = `
precision mediump float;

varying vec2 vTextureCoord;

uniform sampler2D uSampler;
uniform float uPolar;
uniform float uGlowWidth;
uniform vec3 uGlowColor;
uniform float uStartTime;
uniform float time;

vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
vec2 mod289(vec2 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 = vec2(0.0);
  i1 = (x0.x > x0.y)? vec2(1.0, 0.0):vec2(0.0, 1.0);
  vec2 x1 = x0.xy + C.xx - i1;
  vec2 x2 = x0.xy + C.zz;

  i = mod289(i);
  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(x1,x1),dot(x2,x2)), 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 = vec3(0.0);
  g.x  = a0.x  * x0.x  + h.x  * x0.y;
  g.yz = a0.yz * vec2(x1.x,x2.x) + h.yz * vec2(x1.y,x2.y);
  return 130.0 * dot(m, g);
}

void main() {
  vec4 ogcol = texture2D(uSampler, vTextureCoord);
  float nt = time - uStartTime;
  float stepval = uPolar*min(fract(nt*0.0004)*5.-1., 0.);
  float noiseval = snoise(vTextureCoord*5.)*.5+.5;
  float step1 = step(stepval,noiseval);
  float step2 = step(stepval+uGlowWidth,noiseval);
  float stepdiff = step1-step2;
  vec3 disborder = step(0.5,ogcol.a) * stepdiff * uGlowColor;
  vec4 newcol = vec4(ogcol.rgb+disborder, ogcol.a)*step1;
  gl_FragColor = newcol;
}`

function defaultValue(inputValue, defaultValue) {
    inputValue = typeof inputValue !== 'undefined' ? inputValue :...