Merge dev

examples/example 19 - Normal/NormalMapFilter.js

@@ -0,0 +1,231 @@
+/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+
+/**
+ * 
+ * The NormalMapFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. 
+ * You can use this filter to apply all manor of crazy warping effects
+ * Currently the r property of the texture is used offset the x and the g propery of the texture is used to offset the y.
+ * @class NormalMapFilter
+ * @contructor
+ * @param texture {Texture} The texture used for the displacemtent map * must be power of 2 texture at the moment
+ */
+PIXI.NormalMapFilter = function(texture)
+{
+	PIXI.AbstractFilter.call( this );
+	
+	this.passes = [this];
+	//texture.baseTexture._powerOf2 = true;
+
+	// set the uniforms
+	//console.log()
+	this.uniforms = {
+		displacementMap: {type: 'sampler2D', value:texture},
+		scale:			 {type: '2f', value:{x:15, y:15}},
+		offset:			 {type: '2f', value:{x:0, y:0}},
+		mapDimensions:   {type: '2f', value:{x:1, y:1}},
+		zoomScale:   {type: '2f', value:{x:1, y:1}},
+		dimensions:   {type: '4fv', value:[0,0,0,0]},
+	//	LightDir: {type: 'f3', value:[0, 1, 0]},
+		LightPos: {type: '3fv', value:[0, 1, 0]}
+	};
+	
+
+	if(texture.baseTexture.hasLoaded)
+	{
+		this.uniforms.mapDimensions.value.x = texture.width;
+		this.uniforms.mapDimensions.value.y = texture.height;
+	}
+	else
+	{
+		this.boundLoadedFunction = this.onTextureLoaded.bind(this);
+
+		texture.baseTexture.on("loaded", this.boundLoadedFunction);
+	}
+
+	this.fragmentSrc = [
+	  "precision mediump float;",
+	  "varying vec2 vTextureCoord;",
+	  "varying vec4 vColor;",
+	  "uniform sampler2D displacementMap;",
+	  "uniform sampler2D uSampler;",
+	 
+	  "uniform vec4 dimensions;",
+	  
+		"const vec2 Resolution = vec2(1.0,1.0);",      //resolution of screen
+		"uniform vec3 LightPos;",    //light position, normalized
+		"const vec4 LightColor = vec4(1.0, 1.0, 1.0, 1.0);",      //light RGBA -- alpha is intensity
+		"const vec4 AmbientColor = vec4(1.0, 1.0, 1.0, 0.9);",    //ambient RGBA -- alpha is intensity 
+		"const vec3 Falloff = vec3(0.0, 0.3, 0.4);",         //attenuation coefficients
+
+		"uniform vec3 LightDir;",//" = vec3(1.0, 0.0, 1.0);",
+
+
+	  "uniform vec2 mapDimensions;",// = vec2(256.0, 256.0);",
+	 "uniform vec2 zoomScale;",
+
+	  "void main(void) {",
+	  	"vec2 mapCords = vTextureCoord.xy;",
+
+	  	"vec4 color = texture2D(uSampler, vTextureCoord.st);",
+
+        "vec3 nColor = texture2D(displacementMap, vTextureCoord.st).rgb;",
+ 
+//427 × 60
+	  	"mapCords *= dimensions.xy/mapDimensions;",
+	   "mapCords /= zoomScale;",
+	  	"mapCords.y *= -1.0;",
+	 	"mapCords.y += 1.0;",
+
+	 	//RGBA of our diffuse color
+		"vec4 DiffuseColor = texture2D(uSampler, vTextureCoord);",
+//"vec4 DiffuseColor = vec4(1.0, 0.0, 1.0, 1.0);",
+		//RGB of our normal map
+		"vec3 NormalMap = texture2D(displacementMap, mapCords).rgb;",
+
+		//"LightPos /= mapDimensions;",
+
+		//The delta position of light
+		//"vec3 LightDir = vec3(LightPos.xy - (gl_FragCoord.xy / Resolution.xy), LightPos.z);",
+		"vec3 LightDir = vec3((LightPos.xy/mapDimensions) - (mapCords.xy), LightPos.z);",
+		//Correct for aspect ratio
+		//"LightDir.x *= Resolution.x / Resolution.y;",
+
+		//Determine distance (used for attenuation) BEFORE we normalize our LightDir
+		"float D = length(LightDir);",
+
+		//normalize our vectors
+		"vec3 N = normalize(NormalMap * 2.0 - 1.0);",
+		"vec3 L = normalize(LightDir);",
+
+		//Pre-multiply light color with intensity
+		//Then perform "N dot L" to determine our diffuse term
+		"vec3 Diffuse = (LightColor.rgb * LightColor.a) * max(dot(N, L), 0.0);",
+
+		//pre-multiply ambient color with intensity
+		"vec3 Ambient = AmbientColor.rgb * AmbientColor.a;",
+
+		//calculate attenuation
+		"float Attenuation = 1.0 / ( Falloff.x + (Falloff.y*D) + (Falloff.z*D*D) );",
+		//" Attenuation *=0.2;",
+		" Attenuation = min(Attenuation, 1.0);",
+		//the calculation which brings it all together
+		"vec3 Intensity = Ambient + Diffuse * Attenuation;",
+		"vec3 FinalColor = DiffuseColor.rgb * Intensity * 0.5;",
+       // "FinalColor = mix(FinalColor, vColor.rgb, 1.0);",
+		"gl_FragColor = vColor * vec4(FinalColor, DiffuseColor.a);",
+	//	"gl_FragColor = vec4(NormalMap, 1.0);",//vColor * vec4(FinalColor, DiffuseColor.a);",
+	/*
+	 	// normalise color
+	 	"vec3 normal = normalize(nColor * 2.0 - 1.0);",
+	 	
+	 	"vec3 deltaPos = vec3( (light.xy - gl_FragCoord.xy) / resolution.xy, light.z );",
+
+	 	"float lambert = clamp(dot(normal, lightDir), 0.0, 1.0);",
+
+	 	"float d = sqrt(dot(deltaPos, deltaPos));", 
+        "float att = 1.0 / ( attenuation.x + (attenuation.y*d) + (attenuation.z*d*d) );",
+
+        "vec3 result = (ambientColor * ambientIntensity) + (lightColor.rgb * lambert) * att;",
+        "result *= color.rgb;",
+       
+        "gl_FragColor = vec4(result, 1.0);",*/
+
+	  	
+
+	  "}"
+	];
+	
+}
+
+/*
+void main() {
+        //sample color & normals from our textures
+        vec4 color = texture2D(u_texture, v_texCoords.st);
+        vec3 nColor = texture2D(u_normals, v_texCoords.st).rgb;
+ 
+        //some bump map programs will need the Y value flipped..
+        nColor.g = yInvert ? 1.0 - nColor.g : nColor.g;
+ 
+        //this is for debugging purposes, allowing us to lower the intensity of our bump map
+        vec3 nBase = vec3(0.5, 0.5, 1.0);
+        nColor = mix(nBase, nColor, strength);
+ 
+        //normals need to be converted to [-1.0, 1.0] range and normalized
+        vec3 normal = normalize(nColor * 2.0 - 1.0);
+ 
+        //here we do a simple distance calculation
+        vec3 deltaPos = vec3( (light.xy - gl_FragCoord.xy) / resolution.xy, light.z );
+ 
+        vec3 lightDir = normalize(deltaPos);
+        float lambert = useNormals ? clamp(dot(normal, lightDir), 0.0, 1.0) : 1.0;
+       
+        //now let's get a nice little falloff
+        float d = sqrt(dot(deltaPos, deltaPos));       
+        float att = useShadow ? 1.0 / ( attenuation.x + (attenuation.y*d) + (attenuation.z*d*d) ) : 1.0;
+       
+        vec3 result = (ambientColor * ambientIntensity) + (lightColor.rgb * lambert) * att;
+        result *= color.rgb;
+       
+        gl_FragColor = v_color * vec4(result, color.a);
+}
+*/
+PIXI.NormalMapFilter.prototype = Object.create( PIXI.AbstractFilter.prototype );
+PIXI.NormalMapFilter.prototype.constructor = PIXI.NormalMapFilter;
+
+PIXI.NormalMapFilter.prototype.onTextureLoaded = function()
+{
+	
+	this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width;
+	this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height;
+
+	this.uniforms.displacementMap.value.baseTexture.off("loaded", this.boundLoadedFunction)
+
+}
+
+/**
+ * The texture used for the displacemtent map * must be power of 2 texture at the moment
+ *
+ * @property map
+ * @type Texture
+ */
+Object.defineProperty(PIXI.NormalMapFilter.prototype, 'map', {
+    get: function() {
+        return this.uniforms.displacementMap.value;
+    },
+    set: function(value) {
+    	this.uniforms.displacementMap.value = value;
+    }
+});
+
+/**
+ * The multiplier used to scale the displacement result from the map calculation.
+ *
+ * @property scale
+ * @type Point
+ */
+Object.defineProperty(PIXI.NormalMapFilter.prototype, 'scale', {
+    get: function() {
+        return this.uniforms.scale.value;
+    },
+    set: function(value) {
+    	this.uniforms.scale.value = value;
+    }
+});
+
+/**
+ * The offset used to move the displacement map.
+ *
+ * @property offset
+ * @type Point
+ */
+Object.defineProperty(PIXI.NormalMapFilter.prototype, 'offset', {
+    get: function() {
+        return this.uniforms.offset.value;
+    },
+    set: function(value) {
+    	this.uniforms.offset.value = value;
+    }
+});

