jeena/chuck.js
1
0
Fork 0
mirror of https://github.com/logsol/chuck.js.git synced 2026-05-11 10:37:34 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

first draft of opengl filter

Browse source
This commit is contained in:
Jeena 2014-07-03 23:09:09 +02:00 • committed by logsol
parent ac27da1e31
commit 9a7b485324
1 changed files with 71 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

72
app/Game/Client/View/Views/PixiView.js
View file

@ -196,6 +196,76 @@ function (Parent, DomController, PIXI, Settings, Nc) {
grayFilter.gray = 0.85; grayFilter.gray = 0.85;
this.infoFilters = [blurFilter, grayFilter]; this.infoFilters = [blurFilter, grayFilter];
var ColorMatrixFilter = function()
{
PIXI.AbstractFilter.call( this );
this.passes = [this];
// set the uniforms
this.uniforms = {
matrix: {type: 'mat4', value: [1,0,0,0,
0,1,0,0,
0,0,1,0,
0,0,0,1]},
gray: {type: '1f', value: 1},
shirtColor: {type: '4fv', value: [1,1,1,1]}
};
this.fragmentSrc = [
'precision mediump float;',
'varying vec2 vTextureCoord;',
'varying vec4 vColor;',
'uniform float invert;',
'uniform mat4 matrix;',
'uniform sampler2D uSampler;',
'uniform float gray;',
'uniform vec4 shirtColor;',
'void main(void) {',
' vec4 pixel = texture2D(uSampler, vTextureCoord);',
' vec3 min_color = vec3(49.0/256.0, 64.0/256.0, 39.0/256.0);',
' vec3 max_color = vec3(106.0/256.0, 131.0/256.0, 90.0/256.0);',
' if(pixel.x >= min_color.x && pixel.y >= min_color.y && pixel.z >= min_color.z',
' &&',
' pixel.x <= max_color.x && pixel.y <= max_color.y && pixel.z <= max_color.z) {',
' pixel.rgb = mix(pixel.rgb, vec3(0.2126*pixel.r + 0.7152*pixel.g + 0.0722*pixel.b), gray);',
' pixel = pixel * shirtColor;',
' }',
' gl_FragColor = pixel;',
// ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;',
// ' gl_FragColor = gl_FragColor;',
'}'
];
};
ColorMatrixFilter.prototype = Object.create( PIXI.AbstractFilter.prototype );
ColorMatrixFilter.prototype.constructor = ColorMatrixFilter;
Object.defineProperty(ColorMatrixFilter.prototype, 'matrix', {
get: function() {
return this.uniforms.matrix.value;
},
set: function(value) {
this.uniforms.matrix.value = value;
}
});
var colorFilter = new ColorMatrixFilter()
colorFilter.matrix = [
1,1,0,0,
0,1,0,0,
0,0,1,0,
0,0,0,1
];
this.infoFilters = [colorFilter];
this.infoText = new PIXI.Text("", {font: "normal 20px monospace", fill: "red", align: "center"}); this.infoText = new PIXI.Text("", {font: "normal 20px monospace", fill: "red", align: "center"});
this.infoBox = new PIXI.Graphics(); this.infoBox = new PIXI.Graphics();
this.infoBox.alpha = 0.7; this.infoBox.alpha = 0.7;
@ -226,7 +296,7 @@ function (Parent, DomController, PIXI, Settings, Nc) {
this.infoBox.position.x = this.infoText.position.x + borderWidth/2 - padding * 2; this.infoBox.position.x = this.infoText.position.x + borderWidth/2 - padding * 2;
this.infoBox.position.y = this.infoText.position.y + borderWidth/2 - padding; this.infoBox.position.y = this.infoText.position.y + borderWidth/2 - padding;
this.infoContainer.visible = true; this.infoContainer.visible = false;
this.container.filters = this.infoFilters; this.container.filters = this.infoFilters;
this.infoFilters.forEach(function(filter) { filter.dirty = true; }); this.infoFilters.forEach(function(filter) { filter.dirty = true; });
} else { } else {