Showcase:

How to use:

// CorevarGame=require("xnajs/game");varPointer=require("xnajs/input/pointer");varKeyboard=require("xnajs/input/keyboard");varKeys=require("xnajs/input/keys");// GraphicsvarEffect=require("xnajs/graphics/effect");varSpriteBatch=require("xnajs/graphics/sprite-batch");varVertexBuffer=require("xnajs/graphics/vertex-buffer");varIndexBuffer=require("xnajs/graphics/index-buffer");varTexture2d=require("xnajs/graphics/texture2d");varBlend=require("xnajs/graphics/blend");varBlendState=require("xnajs/graphics/blend-state");varRenderTarget2D=require("xnajs/graphics/render-target2d");// ComponentsvarFpsMeter=require("xnajs-components/fps-meter");varmat4=require("xnajs/matrix/mat4");varLighting=Game.extend({initialize:function(){this.base();this.width=1136;this.height=640;this.graphicsDevice.backBufferWidth=this.width;this.graphicsDevice.backBufferHeight=this.height;Keyboard.addKey(Keys.SPACE);Keyboard.addKey(Keys.D);Keyboard.addKey(Keys.Q);Keyboard.addKey(Keys.W);Keyboard.addKey(Keys.A);Keyboard.addKey(Keys.S);this.debug=false;varambient=0.1;this._lights=[];this._ambientLight=[ambient,ambient,ambient,1];this._specularStrength=0.5;// add lightsthis._lights.push({color:[1.0,0.0,1.0,1.0],power:0.8,lightDecay:400,position:[0,0,10],isEnabled:true});this._lights.push({color:[0.2,0.4,1.0,1.0],power:0.4,lightDecay:300,position:[this.width/2,100,10],isEnabled:true});this.newState=null;this.oldState=Keyboard.getState();},loadContent:function(){this.spriteBatch=newSpriteBatch(this.graphicsDevice);this.texture=this.content.load["Texture2D"]("textures/floor_tile_02-1024.jpg");this.textureNormal=this.content.load["Texture2D"]("textures/floor_tile_02-1024_norm.jpg");this.font=this.content.load["SpriteFont"]("fonts/quant.fnt");this.debugFont=this.content.load["SpriteFont"]("fonts/calibri16.fnt");this.width=this.graphicsDevice.backBufferWidth;this.height=this.graphicsDevice.backBufferHeight;this.colorMapRenderTarget=newRenderTarget2D(this.graphicsDevice,this.width,this.height);this.shadowMapRenderTarget=newRenderTarget2D(this.graphicsDevice,this.width,this.height);this.normalMapRenderTarget=newRenderTarget2D(this.graphicsDevice,this.width,this.height);this.pointLightEffect=newEffect(this.graphicsDevice,require("./shaders/deferred-pointlight.fx"));this.lightCombinedEffect=newEffect(this.graphicsDevice,require("./shaders/deferred-combined.fx"));this.fpsMeter=newFpsMeter();},update:function(gameTime){// Tweak parametersthis.newState=Keyboard.getState();// Is the SPACE key down?if(this.newState.isKeyDown(Keys.SPACE)){//key has just been pressed.if(!this.oldState.isKeyDown(Keys.SPACE)){this._lights.push({color:[Math.random(),Math.random(),Math.random(),1.0],power:(Math.random()*10+1)*0.1,lightDecay:Math.random()*300+100,position:[Math.random()*this.width,Math.random()*this.height,80],isEnabled:true});}}// Is the SPACE key down?if(this.newState.isKeyDown(Keys.D)){//key has just been pressed.if(!this.oldState.isKeyDown(Keys.D)){this.debug=!this.debug;}}if(this.newState.isKeyDown(Keys.Q)){varambient=this._ambientLight[0];ambient-=0.05;ambient=Math.max(0,ambient);this._ambientLight=[ambient,ambient,ambient,1];}if(this.newState.isKeyDown(Keys.W)){varambient=this._ambientLight[0];ambient+=0.05;ambient=Math.min(1,ambient);this._ambientLight=[ambient,ambient,ambient,1];}if(this.newState.isKeyDown(Keys.A)){this._specularStrength-=0.05;this._specularStrength=Math.max(0,this._specularStrength);}if(this.newState.isKeyDown(Keys.S)){this._specularStrength+=0.05;this._specularStrength=Math.min(10,this._specularStrength);}// Update saved state.this.oldState=this.newState;this._lights[0].position[0]=Pointer.items[0].x;this._lights[0].position[1]=Pointer.items[0].y;light=this._lights[1];light.position[0]=Math.sin(gameTime.totalGameTime/1000)*this.width/4+this.width/2;light.position[1]=Math.cos(gameTime.totalGameTime/1000)*this.height/4+this.height/2;this.fpsMeter.update(gameTime);},draw:function(gameTime){if(!this.content.isReady){return;}this.graphicsDevice.clear([100/255,149/255,237/255,1]);// Set the render targetsthis.graphicsDevice.setRenderTarget(this.colorMapRenderTarget);// Clear all render targetsthis.graphicsDevice.clear([0,0,0,0]);this.drawColorMap();this.graphicsDevice.setRenderTarget(null);this.graphicsDevice.setRenderTarget(this.normalMapRenderTarget);// Clear all render targetsthis.graphicsDevice.clear([0,0,0,0]);this.drawNormalMap();// Deactive the rander targets to resolve themthis.graphicsDevice.setRenderTarget(null);this.generateShadowMap();this.graphicsDevice.clear([0,0,0,1]);// Finally draw the combined Maps onto the screenthis.drawCombinedMaps();this.drawDebugRenderTargets(this.spriteBatch);this.drawDebugInformation();},drawColorMap:function(){this.spriteBatch.begin();this.spriteBatch.draw(this.texture,[0,0]);this.spriteBatch.end();},drawNormalMap:function(){this.spriteBatch.begin();this.spriteBatch.draw(this.textureNormal,[0,0]);this.spriteBatch.end();},generateShadowMap:function(){this.graphicsDevice.setRenderTarget(this.shadowMapRenderTarget);this.graphicsDevice.clear([0,0,0,1]);for(vari=0;i<this._lights.length;i++){varlight=this._lights[i];if(!light.isEnabled){continue;}this.pointLightEffect.apply();this.pointLightEffect.parameters["lightStrength"].setValue(light.power);this.pointLightEffect.parameters["lightPosition"].setValue(light.position);this.pointLightEffect.parameters["lightColor"].setValue(light.color);this.pointLightEffect.parameters["lightDecay"].setValue(light.lightDecay);this.pointLightEffect.parameters["specularStrength"].setValue(this._specularStrength);this.pointLightEffect.parameters["screenWidth"].setValue(this.width);this.pointLightEffect.parameters["screenHeight"].setValue(this.height);this.pointLightEffect.parameters["NormalMap"].setValue(this.normalMapRenderTarget);this.pointLightEffect.parameters["ColorMap"].setValue(this.colorMapRenderTarget);this.spriteBatch.begin(null,this.pointLightEffect);vargl=this.graphicsDevice.gl;gl.enable(gl.BLEND);gl.blendFuncSeparate(gl.ONE,gl.ONE,gl.SRC_ALPHA,gl.ONE);gl.blendEquationSeparate(gl.FUNC_ADD,gl.FUNC_ADD);this.spriteBatch.draw(this.normalMapRenderTarget,[0,0]);this.spriteBatch.end();}this.graphicsDevice.setRenderTarget(null);},drawCombinedMaps:function(){this.lightCombinedEffect.apply();this.lightCombinedEffect.parameters["ambient"].setValue(1);this.lightCombinedEffect.parameters["lightAmbient"].setValue(4);this.lightCombinedEffect.parameters["ambientColor"].setValue(this._ambientLight);this.lightCombinedEffect.parameters["NormalMap"].setValue(this.normalMapRenderTarget);this.lightCombinedEffect.parameters["ColorMap"].setValue(this.colorMapRenderTarget);this.lightCombinedEffect.parameters["ShadingMap"].setValue(this.shadowMapRenderTarget);this.spriteBatch.begin(Blend.ALPHA_BLEND,this.lightCombinedEffect);this.spriteBatch.draw(this.colorMapRenderTarget,[0,0]);this.spriteBatch.end();},drawDebugRenderTargets:function(spriteBatch){if(!this.debug){return;}spriteBatch.begin();varscale=[1/3,1/3];spriteBatch.draw(this.colorMapRenderTarget,[0,this.height-this.height/3],null,null,0,scale,null);spriteBatch.draw(this.normalMapRenderTarget,[this.width/3,this.height-this.height/3],null,null,0,scale,null);spriteBatch.draw(this.shadowMapRenderTarget,[this.width/3*2,this.height-this.height/3],null,null,0,scale,null);spriteBatch.end();},drawDebugInformation:function(){varlines=["xna.js","fps: "+this.fpsMeter.fps,"x: "+Pointer.items[0].x+", y: "+Pointer.items[0].y,"lights: "+this._lights.length,"Press SPACE to add light","Press D to toggle debug","Q,W: Ambient light: "+this._ambientLight[0].toPrecision(2),"A,S: Specular strength: "+this._specularStrength.toPrecision(2)];this.spriteBatch.begin();for(vari=0;i<lines.length;i++){this.spriteBatch.drawString(this.debugFont,lines[i],[10,10+this.debugFont.lineHeight*i]);}this.spriteBatch.end();}});

varLighting=require('./lighting');document.addEventListener('DOMContentLoaded',main,false);functionmain(){vargame=newLighting('#game');game.run();}

License