Website URL

Twitter

Skype

Location

Interests

This isn't fully pixi related, but I'm looking to swap colors, limit color palette in images. I've had some success blindly painting color palettes and using Color Map Filter but I have no idea how it actually works.
Can someone point me in the right direction? How would I go about making a color palette that for example limits image's colors to 32 given ones?
https://pixijs.io/pixi-filters/docs/PIXI.filters.ColorMapFilter.html
I was able to copy some shaders from shadertoy that also manipulate colors, but for my use case dynamically calculated/painted color map seems like the best solution.

Here's a helper function I made to create each shader plugin with just a simple function call like this:
createShaderPlugin(name, vertShader, fragShader, uniformDefaults);
Then you can create each sprite that you want to be drawn with your custom shader like this:
var sprite = createShaderPluginSprite(name, size, uniforms);
Update: I started a GitHub repo for it here if you want to check it out.
I also made this little CodePen to demonstrate the usage with some comments.
The encapsulated code is based on the plugin example and on the worldTransform/vertices calculations that I boosted from PIXI.Sprite. I've tried to optimize and condense for the use case where the Sprite doesn't have any Texture to be filtered.

Hi all,
I was wondering if it was possible to access variables from a previous pass in the shader, i.e color of fragment or something along those lines.
I want to have something that changes color over time after an event occurs. So if I can access a time delta plus a previous color then I can slowly modify it to a new state, is this possible?
*Note this is my first time working with shaders, please excuse any stupid questions 😕
Thanks.

In phaser 2, I applied to an image two filters to make a blurred image (Blur X and Blur Y, with the two of them a complete Blur). I wanted to use the same filter system to apply this two shaders, but I don't find the filter class anywhere. But I found the Pipeline system, so I combined both blurs and made this complete blur shader. Everything fine now.
My questions are... There is some way to apply two pipelines in one image/sprite? and, There is an alternative for filters in phaser 3?

Hello and first of all sorry for the noob question.
I am trying to convert this THREEjs shader to Babylon to no avail.
I used https://www.babylonjs-playground.com/#DAC1WM as base and managed to arrive to https://www.babylonjs-playground.com/#DAC1WM#1 and now i'm kinda stuck.
Anyone can help?
TIA

Hello Community,
Can anyone help me to find out the best shader editor for Babylon, I had found that ShaderFrog provides shader editor but it is targetting another engine, I would like to add it for BabylonJS.
Also please provide me some document reference to create a shader for WebGL, as I am a new learner for WebGL Shader and want to use in my App.

Hi,
I’m new in Babylon.js, and trying to use it to create geometry that has animated vertices and an animated procedural texture.
I’m animating the vertices in the vertex shader.
For the procedural texture, I tried to follow the instructions: https://doc.babylonjs.com/how_to/how_to_use_procedural_textures
as well as checked the playground example. https://www.babylonjs-playground.com/#24C4KC#17
the problem with the example is that i can’t really find a complete implementation with the shader/config.json files.
And i have a couple of basic questions as well.
When creating a custom procedural texture with an external folder with the config.json and custom.fragment.fx files, is that the only fragment shader that can be used in the scene?
Or can a BABYLON.ShaderMaterial be used additionally?
I'm having a hard time grasping the concept of a ’fragment shader’ procedural texture VS a fragment shader as the last step of the webgl pipeline.
Thanks.

Which is the best way to paint the canvas with an input Fragment shader using BABYLON? Not a mesh but directly the canvas itself.
I could set up an ortographic camera and a plane in front of it, but that's... just bad.
Thanks in advance

Hi,
I'm trying to reproduce ocean shader like this one: https://jbouny.github.io/fft-ocean/#day
I know we have waterMaterial in Babylon (which is gorgeous!) but not quite what I'm after: it only works with windForce/windDirection which looks like you're constantly moving or as if water is constantly flowing.
I've tried to use shader which you can find at https://github.com/jbouny/fft-ocean but it's just waaaay over my head!
First of all, I can't figure out how to split it into vertex/fragment shaders to use in Babylon.
Any shader/GLSL gurus out there, any help hugely appreciated!

I am trying to implement an "Additive Shader" (from space shooter tutorial) where BLACK pixels are transparent (or do NOT ADD) and the rest of color add on top...
Do we (BabylonJS Community) has a shader already that does something like that???
if not, i will have to make one... I tried to start off by just return a transparent color:
void main(void)
{
gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0);
}
I have "needsAlphaBlending = true" on shader material options object
BUT I STILL SEE BLACK SQUARE (I little less bright , but still there)...
I would assume that setting a color rgba (0,0,0,0) would make EVERY pixel transparent... But it is not.
Any help or info would be very kool

Hello i'm exploring the matrix func. inside Babylonjs, a matrix lib can be easy
see here : http://glmatrix.net/docs/module-mat4.html
or very hard see here : https://doc.babylonjs.com/api/classes/babylon.matrix
I kind of understand where the problem occurs, after unsucessfull 3h, i think i might be better to ask the community.
Thanks
https://www.babylonjs-playground.com/#Y7Q181

Is there already a way to make a displacement filter in p3?
something like that: https://pixijs.io/examples/#/filters/displacement-map.js
would like to use it for explosions (shockwave effect)
any idears on implementing this effect into p3.?
regards

