Search the Community

Showing results for tags 'shader'.



More search options

  • 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

Found 146 results

  1. 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 something obvious, and that it should work as I'm expecting. I have a playground setup to demonstrate the issue. Ignore the ugliness of the assets, it gets the point across better https://www.pixiplayground.com/#/edit/0ZaLP0UrUIPKfyHU_S3-o In the photo attached, the desired result is on the left (from Photoshop Color BlendMode). The right is the result from the playground. You can tell that the grayscale area on the right is much larger, since I believe that any alpha that is NOT 0, it being set to 1. I would like to try and maintain the alpha from the original blurred PNG. It may not seem like much but it really kills what I'm going for with the aliased edge like that. Thank you!
  2. 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?
  3. 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?
  4. 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.addAttribute('aVertexColor', newColors) Error: Cannot read property 'updateID' of undefined; originating from GeometrySystem.updateBuffers.
  5. 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.y) * waveLength); vec3 newPosition = position; gl_Position = projectionMatrix * modelViewMatrix * vec4( position.x, position.y, sin(uTime*0.4 + (position.y) * vWave), 1.0 ); } Vertex in PixiJS: attribute vec2 aVertexPosition; uniform float time; uniform float waveLength; uniform mat3 projectionMatrix; uniform mat3 translationMatrix; varying vec2 vTextureCoord; uniform vec4 inputSize; uniform vec4 outputFrame; void main(void) { vec2 position = aVertexPosition * max(outputFrame.zw, vec2(0.)) + outputFrame.xy; lowp float vWave = sin(time*0.1 + (position.y) * waveLength); //vWave = clamp(vWave, 0.6, 1.); gl_Position = vec4((projectionMatrix * vec3(position, 1.0)).xy, 0.0 , 1.0); vTextureCoord = aVertexPosition * (outputFrame.zw * inputSize.zw); gl_Position = vec4((projectionMatrix * vec3(position.x, position.y, 1.0)).xy, 0.0 , vWave); } Any idea how to solve it? Thanks in Advance.
  6. 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 without success (I have no Idea what those do). Some time after I tried to use gl_fragCoord directly like this: vec2 coord = gl_FragCoord.xy / dimensions.xy; wich seems to do the trick but the texture comes out flippled. Im sure it can be fixed but I don't think this is a good path to follow. Right? Any hint would be much appreciated Thanks
  7. 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; const float PI = 3.1415926535; varying vec2 vTextureCoord; uniform sampler2D uSampler; uniform vec2 iResolution; uniform float iTime; uniform vec2 pos; vec4 limitVision(vec2 st, vec2 pos, float radius){ float pct = 1. - smoothstep(0., radius ,distance(st,vec2(pos))); return vec4(pct); } vec4 norctunalVision(vec2 st, vec2 pos){ vec4 col = limitVision(st, pos, .2); vec4 tex = texture2D(uSampler,st); vec4 result = mix(col,tex,col.a); vec4 tex2 = texture2D(uSampler,st); //sampler texture again for out of vision effect tex2.rgb /= 5.; // Alter color result = mix(result,tex2,1. - col.a); //Mix them together return result; } void main(){ vec2 uv = vTextureCoord; vec4 col = norctunalVision(uv, pos); gl_FragColor = col; } Are there any difference between filter of PIXI(4.5.4) inside RMMV and standalone PIXI(5.2) or some kind of matrix calculation for them? EDIT: Just downgrade my standalone PIXI 5.2 down to 4.5.4 and have same issue, so this maybe a PIXI issues not by rpg maker mv -------- So what difference between the vTextureCoord or some matrix calculation between PIXI 4.5.4 and 5.2?
  8. 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!
  9. jkm

    Color palette Filter

    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.
  10. 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(program, "c.color") and create a uniform with appropriate gl.uniform4f(location, /* bunch of values*/), but can I do something similar via the existing filters means? Relevant part of my Js code looks like this: //Define base filter class for our future shaders/filters PIXI.filters.CustomFilterBase = class CustomFilterBase extends PIXI.Filter { constructor({ vertexSrc = null, fragmentSrc = null, uniforms = {}, enabled = true, debug = false, name = null } = {}) { if(debug && fragmentSrc !== null) { fragmentSrc = "#define DEBUG \r\n" + fragmentSrc; } //Add dimensions for scaling uniforms.dimensions = { type: 'vec2', value: { x: 0.0, y: 0.0 } }; super(vertexSrc, fragmentSrc, uniforms); name ? this._name = name : this._name = "CustomFilterBase"; this.autoFit = false; this.enabled = enabled; } apply(filterManager, input, output) { this.uniforms.dimensions.x = input.sourceFrame.width; this.uniforms.dimensions.y = input.sourceFrame.height; // draw the filter... filterManager.applyFilter(this, input, output); } } //Shader for prototyping and testing PIXI.filters.TestFilter = class TestFilter extends PIXI.filters.CustomFilterBase { constructor() { let fragmentSrc = document.getElementById('fragShader').innerHTML; let uniforms = { //What do I do here?! c: { type: 'vec4', //Judging by GLSL_SINGLE_SETTERS, only GLSL's primitives are recognized value: new Float32Array([0.0, 1.0, 0.0, 1.0]) } }; super({ vertexSrc: null, fragmentSrc: fragmentSrc, uniforms: uniforms, name: 'testfilter' }); } } (using pixijs v4.8.7) The expected result is green screen, as it is if I declare c as vec4 in shader code, but alas the screen is black, hinting on c's value being default constructed / not properly assigned Any help is appreciated, cheers! P.S. I tried to find similar cases from this forum and stackoverflow, but it seems that few people use structs in GLSL code. P.P.S. If it is of any help, I found that PIXI.glCore.shader removes specific characters from uniform's name (which looks like a hotfix rather than a feature) and that in fact one of iterations uniformData's name is 'c.color'. /** * Extracts the uniforms * @class * @memberof PIXI.glCore.shader * @param gl {WebGLRenderingContext} The current WebGL rendering context * @param program {WebGLProgram} The shader program to get the uniforms from * @return uniforms {Object} */ var extractUniforms = function(gl, program) { var uniforms = {}; var totalUniforms = gl.getProgramParameter(program, gl.ACTIVE_UNIFORMS); for (var i = 0; i < totalUniforms; i++) { var uniformData = gl.getActiveUniform(program, i); var name = uniformData.name.replace(/\[.*?\]/, ""); //<----- Here it is!! var type = mapType(gl, uniformData.type ); uniforms[name] = { type:type, size:uniformData.size, location:gl.getUniformLocation(program, name), value:defaultValue(type, uniformData.size) }; } return uniforms; };
  11. How can i recreate this soft gradient color and animate it?
  12. 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.
  13. 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.
  14. 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?
  15. 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?
  16. 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( app.renderer.gl, // 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.
  17. 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
  18. 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.
  19. 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.
  20. 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
  21. 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!
  22. 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!
  23. 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
  24. 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
  25. Hello, I'm trying to create a custom Filter in Phaser to make dithering. I used this great resource as a reference: http://alex-charlton.com/posts/Dithering_on_the_GPU/ Here is my code (I modified the DotScreenFilter code): PIXI.DotScreenFilter = function() { PIXI.AbstractFilter.call( 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 ?