Pixijs.v3 Rendering Texture

index.html

<script id="shader" type="shader">
  precision mediump float;
  
  varying vec2 vTextureCoord;//The coordinates of the current pixel
  uniform sampler2D uSampler;//The image data

  void main(void) {
    gl_FragColor = texture2D(uSampler, vTextureCoord);
    gl_FragColor.r = 0.0;
  }
</script>

pixijs-v3-rendering-texture.markdown

Pixijs.v3 Rendering Texture

A Pen by Omar Shehata on CodePen.

License.

script.js

var width = window.innerWidth;//Get the screen width and height
var height = window.innerHeight;
var renderer = new PIXI.autoDetectRenderer(width, height);//Chooses either WebGL if supported or falls back to Canvas rendering
document.body.appendChild(renderer.view);//Add the render view object into the page

var stage = new PIXI.Container();//The stage is the root container that will hold everything in our scene

//Load an image and create an object
var logo = PIXI.Sprite.fromImage("http://www.goodboydigital.com/pixijs/pixi_v3_github-pad.png");
logo.x = width / 2;//Set it at the center of the screen
logo.y = height / 2;
logo.anchor.set(0.5);//Make sure the center point of the image is at its center, instead of the default top left
stage.addChild(logo)//Add it to the screen

//Create a uniforms object to send to the shader
var uniforms = {}
uniforms.mouse = {
  type:'v2',
  value: {x:0,y:0}
}
uniforms.time = {
  type:"f",
  value:0
}
uniforms.resolution = {
  type:"v2",
  value:{x:width,y:height}
}

function animate() {
    // start the timer for the next animation loop
    requestAnimationFrame(animate);
    // this is the main render call that makes pixi draw your container and its children.
    renderer.render(stage);
  
   uniforms.time.value += 0.1
}
animate()

//Get shader code as a string
var shaderCode = document.getElementById("shader").innerHTML
//Create our Pixi filter using our custom shader code
var simpleShader = new PIXI.AbstractFilter('',shaderCode,uniforms);
//Apply it to our object
logo.filters = [simpleShader]

document.onmousemove = function(evt){
  //Get the mouse position
  mousePos = {x:evt.clientX,y:evt.clientY}
  //Assigning a new value lets Pixi know to update the uniform in the shader
  // But doing something like uniforms.mouse.x = 0, won't update in this current version of Pixi
  uniforms.mouse.value = mousePos;
}

scripts

<script src="https://cdn.jsdelivr.net/pixi.js/3.0.7/pixi.js"></script>

style.css

body {
  margin: 0;
  overflow: hidden;
}