Running normal maps on Pixi.js

[Kristian]

Hello, I would really like to use normal maps in pixi.js but I don't know how. I've came across a good example with THREE.js and using webgl shaders - clickOnDemo (sometimes it's necessary to click once on the image to work). So I really wanted to replicate it but using pixi, I gave it a shot aand black screen - myDemo . I don't get errors and I'm not sure what I'm doing wrong. Could the problem be  in the way I'm creating the mesh? I've checked other example from pixi's page in which shader with heightmap is used on a mesh and works perfectly fine - pixiExample. I'll be very grateful if I get this normal map thing working.

[ivan.popelyshev]

Here you go:

https://codepen.io/ivanpopelyshev/pen/jOWLjKd

Serious problems:

1. I converted uniforms to pixi format

2. cant just specify 'uvs' if you use default pixi vertex shader, according to source it needs aVertexPosition and aTextureCoord.

3. its better to use aTextureCoord in frag shader instead of gl_FragCoord and resolution

Sugar

1. use pixi interaction instead of document mousemove. works when mouse is above mesh. In case you move mesh I added getLocalPosition (aka toLocal). If you want it to work even not above mesh, subscribe on "renderer.plugins.interaction" , not mesh. You can subscribe on stage , but stage might have not all screen. If you have background - stage will work of course

2. width/height specified in start of doc

What I didnt do:

1. this demo needs margin:0 padding:0 overflow:none for body css, as always for fullscreen rendering apps

For tasks like this its better if you clone pixi repo , open it in separate IDE window and search for classes that you use (i hope you know shortcut) . Its close to webgl calls and you should see how things are stored and then converted to webgl operations.

[Kristian]

Thank you very much!!! About the serious problems, I'm a newbie when it comes to shaders  and webgl but slowly I hope I'll get the hang of them.  I didn't setup properly the project with width, height and  margins because I was focused on just getting the normal map to work. Anyway thank you again for your time and advice. ?

[ivan.popelyshev]

This forum has the biggest collection of Q&A about pixi, and we have neither book neither full guide on all pixi features, we dont have catalogue on mix pixi/webgl demos. PixiJS is 8 years of experience of how to make webgl on 2d. Of course both webgl knowledge (look at webglfundemantals!!!) and knowledge of Adobe Flash helps a lot when you go through our codebase.

What I like about your question is that you are one of first guys who settled for mesh&shader solution instead of usual Filters, that means our docs are better now than a year ago