jeena/pixi.js
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

Displacment Map Added

Browse source
This commit is contained in:
Mat Groves 2013-10-20 18:26:25 +01:00
parent 127aff7594
commit c512bd35a4
16 changed files with 11050 additions and 47 deletions
Download patch file Download diff file Expand all files Collapse all files

4
Gruntfile.js
View file

@ -24,6 +24,7 @@ module.exports = function(grunt) {
'<%= dirs.src %>/filters/FilterBlock.js', '<%= dirs.src %>/filters/FilterBlock.js',
'<%= dirs.src %>/filters/ColorMatrixFilter.js', '<%= dirs.src %>/filters/ColorMatrixFilter.js',
'<%= dirs.src %>/filters/GreyFilter.js', '<%= dirs.src %>/filters/GreyFilter.js',
'<%= dirs.src %>/filters/DisplacementFilter.js',
'<%= dirs.src %>/text/Text.js', '<%= dirs.src %>/text/Text.js',
'<%= dirs.src %>/text/BitmapText.js', '<%= dirs.src %>/text/BitmapText.js',
'<%= dirs.src %>/InteractionManager.js', '<%= dirs.src %>/InteractionManager.js',
@ -128,7 +129,8 @@ module.exports = function(grunt) {
'examples/example 12 - Spine', 'examples/example 12 - Spine',
'examples/example 13 - Graphics', 'examples/example 13 - Graphics',
'examples/example 14 - Masking', 'examples/example 14 - Masking',
'examples/example 15 - Filters' 'examples/example 15 - Filters',
'examples/example 16 - Displacement'
] ]
}, },
connect: { connect: {

BIN
examples/example 16 - Displacement/BGrotate.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 136 KiB

BIN
examples/example 16 - Displacement/LightRotate1.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 209 KiB

BIN
examples/example 16 - Displacement/LightRotate2.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 169 KiB

BIN
examples/example 16 - Displacement/SceneRotate.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 111 KiB

168
examples/example 16 - Displacement/index.html Normal file
View file

@ -0,0 +1,168 @@
<!DOCTYPE HTML>
<html>
<head>
<title>pixi.js example 15 - Filters</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #000000;
}
</style>
<script src="pixi.js"></script>
<script src="../../src/pixi/filters/DisplacementFilter.js"></script>
<script src="../../src/pixi/renderers/webgl/PixiShader.js"></script>
</head>
<body>
<script>
var renderer = PIXI.autoDetectRenderer(620, 380);
// create an new instance of a pixi stage
var stage = new PIXI.Stage(0xFFFFFF, true);
stage.interactive = true;
var bg = PIXI.Sprite.fromImage("BGrotate.jpg");
bg.anchor.x = 0.5;
bg.anchor.y = 0.5;
bg.position.x = 620/2;
bg.position.y = 380/2;
var colorMatrix = [1,0,0,0,
0,1,0,0,
0,0,1,0,
0,0,0,1];
var mapTexture = new PIXI.RenderTexture(256, 256)// PIXI.Texture.fromImage("map.png");
var filter = new PIXI.DisplacementFilter(mapTexture);
var container = new PIXI.DisplayObjectContainer();
container.position.x = 620/2;
container.position.y = 380/2;
var bgFront = PIXI.Sprite.fromImage("SceneRotate.jpg");
bgFront.anchor.x = 0.5;
bgFront.anchor.y = 0.5;
container.addChild(bgFront);
var light2 = PIXI.Sprite.fromImage("LightRotate2.png");
light2.anchor.x = 0.5;
light2.anchor.y = 0.5;
container.addChild(light2);
var light1 = PIXI.Sprite.fromImage("LightRotate1.png");
light1.anchor.x = 0.5;
light1.anchor.y = 0.5;
container.addChild(light1);
var panda = PIXI.Sprite.fromImage("panda.png");
panda.anchor.x = 0.5;
panda.anchor.y = 0.5;
//container.addChild(panda);
stage.addChild(container);
// create a renderer instance
renderer.view.style.position = "absolute"
renderer.view.style.width = window.innerWidth + "px";
renderer.view.style.height = window.innerHeight + "px";
renderer.view.style.display = "block";
// add render view to DOM
document.body.appendChild(renderer.view);
stage.filters = [filter];
var count = 0;
var switchy = false;
stage.click = stage.tap = function()
{
switchy = !switchy
if(!switchy)
{
// panda.filters = [filter];//
stage.filters = [filter];
}
else
{
//panda.filters = null//.. [filter];
stage.filters = null;
}
PIXI.runList(stage);
}
/*
* Add a pixi Logo!
*/
var logo = PIXI.Sprite.fromImage("../../logo_small.png");
// stage.addChild(logo);
logo.anchor.x = 1;
logo.position.x = 620
logo.scale.x = logo.scale.y = 0.5;
logo.position.y = 320;
logo.interactive = true;
logo.buttonMode = true;
logo.click = logo.tap = function()
{
window.open("https://github.com/GoodBoyDigital/pixi.js", "_blank");
}
var help = new PIXI.Text("Click to turn filters on / off.", {font:"bold 12pt Arial", fill:"white"});
help.position.y = 350;
help.position.x = 10;
stage.addChild(help);
//stage.filters = [filter];
//stage.addChild(new PIXI.Sprite(mapTexture))
PIXI.runList(stage);
requestAnimFrame(animate);
var position = new PIXI.Point( 256/2, 256/2);
function animate() {
mapTexture.render(container, position);
filter.scale.x = Math.sin(count) * 100;
filter.scale.y = Math.cos(count) * 100;
bg.rotation += 0.01;
bgFront.rotation -= 0.01;
light1.rotation += 0.02;
light2.rotation += 0.01;
panda.scale.x = 1 + Math.sin(count) * 0.04;
panda.scale.y = 1 + Math.cos(count) * 0.04;
count += 0.1;
// filter.matrix = colorMatrix;
renderer.render(stage);
requestAnimFrame( animate );
}
</script>
</body>
</html>

BIN
examples/example 16 - Displacement/map.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 94 KiB

BIN
examples/example 16 - Displacement/map2.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 70 KiB

BIN
examples/example 16 - Displacement/panda.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 68 KiB

10773
examples/example 16 - Displacement/pixi.js Normal file
View file

File diff suppressed because it is too large Load diff

58
src/pixi/filters/DisplacementFilter.js Normal file
View file

@ -0,0 +1,58 @@
/**
* @author Mat Groves http://matgroves.com/ @Doormat23
*/
PIXI.DisplacementFilter = function(texture)
{
// set the uniforms
this.uniforms = {
displacementMap: {type: 'sampler2D', value:texture},
scale: {type: 'f2', value:{x:30, y:30}},
mapDimensions: {type: 'f2', value:{x:texture.width, y:texture.height}}
};
this.fragmentSrc = [
"precision mediump float;",
"varying vec2 vTextureCoord;",
"varying float vColor;",
"uniform sampler2D displacementMap;",
"uniform sampler2D uSampler;",
"uniform vec2 scale;",
"uniform vec2 mapDimensions;",// = vec2(256.0, 256.0);",
"const vec2 textureDimensions = vec2(245.0, 263.0);",
"void main(void) {",
"vec2 matSample = texture2D(displacementMap, vTextureCoord * (textureDimensions/mapDimensions)).xy;",
"matSample -= 0.5;",
"matSample *= scale;",
"matSample /= textureDimensions;",
"gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));",
"gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);",
"gl_FragColor = gl_FragColor * vColor;",
"}"
];
}
Object.defineProperty(PIXI.DisplacementFilter.prototype, 'map', {
get: function() {
return this.uniforms.displacementMap.value;
},
set: function(value) {
this.uniforms.displacementMap.value = value;
}
});
Object.defineProperty(PIXI.DisplacementFilter.prototype, 'scale', {
get: function() {
return this.uniforms.scale.value;
},
set: function(value) {
this.uniforms.scale.value = value;
}
});

19
src/pixi/renderers/webgl/PixiShader.js
View file

@ -60,10 +60,29 @@ PIXI.PixiShader.prototype.syncUniforms = function()
{ {
gl.uniform1f(this.program[key], this.uniforms[key].value); gl.uniform1f(this.program[key], this.uniforms[key].value);
} }
if(type == "f2")
{
gl.uniform2f(this.program[key], this.uniforms[key].value.x, this.uniforms[key].value.y);
}
else if(type == "mat4") else if(type == "mat4")
{ {
gl.uniformMatrix4fv(this.program[key], false, this.uniforms[key].value); gl.uniformMatrix4fv(this.program[key], false, this.uniforms[key].value);
} }
else if(type == "sampler2D")
{
// first texture...
var texture = this.uniforms[key].value;
gl.activeTexture(gl.TEXTURE1);
gl.bindTexture(gl.TEXTURE_2D, texture.baseTexture._glTexture);
gl.uniform1i(this.program[key], 1);
// activate texture..
// gl.uniformMatrix4fv(this.program[key], false, this.uniforms[key].value);
// gl.uniformMatrix4fv(this.program[key], false, this.uniforms[key].value);
}
} }
} }