Good morning everyone!
I use a shader in my game who create a starfield and then, after a while, it slowly disappear from the center to all the screen.
On every device I've tested (pc, Android, iPhone 5c, first iPad, Mac book pro, ecc...) it work as I want.
In the new iPad the whole in the center, instead of be "trasparent" or "invisibile", it is total black.
Anyone have a clue to solve this?

See PG http://www.babylonjs-playground.com/#VFQCJR and take a look at console errors.
Unable to compile effect:
What I'm trying to do here is have the diffuse texture apply to the first set of UVs and the emissive texture apply to the second set of UVs (using emissiveTexture.coordinatesIndex = 2).
I'm not sure if I'm doing this right (I couldn't find much documentation) or if it's a bug.

I was unable to transform mesh instance if the original mesh had a shader material. Is this a bug?
I have created a playground example using box mesh. If you open the debug -> mesh panel, you realize there are 6 meshes, but only 5 are displayed. This is because one of the instances in the second row was not transformed properly. On the other hand, clones of meshes with shader material can be transformed properly.
https://playground.babylonjs.com/#B2NZ1M#1

Hello,
Is there a way to access the texcoord1 in the shader as an attribute? I know I can access texcoord0 using attribute vec2 uv; but uv0/uv1/uv2 etc don't seem to do anything. This is trivial for using lightmaps

Hi guys!
Since I use BJS, I always be kind of stucked with lightmap blending with my materials. I was working on standard workflow, but now I'm testing PBR, I have still the same issue, so this thread to understand deeper the blocking factor.
I never succeeded to get (basically) the same render from my 3D lighting scene to BJS, after many many tests
So I consistently had to tweak my hundred of lightmaps files in Photoshop to increase contrast/luminosity. These lightmaps could came from the usuals RenderToTextures passes from 3D softwares:
3DSMax & VRay, from a RawTotalLighting pass
Blender & Cycles, from a Diffuse Direct & Indirect pass
Having to manually tweak these lightmaps cause me to lighting my scenes in a blind way (which is of course very annoying), and to not have a WYSIWYG workflow (like: tweak a lightmap > save > reload BJS scene > retweak > etc).
So here a test scene to discuss about: http://www.babylonjs-playground.com/#59ZXVF#11 (sources) (here the lightmap of the room).
You can easily switch or add lightmap mode using the line 32, default here is lightmap file set in lightmapTexture as shadowMap.
Because I'm a devianted person, I wanted to compare with another engine, so I made a scene on https://playcanv.as/b/OuZIGpY0/ : here you can see that my white data on my lightmaps files are read in a better way, they burn materials a little ; I think dark data are darker too. (note that PlayCanvas allow to send HDR files and convert them to RGBM, giving an interesting result, but in the link above I used the exactly same png file than in BJS, of course). And the result is totally satisfying.
So, have I missed a magic parameter? Is the shader need a little tweaking? Is my workflow totally wrong? How do you personally deal with lightmaps?

Hi!
I did a Game Jam recently, our group used the p5 library because someone suggested it to us, and indeed it helped us develop an ok prototype in a short amount of time. The game wasn't perfect at all of course, because 48 hours is still really short, but one of the main flaws that bothered me was the graphic integration; our graphistes liked working with pixel art, and we used a tileset to create the background map, which didn't tile right, with grey line appearing between tiles; on top of that, the other sprites didn't look nice at high resolution either, because of linear filtering.
After the Jam ended, I decided to try to fix these. I found the way to activate nearest filter in p5, which made the graphics look way better, but still not as nice as I wanted it to be. After googling a bit, I found this article, which was exactly what I was looking for. Then I noticed... in order to use shaders, I needed to switch the context to WebGL, which meant changing most of the code. This didn't actually bother me, so I started working on it, it was quite a nightmare (because of p5's bugs and lacks of integration...) but when I got to the point where I had basically the same game then before, but switched to a WebGL context (without the shaders), I noticed HUGE performance drops (I'm talking 10 FPS for displaying something 400 sprites in a 500 * 500 context!!!). That's when I decided that I needed to switch to a different library.
A little more googling later, I opted for the PIXI library, which, I must agree, is a nice library to work with, even though the official documentation is lacking a bit of informations. I started recoding the game from scratch once again, and as soon as I could draw the map on screen, I tried to implement the pixel art shader; I copy-pasted the code and... Magic! It didn't work. I was actually not that surprised, and decided to play around with the GLSL to see where the problem was. That's when I started noticing strange things: weird texture offsets that I tried to adjust for manually, which didn't work because the offset changed depending on the scaling of the image... and then the texture itself, scaling itself up and down when I scaled the sprite... After a while and thanks to more googling, I found out that Pixi did some pre-processing on both the texture and the texture coordinates which were passed to the fragment shaders. I tried adjusting for it, I tried a lot, I got close, but it's still really messy, and float precision starts doing strange things that makes the textures look even worst then before.
That's where I am now. I tried searching for others libraries, but most of them seemed to be either 3D libraries, or probably as weak as p5, so I'm here to ask, is there a good library that I can work with which won't bring me such problems? Or is there something I can do to fix my problem with PIXI? Or should I just resort to using webGL without any additional library (which at this point seems like the best solution to me)?