Mesh gradient shader

by Hackerham

HTML

<script src="https://pixijs.download/dev/pixi.js"></script>

JavaScript

const app = new PIXI.Application();
document.body.appendChild(app.view);
document.body.style['padding'] = 0;
document.body.style['overflow'] = 'hidden';

const quadPos = new Float32Array([-100, -100, 100, -100, 100, 100, -100, 100]);
const quadUvs = new Float32Array([0, 0, 1, 0, 1, 1, 0, 1]);

const quadGeometry = new PIXI.Geometry()
    .addAttribute('aVertexPosition', quadPos, 2)
    .addAttribute('aTextureCoord', quadUvs, 2)
    .addIndex([0, 1, 2, 0, 2, 3]);

const vertexSrc = `
attribute vec2 aVertexPosition;
attribute vec2 aTextureCoord;

uniform mat3 projectionMatrix;
uniform mat3 translationMatrix;

varying vec2 vTextureCoord;

void main(void){
   gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);
   vTextureCoord = aTextureCoord;
}
`;

const fragmentSrc = `precision highp float;
varying vec2 vTextureCoord;
uniform sampler2D uSampler;
uniform vec3 colors[4];
uniform float steps[4];
uniform float centerX;
uniform float centerY;

void main() {
	vec2 gradXY = abs(vTextureCoord - vec2(centerX, centerY));
  float dist = pow(max(gradXY.x, gradXY.y) * 2.0, 2.0);
  float start = steps[0];
  vec4 color;
  for (int i = 1; i < 4; i++) {
    float end = steps[i]; 
    if (dist >= start && dist <= end) {
      color = vec4(mix(colors[i - 1], colors[i], (dist-start) / (end-start)), 1.);
      break;
    }
    start = end;
  }
  gl_FragColor = texture2D(uSampler, vTextureCoord) * color;
}
`;

const uniforms = { 
	centerX: 0.5,
  centerY: 0.5,
  colors: [1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0],
  steps: [0, 0.2921, 0.3452, 1],
};

const program = new PIXI.Program(vertexSrc, fragmentSrc);
const tex = PIXI.Texture.from('https://static4.depositphotos.com/1006994/298/v/450/depositphotos_2983099-stock-illustration-grunge-design.jpg');

const shader = new PIXI.MeshMaterial(tex, { program, uniforms });
const mesh = new PIXI.Mesh(quadGeometry, shader);
mesh.x = app.screen.width / 2;
mesh.y = app.screen.height / 2;
mesh.rotation =...