Jump to content

Running normal maps on Pixi.js


Recommended Posts

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.

Link to comment
Share on other sites

Here you go:


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


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.

Link to comment
Share on other sites

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. ?

Link to comment
Share on other sites

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

Link to comment
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.
  • Create New...