51
src/pixi/renderers/webgl/WebGLBatch.js
View file

@ -415,6 +415,9 @@ PIXI.WebGLBatch.prototype.update = function()
var indexRun = 0; var indexRun = 0;
var displayObject = this.head; var displayObject = this.head;
var verticies = this.verticies;
var uvs = this.uvs;
var colors = this.colors;
while(displayObject) while(displayObject)
{ {
@ -443,17 +446,17 @@ PIXI.WebGLBatch.prototype.update = function()
tx = worldTransform[2]; tx = worldTransform[2];
ty = worldTransform[5]; ty = worldTransform[5];
this.verticies[index + 0 ] = a * w1 + c * h1 + tx; verticies[index + 0 ] = a * w1 + c * h1 + tx;
this.verticies[index + 1 ] = d * h1 + b * w1 + ty; verticies[index + 1 ] = d * h1 + b * w1 + ty;
this.verticies[index + 2 ] = a * w0 + c * h1 + tx; verticies[index + 2 ] = a * w0 + c * h1 + tx;
this.verticies[index + 3 ] = d * h1 + b * w0 + ty; verticies[index + 3 ] = d * h1 + b * w0 + ty;
this.verticies[index + 4 ] = a * w0 + c * h0 + tx; verticies[index + 4 ] = a * w0 + c * h0 + tx;
this.verticies[index + 5 ] = d * h0 + b * w0 + ty; verticies[index + 5 ] = d * h0 + b * w0 + ty;
this.verticies[index + 6] = a * w1 + c * h0 + tx; verticies[index + 6] = a * w1 + c * h0 + tx;
this.verticies[index + 7] = d * h0 + b * w1 + ty; verticies[index + 7] = d * h0 + b * w1 + ty;
if(displayObject.updateFrame || displayObject.texture.updateFrame) if(displayObject.updateFrame || displayObject.texture.updateFrame)
{ {
@ -465,17 +468,17 @@ PIXI.WebGLBatch.prototype.update = function()
var tw = texture.baseTexture.width; var tw = texture.baseTexture.width;
var th = texture.baseTexture.height; var th = texture.baseTexture.height;
this.uvs[index + 0] = frame.x / tw; uvs[index + 0] = frame.x / tw;
this.uvs[index +1] = frame.y / th; uvs[index +1] = frame.y / th;
this.uvs[index +2] = (frame.x + frame.width) / tw; uvs[index +2] = (frame.x + frame.width) / tw;
this.uvs[index +3] = frame.y / th; uvs[index +3] = frame.y / th;
this.uvs[index +4] = (frame.x + frame.width) / tw; uvs[index +4] = (frame.x + frame.width) / tw;
this.uvs[index +5] = (frame.y + frame.height) / th; uvs[index +5] = (frame.y + frame.height) / th;
this.uvs[index +6] = frame.x / tw; uvs[index +6] = frame.x / tw;
this.uvs[index +7] = (frame.y + frame.height) / th; uvs[index +7] = (frame.y + frame.height) / th;
displayObject.updateFrame = false; displayObject.updateFrame = false;
} }
@ -486,7 +489,7 @@ PIXI.WebGLBatch.prototype.update = function()
displayObject.cacheAlpha = displayObject.worldAlpha; displayObject.cacheAlpha = displayObject.worldAlpha;
var colorIndex = indexRun * 4; var colorIndex = indexRun * 4;
this.colors[colorIndex] = this.colors[colorIndex + 1] = this.colors[colorIndex + 2] = this.colors[colorIndex + 3] = displayObject.worldAlpha; colors[colorIndex] = colors[colorIndex + 1] = colors[colorIndex + 2] = colors[colorIndex + 3] = displayObject.worldAlpha;
this.dirtyColors = true; this.dirtyColors = true;
} }
} }
@ -494,17 +497,7 @@ PIXI.WebGLBatch.prototype.update = function()
{ {
index = indexRun * 8; index = indexRun * 8;
this.verticies[index + 0 ] = 0; verticies[index + 0 ] = verticies[index + 1 ] = verticies[index + 2 ] = verticies[index + 3 ] = verticies[index + 4 ] = verticies[index + 5 ] = verticies[index + 6] = verticies[index + 7] = 0;
this.verticies[index + 1 ] = 0;
this.verticies[index + 2 ] = 0;
this.verticies[index + 3 ] = 0;
this.verticies[index + 4 ] = 0;
this.verticies[index + 5 ] = 0;
this.verticies[index + 6] = 0;
this.verticies[index + 7] = 0;
} }
indexRun++; indexRun++;
@ -546,7 +539,7 @@ PIXI.WebGLBatch.prototype.render = function(start, end)
gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.verticies) gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.verticies)
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, 2, gl.FLOAT, false, 0, 0); gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, 2, gl.FLOAT, false, 0, 0);
// update the uvs // update the uvs
var isDefault = (shaderProgram == PIXI.shaderProgram) //var isDefault = (shaderProgram == PIXI.shaderProgram)
gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer);