examples/example 19 - Normal/NormalMapFilter__.js

@@ -0,0 +1,225 @@
+/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+
+/**
+ * 
+ * The NormalMapFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. 
+ * You can use this filter to apply all manor of crazy warping effects
+ * Currently the r property of the texture is used offset the x and the g propery of the texture is used to offset the y.
+ * @class NormalMapFilter
+ * @contructor
+ * @param texture {Texture} The texture used for the displacemtent map * must be power of 2 texture at the moment
+ */
+PIXI.NormalMapFilter = function(texture)
+{
+	PIXI.AbstractFilter.call( this );
+	
+	this.passes = [this];
+	texture.baseTexture._powerOf2 = true;
+
+	// set the uniforms
+	//console.log()
+	this.uniforms = {
+		displacementMap: {type: 'sampler2D', value:texture},
+		scale:			 {type: '2f', value:{x:15, y:15}},
+		offset:			 {type: '2f', value:{x:0, y:0}},
+		mapDimensions:   {type: '2f', value:{x:1, y:1}},
+		dimensions:   {type: '4f', value:[0,0,0,0]},
+	//	LightDir: {type: 'f3', value:[0, 1, 0]},
+		LightPos: {type: '3f', value:[0, 1, 0]}
+	};
+	
+
+	if(texture.baseTexture.hasLoaded)
+	{
+		this.uniforms.mapDimensions.value.x = texture.width;
+		this.uniforms.mapDimensions.value.y = texture.height;
+	}
+	else
+	{
+		this.boundLoadedFunction = this.onTextureLoaded.bind(this);
+
+		texture.baseTexture.on("loaded", this.boundLoadedFunction);
+	}
+
+	this.fragmentSrc = [
+	  "precision mediump float;",
+	  "varying vec2 vTextureCoord;",
+	  "varying float vColor;",
+	  "uniform sampler2D displacementMap;",
+	  "uniform sampler2D uSampler;",
+	 
+	  "uniform vec4 dimensions;",
+	  
+		"const vec2 Resolution = vec2(1.0,1.0);",      //resolution of screen
+		"uniform vec3 LightPos;",    //light position, normalized
+		"const vec4 LightColor = vec4(1.0, 1.0, 1.0, 1.0);",      //light RGBA -- alpha is intensity
+		"const vec4 AmbientColor = vec4(1.0, 1.0, 1.0, 0.5);",    //ambient RGBA -- alpha is intensity 
+		"const vec3 Falloff = vec3(0.0, 1.0, 0.2);",         //attenuation coefficients
+
+		"uniform vec3 LightDir;",//" = vec3(1.0, 0.0, 1.0);",
+
+
+	  "uniform vec2 mapDimensions;",// = vec2(256.0, 256.0);",
+	 
+
+	  "void main(void) {",
+	  	"vec2 mapCords = vTextureCoord.xy;",
+
+	  	"vec4 color = texture2D(uSampler, vTextureCoord.st);",
+        "vec3 nColor = texture2D(displacementMap, vTextureCoord.st).rgb;",
+ 
+
+	  	"mapCords *= vec2(dimensions.x/512.0, dimensions.y/512.0);",
+	  
+	  	"mapCords.y *= -1.0;",
+	 	"mapCords.y += 1.0;",
+
+	 	//RGBA of our diffuse color
+		"vec4 DiffuseColor = texture2D(uSampler, vTextureCoord);",
+
+		//RGB of our normal map
+		"vec3 NormalMap = texture2D(displacementMap, mapCords).rgb;",
+
+		//The delta position of light
+		//"vec3 LightDir = vec3(LightPos.xy - (gl_FragCoord.xy / Resolution.xy), LightPos.z);",
+		"vec3 LightDir = vec3(LightPos.xy - (mapCords.xy), LightPos.z);",
+		//Correct for aspect ratio
+		//"LightDir.x *= Resolution.x / Resolution.y;",
+
+		//Determine distance (used for attenuation) BEFORE we normalize our LightDir
+		"float D = length(LightDir);",
+
+		//normalize our vectors
+		"vec3 N = normalize(NormalMap * 2.0 - 1.0);",
+		"vec3 L = normalize(LightDir);",
+
+		//Pre-multiply light color with intensity
+		//Then perform "N dot L" to determine our diffuse term
+		"vec3 Diffuse = (LightColor.rgb * LightColor.a) * max(dot(N, L), 0.0);",
+
+		//pre-multiply ambient color with intensity
+		"vec3 Ambient = AmbientColor.rgb * AmbientColor.a;",
+
+		//calculate attenuation
+		"float Attenuation = 1.0 / ( Falloff.x + (Falloff.y*D) + (Falloff.z*D*D) );",
+
+		//the calculation which brings it all together
+		"vec3 Intensity = Ambient + Diffuse * Attenuation;",
+		"vec3 FinalColor = DiffuseColor.rgb * Intensity;",
+		"gl_FragColor = vColor * vec4(FinalColor, DiffuseColor.a);",
+		//"gl_FragColor = vec4(1.0, 0.0, 0.0, Attenuation);",//vColor * vec4(FinalColor, DiffuseColor.a);",
+	/*
+	 	// normalise color
+	 	"vec3 normal = normalize(nColor * 2.0 - 1.0);",
+	 	
+	 	"vec3 deltaPos = vec3( (light.xy - gl_FragCoord.xy) / resolution.xy, light.z );",
+
+	 	"float lambert = clamp(dot(normal, lightDir), 0.0, 1.0);",
+
+	 	"float d = sqrt(dot(deltaPos, deltaPos));", 
+        "float att = 1.0 / ( attenuation.x + (attenuation.y*d) + (attenuation.z*d*d) );",
+
+        "vec3 result = (ambientColor * ambientIntensity) + (lightColor.rgb * lambert) * att;",
+        "result *= color.rgb;",
+       
+        "gl_FragColor = vec4(result, 1.0);",*/
+
+	  	
+
+	  "}"
+	];
+	
+}
+
+/*
+void main() {
+        //sample color & normals from our textures
+        vec4 color = texture2D(u_texture, v_texCoords.st);
+        vec3 nColor = texture2D(u_normals, v_texCoords.st).rgb;
+ 
+        //some bump map programs will need the Y value flipped..
+        nColor.g = yInvert ? 1.0 - nColor.g : nColor.g;
+ 
+        //this is for debugging purposes, allowing us to lower the intensity of our bump map
+        vec3 nBase = vec3(0.5, 0.5, 1.0);
+        nColor = mix(nBase, nColor, strength);
+ 
+        //normals need to be converted to [-1.0, 1.0] range and normalized
+        vec3 normal = normalize(nColor * 2.0 - 1.0);
+ 
+        //here we do a simple distance calculation
+        vec3 deltaPos = vec3( (light.xy - gl_FragCoord.xy) / resolution.xy, light.z );
+ 
+        vec3 lightDir = normalize(deltaPos);
+        float lambert = useNormals ? clamp(dot(normal, lightDir), 0.0, 1.0) : 1.0;
+       
+        //now let's get a nice little falloff
+        float d = sqrt(dot(deltaPos, deltaPos));       
+        float att = useShadow ? 1.0 / ( attenuation.x + (attenuation.y*d) + (attenuation.z*d*d) ) : 1.0;
+       
+        vec3 result = (ambientColor * ambientIntensity) + (lightColor.rgb * lambert) * att;
+        result *= color.rgb;
+       
+        gl_FragColor = v_color * vec4(result, color.a);
+}
+*/
+PIXI.NormalMapFilter.prototype = Object.create( PIXI.AbstractFilter.prototype );
+PIXI.NormalMapFilter.prototype.constructor = PIXI.NormalMapFilter;
+
+PIXI.NormalMapFilter.prototype.onTextureLoaded = function()
+{
+	
+	this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width;
+	this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height;
+
+	this.uniforms.displacementMap.value.baseTexture.off("loaded", this.boundLoadedFunction)
+
+}
+
+/**
+ * The texture used for the displacemtent map * must be power of 2 texture at the moment
+ *
+ * @property map
+ * @type Texture
+ */
+Object.defineProperty(PIXI.NormalMapFilter.prototype, 'map', {
+    get: function() {
+        return this.uniforms.displacementMap.value;
+    },
+    set: function(value) {
+    	this.uniforms.displacementMap.value = value;
+    }
+});
+
+/**
+ * The multiplier used to scale the displacement result from the map calculation.
+ *
+ * @property scale
+ * @type Point
+ */
+Object.defineProperty(PIXI.NormalMapFilter.prototype, 'scale', {
+    get: function() {
+        return this.uniforms.scale.value;
+    },
+    set: function(value) {
+    	this.uniforms.scale.value = value;
+    }
+});
+
+/**
+ * The offset used to move the displacement map.
+ *
+ * @property offset
+ * @type Point
+ */
+Object.defineProperty(PIXI.NormalMapFilter.prototype, 'offset', {
+    get: function() {
+        return this.uniforms.offset.value;
+    },
+    set: function(value) {
+    	this.uniforms.offset.value = value;
+    }
+});

