Light and Normal Maps

[Taleforge]

Hi,

 

this (https://gamedevelopment.tutsplus.com/articles/how-to-learn-the-phaser-html5-game-engine--gamedev-13643) article says "The latest release of Phaser introduced WebGL shader and filter support, and forthcoming ones will implement normal maps so you can benefit from new tools like Sprite Lamp.".

 

I am interested in this normal maps.

1. Is there any example for normal maps working with phaser? 

2. Where is the support on the current roadmap?

[rich]

This has been experimented with in Pixi.js, and as soon as it hits stable in there we will support it in Phaser (as we rely on them adopting it first really). As SpriteLamp isn't yet finished I'm guessing this isn't a high priority for them just yet (plus they've loads of other work to be getting on with!)

[Taleforge]

Thank you rich,

 

I am looking foreward to see some cool light effects in phaser games .

This will be awesome

[semk]

Necro: I'm going to be trying out some normal and lighting attempts myself. 

 

This should be possible even without Phaser/Pixi per this demo:

http://29a.ch/2010/3/24/normal-mapping-with-javascript-and-canvas-tag

 

Also, ATM SpriteLamp is out and on sale on Steam. 

 

Hope to see/share developments!

[Eraph]

I'm very keen to make use of this as well, looks like it'll be in Phaser 3:

 

http://phaser.io/labs/phaser3-development-log-06

[semk]

That's awesome that it will be fully supported and documented in Phaser 3!

 

I found this also, playing around with it and seeing what I can do with it ATM:

 

http://www.html5gamedevs.com/topic/15638-im-having-a-hell-of-a-time-trying-to-get-normalmapfilter-to-work/?hl=normal#entry88695

 

PS: Anyone that can help chime in on how to port this into Phaser, let me know! 

 

EDIT - 

Looks like this needs PIXI 3.0.7 but Phaser 2.4 is using PIXI 2.2.8 :'( 

[wayfinder]

A possible way to do this in Phaser (I've implemented parts of this successfully, but it's a different look than what I'm after so I didn't completely port it. should work though!):

 

- set up 3 fullscreen renderTextures for your diffuse, normals, and lights.

- keep your scenery/actors in one group and the lights in another. lights in this implementation are just sprites.

- in state.preRender, render the appropriate groups to each of the RTs in turn (diffuse/normal -> scenery group, lights -> light group), setting a flag for which pass it is you're currently doing. 

- extend sprites so that they know what pass it is and modify their behaviour to switch out their regular texture for the normal texture when that pass is being done.

- last thing in state.preRender, set your scenery and lights groups to be invisible (i use alpha = 0 but there are other ways) so that they don't get rendered again. all the info you need to display your game are in the renderTextures. 

- in state.render (which is called after the framework's renderer is done), turn them back on for the next frame

- you need to write a normal shader that applies the normals calculations, using your three RTs. This is the part i didn't bother with You can basically crib the calculations from pixi-lights, I think, or there are tutorials on the web otherwise. You need to pass the three RTs to the shader as uniforms (or perhaps it's possible to work on the diffuse directly and only pass the other two). 

 

Here's a sample of what my slightly different technique does:

 

 

Good luck!

[san40511]

What's news guys? Does Phaser support normal maps now? I think it's very important. All modern engines and game frameworks support it.