Created
February 21, 2019 15:01
-
-
Save getkey/f2132f6f1f4c53cebd9d2efc5cd05402 to your computer and use it in GitHub Desktop.
Gradient shader
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
precision mediump float; | |
varying vec2 vTextureCoord; | |
varying vec2 aVertexPosition; | |
uniform sampler2D uSampler; | |
uniform vec4 startColor; | |
uniform vec4 endColor; | |
void main() { | |
vec4 mixCol = mix(endColor, startColor, aVertexPosition.x); | |
vec4 fg = texture2D(uSampler, vTextureCoord); | |
gl_FragColor = mix(fg, mixCol, 0.1); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
varying vec2 aVertexPosition; | |
uniform mat3 projectionMatrix; | |
varying vec2 vTextureCoord; | |
uniform vec4 inputSize; | |
uniform vec4 outputFrame; | |
vec4 filterVertexPosition( void ) | |
{ | |
vec2 position = aVertexPosition * max(outputFrame.zw, vec2(0.)) + outputFrame.xy; | |
return vec4((projectionMatrix * vec3(position, 1.0)).xy, 0.0, 1.0); | |
} | |
vec2 filterTextureCoord( void ) | |
{ | |
return aVertexPosition * (outputFrame.zw * inputSize.zw); | |
} | |
void main(void) | |
{ | |
gl_Position = filterVertexPosition(); | |
vTextureCoord = filterTextureCoord(); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { Filter, utils } from 'pixi.js'; | |
import vertex from 'shaders/gradient/gradient_vert.glsl'; | |
import fragment from 'shaders/gradient/gradient.glsl'; | |
export default class GradientFilter extends Filter { | |
constructor(startColor = 0x00ff00, endColor = 0xff0000) { | |
super(vertex, fragment); | |
// this.startColor = startColor; | |
// this.endColor = endColor; | |
this.uniforms.startColor = Float32Array.from([0x00, 0xff, 0x00, 0.5]); | |
this.uniforms.endColor = Float32Array.from([0xff, 0x0, 0x00, 0.5]); | |
} | |
// set startColor(startColor) { | |
// const startColorVec = utils.hex2rgb(startColor); | |
// startColorVec.push(0.5); // transparency | |
// this.uniforms.startColor = startColorVec; | |
// } | |
// set endColor(endColor) { | |
// const endColorVec = utils.hex2rgb(endColor); | |
// endColorVec.push(0.5); // transparency | |
// this.uniforms.endColor = endColorVec; | |
// } | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment