flowen

Members
  • Content Count

    5
  • Joined

  • Last visited

Everything posted by flowen

  1. Hi, this is my first time using shaders and the new filters in pixi v4, so please bare with me 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?
  2. I see thanks! @ivan.popelyshev Ivan! Thanks so much for fixing the problem To be honest it does look a little wonky.. would've never thought (and didn't read anywhere) that I would need an filterArea. I tried mixing your code with my 'setup' code, but that gave me another error ( Uncaught TypeError: Cannot read property 'value' of undefined ) which I guess is some uniform that cannot be read.. Anyways, enough for today! Thanks again for answering, even though you're tired. You da man!
  3. When I simply display a color for the shader, it's working. But once I try mixing in uniforms, I only get a black canvas. There's surely something simple I'm not seeing so I just keep on trying updated the code in topic
  4. @Jinz Oops! Basically I tried 2 different ways, loading by html string or loading by file. Both didn't work but accidentally mixed it up in this thread. Fixed it now.
  5. @Jinz Thanks for your reply! My thought is that Pixi injects a canvas element within the .button. Rendering sprites was not a problem at all, but now with a shader I have no clue what's going (wr)on(g). Even without uniforms it won't display anything so I think i've been setting things up incorrectly or perhaps there's some limitation within pixi? Later on I want to automate it and inject it in every .button and thus create some crazy button effects.. If someone has a different suggestion to do this, would appreciate it!