Jump to content

Search the Community

Showing results for tags 'shader'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

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

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Website URL


Twitter


Skype


Location


Interests

  1. Hello. I'm trying to make a filter to transition between the current texture of a Sprite and a new one. I've put together a barebones example here: https://www.pixiplayground.com/#/edit/KozVneSNjCuVZKi_fgNJa When you click on the blue sprite, a filter is applied. Currently, this filter takes a new texture as uniform and uses it to sample the fragment color (I have removed all the blending code to make it clearer). And it seems as this texture is being upscaled? Both textures have the same size. As a reference, I have added a second sprite with the new texture being applied.
  2. I'm looking to generate a basic grid using a shader, and I've came across this Codepen which fits what I'm looking for. Only issue is: it's using Pixi v3, I've been looking into the documentation to port this code to work for a v5 filter, with no success so far. I'm still in the process of learning about shaders and filters, and the original code is already 2 versions outdated. Any help would be greatly appreciated. Cheers!
  3. Hi everyone, I have recently been learning to code and currently am creating a 2d game using PIXI v5. I want to implement some interactive shadows, based on different light points on the map(lights) or "above" the map(sunlight). I still have a lot to learn about Webgl and the insides of PIXI, and I got some questions about some different approaches. I noticed that there is a plugin, PIXI lights, but unfortunately it does not work with PIXI v5. On different forums and tutorials I encountered some shader ideas that create a shadow of particular objects. This works perfe
  4. Hey! I'm trying to make calculations in a shader, and use all 4 channels, but unfortunately the alpha channel does not work as expected. I was thinking that if I will set gl.blendFunc(gl.ONE, gl.ZERO) then the output should be only just the source, without any blending, but it's not. So I have tried to combine it also with premultipling alpha (and keep gl.blendFunc(gl.ONE, gl.ZERO)), I get sort of closer results to the expected, but still behaviour is strange. In the demo below I'm just filling mesh with one color, and console.log values of the first pixel, was expecting [25, 178
  5. Hi all, i've been messing with something for a couple days. I'm passing in a transparent blurred PNG to a shader, as well as a solid PNG background, and running it through a grayscale shader. If I simply display the pixels of the blurred PNG, it is output on top of the solid background as expected. The grayscale part of the shader works fine. However, the grayscale portion of the photo has a harsh transition to the background. It doesn't fade nicely and follow the alpha of the blurred PNG, like a blendMode would. I realize they are different things, but I feel like I am missing somet
  6. I have a `PIXI.Container()` I apply a shader/filter to using `container.filters = [filter]`. Documentations says, to remove a filter, just set `container.filters = null`. This works, but it's kind of a hard cut, when the image/sprite inside of the container is still visible, hence my question: Can I remove a filter with a kind of fade/transition?
  7. Hey. I would like to know about drawCalls and their optimization. For example, there is an atlas, one of the pictures with additive blending mode. - Can we do it all in 1 drawCall. (If possible, explain why it is impossible and how it would be possible). The second question, is the developer Yggdrasil in his games uses sequence, an atlas filled with sequences. My developers said that the sequence in Pixi js is bad, and it is better not to use them because of optimization. But Yggdrasil normally uses them and is not afraid of it. Do they use webgl instances? with vertex shader? Can you tell me?
  8. I'm trying to create a mesh that consists of a few dozen triangles that are going to change every frame (hopefully performs okay....) How do I actually do that though? Create mesh: const shader = Shader.from(vertexSrc, fragSrc) const geometry = new Geometry() .addAttribute('aVertexPosition', [initialVerts]) .addAttribute('aVertexColor', [initialColors]) const mesh = new Mesh(geometry, shader, null, DRAW_MODES.TRIANGLES) Attempt at changing aVertexPosition and aVertexColor each frame: mesh.geometry.addAttribute('aVertexPosition', newVertices) mesh.geometry.addAttr
  9. Hey, I'm trying to translate a very simple Shader from ThreeJs to PixiJs, but I'm struggling to figure out how I can convert this parameter to PixiJS: gl_Position = projectionMatrix * modelViewMatrix * vec4( position.x, position.y, sin(uTime*0.4 + (position.y) * vWave), 1.0 ); Here is the Example in ThreeJs: ( https://jsfiddle.net/Noturnoo/sn6q3pfk/5/ ) And here's my result in Pixi: ( https://jsfiddle.net/Noturnoo/d6pgmsk5/ ) Vertex in Three: uniform float uTime; uniform float waveLength; varying vec2 vUv; void main() { vUv = uv; lowp float vWave = sin((position
  10. Hi guys! I'm trying to figure out how to apply some custom frag shader into a filter. The intented effect is a simple crt warp over a sprite. Here is what I got so far: https://jsfiddle.net/djq6kjx4/1/ but It should look something like the image in the attachment. As you can see from the example above the warp effect is mostly visible to one corner. Now I'm starting with shaders but I think the reason is that vTextureCoord is somehow off? I tried to use the mapCoords and unmapCoords from https://github.com/pixijs/pixi-filters/blob/master/src/pixelate/pixelate.frag similarly
  11. Hi, so currently i'm working on personal game with RPG Maker MV and i'm trying to recreate vision limitation with shader, some thing like this This example is created with PIXI 5.2 and working with mouse position After this i'm went back to RPG Maker MV(Using Pixi 4.5.4) and use the shader code, alter it a bit and got it's kinda working with position (0,0) But when I change to position (0.5,0.5) - hopefully the light will go to center of the screen it got offset like this: This is what I come up with shader code for this effect precision mediump float; c
  12. 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 b
  13. Hello. I'm making example filter with custom fragment shader. This is what I have in terms of shader code so far: //fragShader struct SomeInfo { vec4 color; }; uniform SomeInfo c; void main() { gl_FragColor = c.color; } The idea is to (eventually) make c into an array of Infos, which would be then operated on by the shader. What I'm struggling with is the definition of filter: how do I declare the uniform to be of type SomeInfo in Js code? I assume in plain WebGL, I'd have to bind uniform location (of c's property) by calling gl.getUniformLocation(progra
  14. How can i recreate this soft gradient color and animate it?
  15. 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
  16. 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.
  17. 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?
  18. I've made a simple shader that uses cubemaps, it renders flawlessly in PC but it has AA problems in a highend mobile device. Any idea about what could be happening?
  19. 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 a
  20. 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
  21. 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.
  22. 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 cr
  23. 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
  24. 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!
  25. 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 appreci
×
×
  • Create New...