Search the Community

Showing results for tags 'shader'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





Found 133 results

  1. I'm using pixi.js ver 4.8.2. I want access not premultiply color from renderer's shader in pixi.js application. I set transparent is 'notMultiplied' , but I can olny access premultipilied rgb color... Is there way to access not multiplied color ? I put code and result here. // init with not multiply mode var app = new PIXI.Application(800, 600, { backgroundColor : 0xcccccc, transparent: 'notMultiplied' }); document.body.appendChild(app.view); // draw circle graphics with red and alpha 0.5 ( drawn at display left ) var graphic = new PIXI.Graphics(); graphic.alpha = 0.5; graphic.beginFill(0xff0000); graphic.drawCircle(100,100,100); graphic.endFill(); app.stage.addChild(graphic); // use graphics as a texture ( drawn at display right ) var mesh = new PIXI.mesh.Mesh( graphic.generateCanvasTexture() ); mesh.position.set(300,100); app.stage.addChild(mesh); // replace MeshRenderer shader for test premultiply effect app.renderer.plugins.mesh.shader = new PIXI.Shader(, // vertex shader is same as original MeshRender's one ` attribute vec2 aVertexPosition; attribute vec2 aTextureCoord; uniform mat3 projectionMatrix; uniform mat3 translationMatrix; uniform mat3 uTransform; varying vec2 vTextureCoord; void main(void) { gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); vTextureCoord = (uTransform * vec3(aTextureCoord, 1.0)).xy; } `, // I changed change fragment shader for test ` varying vec2 vTextureCoord; uniform vec4 uColor; uniform sampler2D uSampler; void main(void) { //gl_FragColor = texture2D(uSampler, vTextureCoord) * uColor; <- remove gl_FragColor = vec4(texture2D(uSampler, vTextureCoord).rgb, 1.0); } ` ); // render graphics and mesh. app.render(); The execution result Ideal result is like this.
  2. 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 as base and managed to arrive to and now i'm kinda stuck. Anyone can help? TIA
  3. 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.
  4. 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: as well as checked the playground example. 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.
  5. 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
  6. Hi, Is it possible to use your own vertex shader and use the default fragment shader, leke so: shaderMat = new BABYLON.ShaderMaterial("shader-123", scene, { vertexElement: "vertexShaderX", fragmentElement: ???, // Need to use the default shader! }, { attributes: ["position", "normal", "uv", "vUV"], uniforms: ["world", "worldView", "worldViewProjection", "view", "projection"] }); Cheers!
  7. Hi, I'm trying to reproduce ocean shader like this one: 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 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!
  8. 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
  9. Hello i'm exploring the matrix func. inside Babylonjs, a matrix lib can be easy see here : or very hard see here : I kind of understand where the problem occurs, after unsucessfull 3h, i think i might be better to ask the community. Thanks
  10. florentd

    Creating custom filter

    Hello, I'm trying to create a custom Filter in Phaser to make dithering. I used this great resource as a reference: Here is my code (I modified the DotScreenFilter code): PIXI.DotScreenFilter = function() { this ); this.passes = [this]; // set the uniforms this.uniforms = { scale: {type: '1f', value:1}, angle: {type: '1f', value:5}, dimensions: {type: '4fv', value:[0,0,0,0]}, indexMatrix4x4: {type: '16i',value:[0, 8, 2, 10, 12, 4, 14, 6,3, 11, 1, 9,15, 7, 13, 5]} }; this.fragmentSrc = [ 'precision mediump float;', 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', 'uniform vec4 dimensions;', 'uniform sampler2D uSampler;', 'uniform float angle;', 'uniform float scale;', 'uniform int indexMatrix4x4[16];', 'float indexValue() {', 'int x = int(mod(gl_FragCoord.x, 4));', 'int y = int(mod(gl_FragCoord.y, 4));', 'return float(indexMatrix4x4[(x + y * 4)]) / 16.0;', '}', 'float dither(float color) {', 'float closestColor = (color < 0.5) ? 0.0 : 1.0;', 'float secondClosestColor = 1.0 - closestColor;', 'float d = indexValue();', 'float distance = abs(closestColor - color);', 'return (distance < d) ? closestColor : secondClosestColor;', '}', 'void main() {', 'gl_FragColor = vec4(vec3(dither(vColor.a)), 1);', '}' ]; }; PIXI.DotScreenFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.DotScreenFilter.prototype.constructor = PIXI.DotScreenFilter; /** * The scale of the effect. * @property scale * @type Number */ Object.defineProperty(PIXI.DotScreenFilter.prototype, 'scale', { get: function() { return this.uniforms.scale.value; }, set: function(value) { this.dirty = true; this.uniforms.scale.value = value; } }); /** * The radius of the effect. * @property angle * @type Number */ Object.defineProperty(PIXI.DotScreenFilter.prototype, 'angle', { get: function() { return this.uniforms.angle.value; }, set: function(value) { this.dirty = true; this.uniforms.angle.value = value; } }); When I run it, i got these errors: Any ideas what is wrong ?
  11. Is there already a way to make a displacement filter in p3? something like that: would like to use it for explosions (shockwave effect) any idears on implementing this effect into p3.? regards
  12. Fenopiù

    Phaser 2.6.2 & shader vs new iPad

    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?
  13. hi i make this post for share some unexpected experience in shader code you can see a lot but you can fix it easly
  14. See PG 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.
  15. 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.
  16. 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
  17. 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: (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 : 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?
  18. 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)?
  19. I wanted to make a tiled floor in the past. In that case, it was a tool scene to test walking poses, so performance did not matter. It was also to make it easy to count distance. When I tried to do it with a texture, it was always blurry. I just wrote a quick script to make a mesh with a bunch of black squares, and set the clear color of the scene to white. Here is what I got. Now, I would like the same effect & quality for a real scene (no shadows required). Not sure how big each square should be in advance. Needs to be adjustable to try different sizes. Do not want to use white for clear color for scene. Is this a good candidate for a procedural? If so, it seems there a number of variations in the framework & extensions (shaderbuilder). What would you recommend? Here is mesh:
  20. Hi Folks, Just by curiosity, how do we avoid expensive glUseProgram calls internally in Babylonjs? Do we sort meshes by shader so that we can minimize shader changes?
  21. Hello BJS community ! I just began to understand HDR textures, gamma correction and so on in order to learn how to do IBL. In this process, I used BABYLON.HDRCubeTexture to convert my equirectangular HDR texture to a usable environment HDR cubemap, as explained here. Then, I need to apply a convolution on this cubemap to obtain my final irradiance cubemap that I will sample during IBL. To compute my irradiance cubemap from the environment cubemap, I use a RenderTargetTexture. Until there, everything works fine ! In the above tutorial link, the guy uses OpenGL and doesn't matter about having output color exceeding [0..1] range. It's useful to keep HDR textures until the last step where he will tone map its result. I learned the hard way that it's not as simple with WebGL. When I store color outside [0..1] range and then sample this result in another shader, result has been clamped between [0..1] range. This stackoverflow question taught me that not only I need to use a floating point texture but also I have to render to a floating point frame buffer. Or something like that, I never dived into pure WebGL code. To render to a floating point frame buffer, I need to enable the EXT_color_buffer_float extension (only available with WebGL 2), but it doesn't seem to be enough. I think I also need to configure the framebuffer with pure WebGL code. So, my question is: Is is yet possible to render color outside [0..1] range using BabylonJS at this time ? How ? If this not ready yet, I'll normalize and denormalize data at each step of course. But I would love to know if doing it in the ideal way is possible. Thank you a lot in advance !
  22. Nephelococcygia

    Best way to handle Character with shadow

    I was wondering what is the best way to handle shadow for a "character". I made a character and i want to put a shadow at the bottom a kind of "circle" with opacity, for convenience let's say it's gonna be a transparent PNG. The way i can think of : - (1) Just add the sprite to the game, this leads to duplicated calculations in the update part cause i have to update both the "character" sprite and his shadow; - (2) Add the shadow as a child sprite of the "character", this leads to having the shadow on top of the sprite instead of back to it; - (3) Add the "character" sprite as a child of the shadow sprite, this seems not logical, but it works somehow; - (4) Create a group and add both the shadow and the sprite, (havn't test it but most likely) this leads to define specific property to the group for the size, the position and the overflow boundaries for collision relative to the "character" sprite and the shadow; - (5) Using a filter (Shader) applied on the hole game, with my character position as uniform to render the shadow directly on the "groundLayer". What do you think please ? Is there a better way that i am missing ? Thanks.
  23. Hi there - I'm going down a rabbit hole trying to implement a color grading / LUT shader for PIXI. Color grading is where you can you use a sprite as a lookup table to quickly transform one set of colors to another - this is handy for applying realtime contrast and color adjustments. I'm using this as a reference: I've created a filter/shader using the code in the link above: var ColorGradingShader = function(LUTSprite) { var my = this; var code = ` precision lowp float; uniform vec4 filterArea; varying vec2 vTextureCoord; uniform sampler2D uSampler; uniform sampler2D lut; #define MAXCOLOR 15.0 #define COLORS 16.0 #define WIDTH 256.0 #define HEIGHT 16.0 void main() { vec4 px = texture2D(uSampler, vTextureCoord.xy); float cell = px.b * MAXCOLOR; float cell_l = floor(cell); float cell_h = ceil(cell); float half_px_x = 0.5 / WIDTH; float half_px_y = 0.5 / HEIGHT; float r_offset = half_px_x + px.r / COLORS * (MAXCOLOR / COLORS); float g_offset = half_px_y + px.g * (MAXCOLOR / COLORS); vec2 lut_pos_l = vec2(cell_l / COLORS + r_offset, g_offset); vec2 lut_pos_h = vec2(cell_h / COLORS + r_offset, g_offset); vec4 graded_color_l = texture2D(lut, lut_pos_l); vec4 graded_color_h = texture2D(lut, lut_pos_h); vec4 graded_color = mix(graded_color_l, graded_color_h, fract(cell)); gl_FragColor = graded_color; } `;, null, code); my.uniforms.lut = LUTSprite.texture; } ColorGradingShader.prototype = Object.create(PIXI.Filter.prototype); ColorGradingShader.prototype.constructor = ColorGradingShader; export default ColorGradingShader; I then add this to my top level container: //relevant code from a wrapping class this.colorGradingSprite = new PIXI.Sprite.fromImage('/img/lut16.png'); this.pixiContainer.filters = [ this.colorGradingFilter ]; When using any LUT image, including the default without any color adjustments: I go from this: to this: I'm assuming there are some adjustments necessary to either the shader code, or how the lut sprite itself is being loaded - I have no clue.. Any help would be greatly appreciated! And for those curious, here's my end goal: Thanks, Sean
  24. hi, anyone knows why changing the value of "pointSize" doesn't influence the size of points of a shaderMaterial? shaderMaterial.pointsCloud = true; shaderMaterial.pointSize = 10;
  25. I want to draw a lot of spheres with different colors and matrix. Since they all share the same geometry, so using instance draw will be an effective way. Babylon provides a build-in instance mesh with different matrix. But other instance attribute like 'color' seems not support. So I tried to write a custom material, but the documents about custom material/shader seems not support instance drawing. Who can give me an example or any tips on writing a custom instanced material? Thanks.