examples/example 19 - Normal/index.html

@@ -0,0 +1,84 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+
+	<title>Sprite Batch</title>
+	<style>
+		body {
+			margin: 0;
+			padding: 0;
+			background-color: #000000;
+		}
+
+		.rendererView {
+			position: absolute;
+			display: block;
+			width: 100%;
+			height: 100%;
+		}
+	</style>
+	
+	<script src="pixi.js"></script>
+	<script src="../../bin/pixi.dev.js"></script>
+	<script src="NormalMapFilter.js"></script>
+	
+
+</head>
+<body>
+
+	<script>
+	
+	var viewWidth =  500;
+	var viewHeight = 500;
+
+	// Create a pixi renderer
+	var renderer = PIXI.autoDetectRenderer(viewWidth, viewHeight);
+	//renderer.view.className = "rendererView";
+	
+	// add render view to DOM
+	document.body.appendChild(renderer.view);
+
+	// create an new instance of a pixi stage
+	var stage = new PIXI.Stage(0xFFFFFF);
+
+	// create a background texture
+	var pondFloorTexture = PIXI.Texture.fromImage("1223-normal.jpg");
+	// create a new background sprite
+//	var pondFloorSprite = new PIXI.Sprite(pondFloorTexture);
+	//stage.addChild(pondFloorSprite);
+
+	
+	
+	var filter = new PIXI.NormalMapFilter(pondFloorTexture);
+
+	var sprite = PIXI.Sprite.fromImage("heineken-names-small-30262.jpg");//(pondFloorTexture);
+
+	sprite.filters = [filter];
+	stage.addChild(sprite);
+
+
+	var tick = 0;
+	requestAnimationFrame(animate);
+
+	function animate() 
+	{
+		
+		
+		// increment the ticker
+		tick += 0.1;
+		
+		var mouse = stage.interactionManager.mouse
+		//console.log(stage.interactionManager.mouse);
+		filter.uniforms.LightPos.value[0] = mouse.global.x;
+		filter.uniforms.LightPos.value[1] = mouse.global.y;
+		// time to render the state!
+	    renderer.render(stage);
+	    
+	    // request another animation frame..
+	    requestAnimationFrame( animate );
+	}
+
+	</script>
+
+	</body>
+</html>