2
src/pixi/renderers/webgl/WebGLRenderGroup.js
View file

@ -317,7 +317,7 @@ PIXI.WebGLRenderGroup.prototype.handleFilterBlock = function(renderable, project
filter.shader = shader filter.shader = shader
} }
PIXI.activateShader(filter.shader); PIXI.pushShader(filter.shader);
gl.uniform2f(PIXI.currentShader.projectionVector, projection.x, projection.y); gl.uniform2f(PIXI.currentShader.projectionVector, projection.x, projection.y);
} }
else else

2
src/pixi/renderers/webgl/WebGLRenderer.js
View file

@ -85,7 +85,7 @@ PIXI.WebGLRenderer = function(width, height, view, transparent, antialias)
this.resize(this.width, this.height); this.resize(this.width, this.height);
this.contextLost = false; this.contextLost = false;
PIXI.activateShader(PIXI.defaultShader); PIXI.pushShader(PIXI.defaultShader);
this.stageRenderGroup = new PIXI.WebGLRenderGroup(this.gl); this.stageRenderGroup = new PIXI.WebGLRenderGroup(this.gl);

16
src/pixi/renderers/webgl/WebGLShaders.js
View file

@ -124,7 +124,7 @@ PIXI.initDefaultShader = function()
{ {
PIXI.defaultShader = new PIXI.PixiShader(); PIXI.defaultShader = new PIXI.PixiShader();
PIXI.defaultShader.init(); PIXI.defaultShader.init();
PIXI.activateShader(PIXI.defaultShader); PIXI.pushShader(PIXI.defaultShader);
/* /*
PIXI.shaderStack.push(PIXI.defaultShader); PIXI.shaderStack.push(PIXI.defaultShader);
PIXI.current*/ PIXI.current*/
@ -195,15 +195,15 @@ PIXI.compileProgram = function(vertexSrc, fragmentSrc)
return shaderProgram; return shaderProgram;
} }
PIXI.activateShader = function(shader) PIXI.pushShader = function(shader)
{ {
PIXI.shaderStack.push(shader); PIXI.shaderStack.push(shader);
//console.log(">>>")
var gl = PIXI.gl; var gl = PIXI.gl;
var shaderProgram = shader.program; var shaderProgram = shader.program;
// map uniforms.. // map uniforms..
gl.useProgram(shaderProgram); gl.useProgram(shaderProgram);
@ -220,7 +220,6 @@ PIXI.activateShader = function(shader)
PIXI.popShader = function() PIXI.popShader = function()
{ {
var gl = PIXI.gl; var gl = PIXI.gl;
// activate last program..
var lastProgram = PIXI.shaderStack.pop(); var lastProgram = PIXI.shaderStack.pop();
var shaderProgram = PIXI.shaderStack[ PIXI.shaderStack.length-1 ].program; var shaderProgram = PIXI.shaderStack[ PIXI.shaderStack.length-1 ].program;
@ -235,13 +234,7 @@ PIXI.activatePrimitiveShader = function()
var gl = PIXI.gl; var gl = PIXI.gl;
gl.useProgram(PIXI.primitiveProgram); gl.useProgram(PIXI.primitiveProgram);
//gl.disableVertexAttribArray(PIXI.currentShader.vertexPositionAttribute);
//gl.disableVertexAttribArray(PIXI.currentShader.colorAttribute);
gl.disableVertexAttribArray(PIXI.currentShader.textureCoordAttribute); gl.disableVertexAttribArray(PIXI.currentShader.textureCoordAttribute);
//gl.enableVertexAttribArray(PIXI.primitiveProgram.vertexPositionAttribute);
//gl.enableVertexAttribArray(PIXI.primitiveProgram.colorAttribute);
} }
PIXI.deactivatePrimitiveShader = function() PIXI.deactivatePrimitiveShader = function()
@ -249,8 +242,5 @@ PIXI.deactivatePrimitiveShader = function()
var gl = PIXI.gl; var gl = PIXI.gl;
gl.useProgram(PIXI.currentShader); gl.useProgram(PIXI.currentShader);
gl.enableVertexAttribArray(PIXI.currentShader.textureCoordAttribute); gl.enableVertexAttribArray(PIXI.currentShader.textureCoordAttribute);
//gl.enableVertexAttribArray(PIXI.currentShader.vertexPositionAttribute);
//gl.enableVertexAttribArray(PIXI.currentShader.colorAttribute);
} }