Light and Normal Maps

Recommended Posts



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?

Share this post

Link to post
Share on other sites

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!)

Share this post

Link to post
Share on other sites

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:




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



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

Share this post

Link to post
Share on other sites

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!

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.