Displacment Map Added
This commit is contained in:
Mat Groves
parent
127aff7594
commit
c512bd35a4
16 changed files with 11050 additions and 47 deletions
|
|
@ -24,6 +24,7 @@ module.exports = function(grunt) {
|
|||
'<%= dirs.src %>/filters/FilterBlock.js',
|
||||
'<%= dirs.src %>/filters/ColorMatrixFilter.js',
|
||||
'<%= dirs.src %>/filters/GreyFilter.js',
|
||||
'<%= dirs.src %>/filters/DisplacementFilter.js',
|
||||
'<%= dirs.src %>/text/Text.js',
|
||||
'<%= dirs.src %>/text/BitmapText.js',
|
||||
'<%= dirs.src %>/InteractionManager.js',
|
||||
|
|
@ -128,7 +129,8 @@ module.exports = function(grunt) {
|
|||
'examples/example 12 - Spine',
|
||||
'examples/example 13 - Graphics',
|
||||
'examples/example 14 - Masking',
|
||||
'examples/example 15 - Filters'
|
||||
'examples/example 15 - Filters',
|
||||
'examples/example 16 - Displacement'
|
||||
]
|
||||
},
|
||||
connect: {
|
||||
|
|
|
|||
BIN
examples/example 16 - Displacement/BGrotate.jpg
Normal file
BIN
examples/example 16 - Displacement/BGrotate.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 136 KiB |
BIN
examples/example 16 - Displacement/LightRotate1.png
Normal file
BIN
examples/example 16 - Displacement/LightRotate1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 209 KiB |
BIN
examples/example 16 - Displacement/LightRotate2.png
Normal file
BIN
examples/example 16 - Displacement/LightRotate2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 169 KiB |
BIN
examples/example 16 - Displacement/SceneRotate.jpg
Normal file
BIN
examples/example 16 - Displacement/SceneRotate.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 111 KiB |
168
examples/example 16 - Displacement/index.html
Normal file
168
examples/example 16 - Displacement/index.html
Normal 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
BIN
examples/example 16 - Displacement/map.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 94 KiB |
BIN
examples/example 16 - Displacement/map2.png
Normal file
BIN
examples/example 16 - Displacement/map2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 70 KiB |
BIN
examples/example 16 - Displacement/panda.png
Normal file
BIN
examples/example 16 - Displacement/panda.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
10773
examples/example 16 - Displacement/pixi.js
Normal file
10773
examples/example 16 - Displacement/pixi.js
Normal file
File diff suppressed because it is too large
Load diff
58
src/pixi/filters/DisplacementFilter.js
Normal file
58
src/pixi/filters/DisplacementFilter.js
Normal 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;
|
||||
}
|
||||
});
|
||||
|
|
@ -60,10 +60,29 @@ PIXI.PixiShader.prototype.syncUniforms = function()
|
|||
{
|
||||
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")
|
||||
{
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -415,7 +415,10 @@ PIXI.WebGLBatch.prototype.update = function()
|
|||
var indexRun = 0;
|
||||
|
||||
var displayObject = this.head;
|
||||
|
||||
var verticies = this.verticies;
|
||||
var uvs = this.uvs;
|
||||
var colors = this.colors;
|
||||
|
||||
while(displayObject)
|
||||
{
|
||||
if(displayObject.vcount === PIXI.visibleCount)
|
||||
|
|
@ -443,17 +446,17 @@ PIXI.WebGLBatch.prototype.update = function()
|
|||
tx = worldTransform[2];
|
||||
ty = worldTransform[5];
|
||||
|
||||
this.verticies[index + 0 ] = a * w1 + c * h1 + tx;
|
||||
this.verticies[index + 1 ] = d * h1 + b * w1 + ty;
|
||||
verticies[index + 0 ] = a * w1 + c * h1 + tx;
|
||||
verticies[index + 1 ] = d * h1 + b * w1 + ty;
|
||||
|
||||
this.verticies[index + 2 ] = a * w0 + c * h1 + tx;
|
||||
this.verticies[index + 3 ] = d * h1 + b * w0 + ty;
|
||||
verticies[index + 2 ] = a * w0 + c * h1 + tx;
|
||||
verticies[index + 3 ] = d * h1 + b * w0 + ty;
|
||||
|
||||
this.verticies[index + 4 ] = a * w0 + c * h0 + tx;
|
||||
this.verticies[index + 5 ] = d * h0 + b * w0 + ty;
|
||||
verticies[index + 4 ] = a * w0 + c * h0 + tx;
|
||||
verticies[index + 5 ] = d * h0 + b * w0 + ty;
|
||||
|
||||
this.verticies[index + 6] = a * w1 + c * h0 + tx;
|
||||
this.verticies[index + 7] = d * h0 + b * w1 + ty;
|
||||
verticies[index + 6] = a * w1 + c * h0 + tx;
|
||||
verticies[index + 7] = d * h0 + b * w1 + ty;
|
||||
|
||||
if(displayObject.updateFrame || displayObject.texture.updateFrame)
|
||||
{
|
||||
|
|
@ -465,17 +468,17 @@ PIXI.WebGLBatch.prototype.update = function()
|
|||
var tw = texture.baseTexture.width;
|
||||
var th = texture.baseTexture.height;
|
||||
|
||||
this.uvs[index + 0] = frame.x / tw;
|
||||
this.uvs[index +1] = frame.y / th;
|
||||
uvs[index + 0] = frame.x / tw;
|
||||
uvs[index +1] = frame.y / th;
|
||||
|
||||
this.uvs[index +2] = (frame.x + frame.width) / tw;
|
||||
this.uvs[index +3] = frame.y / th;
|
||||
uvs[index +2] = (frame.x + frame.width) / tw;
|
||||
uvs[index +3] = frame.y / th;
|
||||
|
||||
this.uvs[index +4] = (frame.x + frame.width) / tw;
|
||||
this.uvs[index +5] = (frame.y + frame.height) / th;
|
||||
uvs[index +4] = (frame.x + frame.width) / tw;
|
||||
uvs[index +5] = (frame.y + frame.height) / th;
|
||||
|
||||
this.uvs[index +6] = frame.x / tw;
|
||||
this.uvs[index +7] = (frame.y + frame.height) / th;
|
||||
uvs[index +6] = frame.x / tw;
|
||||
uvs[index +7] = (frame.y + frame.height) / th;
|
||||
|
||||
displayObject.updateFrame = false;
|
||||
}
|
||||
|
|
@ -486,7 +489,7 @@ PIXI.WebGLBatch.prototype.update = function()
|
|||
displayObject.cacheAlpha = displayObject.worldAlpha;
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
|
@ -494,17 +497,7 @@ PIXI.WebGLBatch.prototype.update = function()
|
|||
{
|
||||
index = indexRun * 8;
|
||||
|
||||
this.verticies[index + 0 ] = 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;
|
||||
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;
|
||||
}
|
||||
|
||||
indexRun++;
|
||||
|
|
@ -546,7 +539,7 @@ PIXI.WebGLBatch.prototype.render = function(start, end)
|
|||
gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.verticies)
|
||||
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, 2, gl.FLOAT, false, 0, 0);
|
||||
// update the uvs
|
||||
var isDefault = (shaderProgram == PIXI.shaderProgram)
|
||||
//var isDefault = (shaderProgram == PIXI.shaderProgram)
|
||||
|
||||
gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer);
|
||||
|
||||
|
|
|
|||
|
|
@ -317,7 +317,7 @@ PIXI.WebGLRenderGroup.prototype.handleFilterBlock = function(renderable, project
|
|||
filter.shader = shader
|
||||
}
|
||||
|
||||
PIXI.activateShader(filter.shader);
|
||||
PIXI.pushShader(filter.shader);
|
||||
gl.uniform2f(PIXI.currentShader.projectionVector, projection.x, projection.y);
|
||||
}
|
||||
else
|
||||
|
|
|
|||
|
|
@ -85,7 +85,7 @@ PIXI.WebGLRenderer = function(width, height, view, transparent, antialias)
|
|||
this.resize(this.width, this.height);
|
||||
this.contextLost = false;
|
||||
|
||||
PIXI.activateShader(PIXI.defaultShader);
|
||||
PIXI.pushShader(PIXI.defaultShader);
|
||||
|
||||
this.stageRenderGroup = new PIXI.WebGLRenderGroup(this.gl);
|
||||
|
||||
|
|
|
|||
|
|
@ -124,7 +124,7 @@ PIXI.initDefaultShader = function()
|
|||
{
|
||||
PIXI.defaultShader = new PIXI.PixiShader();
|
||||
PIXI.defaultShader.init();
|
||||
PIXI.activateShader(PIXI.defaultShader);
|
||||
PIXI.pushShader(PIXI.defaultShader);
|
||||
/*
|
||||
PIXI.shaderStack.push(PIXI.defaultShader);
|
||||
PIXI.current*/
|
||||
|
|
@ -195,15 +195,15 @@ PIXI.compileProgram = function(vertexSrc, fragmentSrc)
|
|||
return shaderProgram;
|
||||
}
|
||||
|
||||
PIXI.activateShader = function(shader)
|
||||
PIXI.pushShader = function(shader)
|
||||
{
|
||||
PIXI.shaderStack.push(shader);
|
||||
|
||||
//console.log(">>>")
|
||||
|
||||
var gl = PIXI.gl;
|
||||
|
||||
var shaderProgram = shader.program;
|
||||
|
||||
|
||||
// map uniforms..
|
||||
gl.useProgram(shaderProgram);
|
||||
|
||||
|
|
@ -220,7 +220,6 @@ PIXI.activateShader = function(shader)
|
|||
PIXI.popShader = function()
|
||||
{
|
||||
var gl = PIXI.gl;
|
||||
// activate last program..
|
||||
var lastProgram = PIXI.shaderStack.pop();
|
||||
|
||||
var shaderProgram = PIXI.shaderStack[ PIXI.shaderStack.length-1 ].program;
|
||||
|
|
@ -235,13 +234,7 @@ PIXI.activatePrimitiveShader = function()
|
|||
var gl = PIXI.gl;
|
||||
|
||||
gl.useProgram(PIXI.primitiveProgram);
|
||||
|
||||
//gl.disableVertexAttribArray(PIXI.currentShader.vertexPositionAttribute);
|
||||
//gl.disableVertexAttribArray(PIXI.currentShader.colorAttribute);
|
||||
gl.disableVertexAttribArray(PIXI.currentShader.textureCoordAttribute);
|
||||
|
||||
//gl.enableVertexAttribArray(PIXI.primitiveProgram.vertexPositionAttribute);
|
||||
//gl.enableVertexAttribArray(PIXI.primitiveProgram.colorAttribute);
|
||||
}
|
||||
|
||||
PIXI.deactivatePrimitiveShader = function()
|
||||
|
|
@ -249,8 +242,5 @@ PIXI.deactivatePrimitiveShader = function()
|
|||
var gl = PIXI.gl;
|
||||
|
||||
gl.useProgram(PIXI.currentShader);
|
||||
|
||||
gl.enableVertexAttribArray(PIXI.currentShader.textureCoordAttribute);
|
||||
//gl.enableVertexAttribArray(PIXI.currentShader.vertexPositionAttribute);
|
||||
//gl.enableVertexAttribArray(PIXI.currentShader.colorAttribute);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue