Hi, this is my first time using shaders and the new filters in pixi v4, so please bare with me ![:ph34r:]( ":ph34r:")
First of all I'm a bit confused by the term (custom) filter.. Is that the same as the user of a shader? I assume it is.
Second I tried using this example. I got it to work in pixi 3.x but somehow I can't figure out what i'm doing wrong in v4. no error messages, just a black canvas.
My goal is to create custom button hovers with PIXI, using shaders, etc. I tried 2 different ways but... alas, same black canvas
HTML:
<a href="#" class="btn btn-one">
<canvas></canvas>
<span class="title">button effect one</span>
</a>
shader.frag:
precision mediump float;
uniform vec2 mouse;
uniform vec2 resolution;
uniform float time;
void main() {
gl_FragColor = vec4( sin(time), mouse.x/resolution.x, mouse.y/resolution.y, 1.0);
}
JS:
var btnOne = document.querySelector('.btn-one');
var width = btnOne.clientWidth;
var height = btnOne.clientHeight;
var app = new PIXI.Application({
width: width,
height: height,
view: btnOne.querySelector('canvas')
});
btnOne.append(app.view);
// create rect to fill the button and apply shaders to
const rect = new PIXI.Graphics()
.beginFill(0x00ff00)
.drawRect(0, 0, width, height);
app.stage.addChild(rect);
// Stop application wait for load to finish
app.stop();
PIXI.loader.add('shader', 'shader.frag')
.load(onLoaded);
var simpleShader;
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 onLoaded (loader,res) {
// Create the new filter, arguments: (vertexShader, fragmentShader, uniforms)
simpleShader = new PIXI.Filter(null, res.shader.data, uniforms);
rect.filters = [simpleShader];
app.start();
// bind mouse to shader effects
btnOne.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
simpleShader.uniforms.mouse.value = mousePos;
}
// apply the filter
rect.filters = [simpleShader];
// Animate the filter
app.ticker.add(function(delta) {
simpleShader.uniforms.time.value += 0.1
});
}
I read the post about creating filters in v4, but to a beginner it's just confusing as I don't understand a lot of the terminology used. Anyone can (hint how to) fix this so I can continue my explorations programming shaders? ![:)]( ":)")
