diff --git a/src/filters/displacement/DisplacementFilter.js b/src/filters/displacement/DisplacementFilter.js index 164fd48..7342ae7 100644 --- a/src/filters/displacement/DisplacementFilter.js +++ b/src/filters/displacement/DisplacementFilter.js @@ -18,48 +18,9 @@ //TODO move this code out to a frag and vert file. core.AbstractFilter.call(this, // vertex shader - [ - 'attribute vec2 aVertexPosition;', - 'attribute vec2 aTextureCoord;', - 'attribute vec4 aColor;', - - 'uniform mat3 projectionMatrix;', - 'uniform mat3 otherMatrix;', - - 'varying vec2 vMapCoord;', - 'varying vec2 vTextureCoord;', - 'varying vec4 vColor;', - - 'void main(void)', - '{', - ' gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', - ' vTextureCoord = aTextureCoord;', - ' vMapCoord = ( otherMatrix * vec3( aTextureCoord, 1.0) ).xy;', - ' vColor = vec4(aColor.rgb * aColor.a, aColor.a);', - '}' - ].join('\n'), + require('fs').readFileSync(__dirname + '/displacement.vert', 'utf8'), // fragment shader - [ - 'precision lowp float;', - - 'varying vec2 vMapCoord;', - 'varying vec2 vTextureCoord;', - 'varying vec4 vColor;', - - 'uniform vec2 scale;', - - 'uniform sampler2D uSampler;', - 'uniform sampler2D mapSampler;', - - 'void main(void)', - '{', - ' vec4 original = texture2D(uSampler, vTextureCoord);', - ' vec4 map = texture2D(mapSampler, vMapCoord);', - ' map -= 0.5;', - ' map.xy *= scale;', - ' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + map.x, vTextureCoord.y + map.y));', - '}' - ].join('\n'), + require('fs').readFileSync(__dirname + '/displacement.frag', 'utf8'), // uniforms { mapSampler: { type: 'sampler2D', value: sprite.texture }, diff --git a/src/filters/displacement/DisplacementFilter.js b/src/filters/displacement/DisplacementFilter.js index 164fd48..7342ae7 100644 --- a/src/filters/displacement/DisplacementFilter.js +++ b/src/filters/displacement/DisplacementFilter.js @@ -18,48 +18,9 @@ //TODO move this code out to a frag and vert file. core.AbstractFilter.call(this, // vertex shader - [ - 'attribute vec2 aVertexPosition;', - 'attribute vec2 aTextureCoord;', - 'attribute vec4 aColor;', - - 'uniform mat3 projectionMatrix;', - 'uniform mat3 otherMatrix;', - - 'varying vec2 vMapCoord;', - 'varying vec2 vTextureCoord;', - 'varying vec4 vColor;', - - 'void main(void)', - '{', - ' gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', - ' vTextureCoord = aTextureCoord;', - ' vMapCoord = ( otherMatrix * vec3( aTextureCoord, 1.0) ).xy;', - ' vColor = vec4(aColor.rgb * aColor.a, aColor.a);', - '}' - ].join('\n'), + require('fs').readFileSync(__dirname + '/displacement.vert', 'utf8'), // fragment shader - [ - 'precision lowp float;', - - 'varying vec2 vMapCoord;', - 'varying vec2 vTextureCoord;', - 'varying vec4 vColor;', - - 'uniform vec2 scale;', - - 'uniform sampler2D uSampler;', - 'uniform sampler2D mapSampler;', - - 'void main(void)', - '{', - ' vec4 original = texture2D(uSampler, vTextureCoord);', - ' vec4 map = texture2D(mapSampler, vMapCoord);', - ' map -= 0.5;', - ' map.xy *= scale;', - ' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + map.x, vTextureCoord.y + map.y));', - '}' - ].join('\n'), + require('fs').readFileSync(__dirname + '/displacement.frag', 'utf8'), // uniforms { mapSampler: { type: 'sampler2D', value: sprite.texture }, diff --git a/src/filters/displacement/displacement.frag b/src/filters/displacement/displacement.frag index d877a3a..bbe012a 100644 --- a/src/filters/displacement/displacement.frag +++ b/src/filters/displacement/displacement.frag @@ -1,30 +1,21 @@ -precision mediump float; +precision lowp float; +varying vec2 vMapCoord; varying vec2 vTextureCoord; varying vec4 vColor; -uniform sampler2D displacementMap; -uniform sampler2D uSampler; uniform vec2 scale; -uniform vec2 offset; -uniform vec4 dimensions; -uniform vec2 mapDimensions; // = vec2(256.0, 256.0); -// const vec2 textureDimensions = vec2(750.0, 750.0); + +uniform sampler2D uSampler; +uniform sampler2D mapSampler; void main(void) { - vec2 mapCords = vTextureCoord; - mapCords += (dimensions.zw + offset)/ dimensions.xy ; - mapCords.y *= -1.0; - mapCords.y += 1.0; + vec4 original = texture2D(uSampler, vTextureCoord); + vec4 map = texture2D(mapSampler, vMapCoord); - vec2 matSample = texture2D(displacementMap, mapCords).xy; - matSample -= 0.5; - matSample *= scale; - matSample /= mapDimensions; + map -= 0.5; + map.xy *= scale; - gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y)); - - // TODO: Is this needed? - // gl_FragColor.rgb = mix(gl_FragColor.rgb, gl_FragColor.rgb, 1.0); + gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + map.x, vTextureCoord.y + map.y)); } diff --git a/src/filters/displacement/DisplacementFilter.js b/src/filters/displacement/DisplacementFilter.js index 164fd48..7342ae7 100644 --- a/src/filters/displacement/DisplacementFilter.js +++ b/src/filters/displacement/DisplacementFilter.js @@ -18,48 +18,9 @@ //TODO move this code out to a frag and vert file. core.AbstractFilter.call(this, // vertex shader - [ - 'attribute vec2 aVertexPosition;', - 'attribute vec2 aTextureCoord;', - 'attribute vec4 aColor;', - - 'uniform mat3 projectionMatrix;', - 'uniform mat3 otherMatrix;', - - 'varying vec2 vMapCoord;', - 'varying vec2 vTextureCoord;', - 'varying vec4 vColor;', - - 'void main(void)', - '{', - ' gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', - ' vTextureCoord = aTextureCoord;', - ' vMapCoord = ( otherMatrix * vec3( aTextureCoord, 1.0) ).xy;', - ' vColor = vec4(aColor.rgb * aColor.a, aColor.a);', - '}' - ].join('\n'), + require('fs').readFileSync(__dirname + '/displacement.vert', 'utf8'), // fragment shader - [ - 'precision lowp float;', - - 'varying vec2 vMapCoord;', - 'varying vec2 vTextureCoord;', - 'varying vec4 vColor;', - - 'uniform vec2 scale;', - - 'uniform sampler2D uSampler;', - 'uniform sampler2D mapSampler;', - - 'void main(void)', - '{', - ' vec4 original = texture2D(uSampler, vTextureCoord);', - ' vec4 map = texture2D(mapSampler, vMapCoord);', - ' map -= 0.5;', - ' map.xy *= scale;', - ' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + map.x, vTextureCoord.y + map.y));', - '}' - ].join('\n'), + require('fs').readFileSync(__dirname + '/displacement.frag', 'utf8'), // uniforms { mapSampler: { type: 'sampler2D', value: sprite.texture }, diff --git a/src/filters/displacement/displacement.frag b/src/filters/displacement/displacement.frag index d877a3a..bbe012a 100644 --- a/src/filters/displacement/displacement.frag +++ b/src/filters/displacement/displacement.frag @@ -1,30 +1,21 @@ -precision mediump float; +precision lowp float; +varying vec2 vMapCoord; varying vec2 vTextureCoord; varying vec4 vColor; -uniform sampler2D displacementMap; -uniform sampler2D uSampler; uniform vec2 scale; -uniform vec2 offset; -uniform vec4 dimensions; -uniform vec2 mapDimensions; // = vec2(256.0, 256.0); -// const vec2 textureDimensions = vec2(750.0, 750.0); + +uniform sampler2D uSampler; +uniform sampler2D mapSampler; void main(void) { - vec2 mapCords = vTextureCoord; - mapCords += (dimensions.zw + offset)/ dimensions.xy ; - mapCords.y *= -1.0; - mapCords.y += 1.0; + vec4 original = texture2D(uSampler, vTextureCoord); + vec4 map = texture2D(mapSampler, vMapCoord); - vec2 matSample = texture2D(displacementMap, mapCords).xy; - matSample -= 0.5; - matSample *= scale; - matSample /= mapDimensions; + map -= 0.5; + map.xy *= scale; - gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y)); - - // TODO: Is this needed? - // gl_FragColor.rgb = mix(gl_FragColor.rgb, gl_FragColor.rgb, 1.0); + gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + map.x, vTextureCoord.y + map.y)); } diff --git a/src/filters/displacement/displacement.vert b/src/filters/displacement/displacement.vert new file mode 100644 index 0000000..02d7f64 --- /dev/null +++ b/src/filters/displacement/displacement.vert @@ -0,0 +1,18 @@ +attribute vec2 aVertexPosition; +attribute vec2 aTextureCoord; +attribute vec4 aColor; + +uniform mat3 projectionMatrix; +uniform mat3 otherMatrix; + +varying vec2 vMapCoord; +varying vec2 vTextureCoord; +varying vec4 vColor; + +void main(void) +{ + gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); + vTextureCoord = aTextureCoord; + vMapCoord = ( otherMatrix * vec3( aTextureCoord, 1.0) ).xy; + vColor = vec4(aColor.rgb * aColor.a, aColor.a); +}