Test Vertex | Pixijs

Change class name on click in jQuery

by Noturnoo

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.1.3/pixi.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.0/gsap.min.js"></script>

<main id="main">
  <canvas id="view"></canvas>
</main>
<script id="fragShader" type="x-shader/x-vertex"></script>
<script id="vertShader" type="x-shader/x-vertex">
  attribute vec2 aVertexPosition;
  uniform float time;
  uniform float waveLength;
  uniform mat3 projectionMatrix;
  
  uniform mat3 translationMatrix;
  varying vec2 vTextureCoord;
  
  uniform vec4 inputSize;
  uniform vec4 outputFrame;
  
  
  void main(void)
  {
      vec2 position = aVertexPosition * max(outputFrame.zw, vec2(0.)) + outputFrame.xy;
      lowp float vWave = sin(time*0.1 + (position.y) * waveLength);
      //vWave = clamp(vWave, 0.6, 1.);
      gl_Position = vec4((projectionMatrix * vec3(position, 1.0)).xy, 0.0 ,  1.0);
      vTextureCoord = aVertexPosition * (outputFrame.zw * inputSize.zw);
      vec4 color = vec4((projectionMatrix * vec3(position.x, position.y, 1.0)).xy, 0.0 , 1.0);
      gl_Position =  vec4( color.x, color.y, sin(time*0.4 + (position.y) * 1.0), vWave);
  }
</script>

CSS

main {
  position: fixed;
  overflow: hidden;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
  background: #000;
}

#view {
  position: absolute;
  top: 0;
  left: 0;
}

JavaScript

console.clear();
let h = window.innerWidth



const main = document.querySelector("#main");
const view = document.querySelector("#view");

const app = new PIXI.Application({
  width: main.clientWidth,
  height: main.clientHeight,
  antialias: true,
  view
});

const screen = app.screen;
const bgSize = new PIXI.Rectangle(0, 0, 1920, 1080);



const bgContainer = new PIXI.Container();
//const bg = PIXI.Sprite.fromImage('https://raw.githubusercontent.com/Efetivos/gallery/master/avulsos/Web%201366-test%20%E2%80%93%201.png');
const bg = PIXI.Sprite.from('https://raw.githubusercontent.com/Efetivos/gallery/master/avulsos/small_01.jpg');
bg.anchor.set(0.5);




bgContainer.addChild(bg);

let resized = true;
let updatePosition = true;

app.stage.interactive = true;
app.stage.filterArea = screen;
app.stage.addChild(bgContainer);


app.ticker.add(onTick);
window.addEventListener("resize", () => resized = true);;




//
// FILTER
// ===========================================================================
const vShader = vertShader.innerText;
const fShader = fragShader.innerText;
const uniforms = {
  delta: 0,
  waveLength: 3,
  time: 0.0
};

//var shaderFrag = document.querySelector("#shaderFrag").textContent;
var filter = new PIXI.Filter(vShader, fShader, uniforms);
filter.padding = 200;
bgContainer.filters = [filter];

//TweenMax.fromTo(bg.position, 10, {y: -800}, {y: 1000, ease: Power3.easeInOut})


//
// ON TICK
// ===========================================================================
function onTick(delta) {
  
  filter.uniforms.time += 0.5;
  if (resized) {
    onResize();
    updatePosition = true;
    resized = false;
  }
  
}

//
// ON RESIZE
// ===========================================================================
function onResize() {
    
  const width = main.clientWidth;
  const height = main.clientHeight;  
  
  const scaleX = width / bgSize.width;
  const scaleY = height / bgSize.height;
  const scale = Math.max(scaleX, scaleY);
      
 ...