Search the Community

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; };

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.

Hi , I have problem to pass matrix to uniform variable in shader ! Can anyone tell me what is worng. I try by using "getUniformLocation" but when using this webgl function i get error that i not using current web gl programm. Thanks !!!

var Colorize = function (game) { Phaser.Filter.call(this, game); this.uniforms.uColor= { type: '3f', value: { r: 0.5, g: 0.5, b: 0.5} }; this.fragmentSrc = [ "precision mediump float;", "uniform float uColor;", "void main(void) {", "gl_FragColor.r = uColor.r;", "gl_FragColor.g = uColor.g;", "gl_FragColor.b = uColor.b;", "gl_FragColor.a = 1.0;", "}" ]; }; It works if i pass each color channel as separate value but i can find combination of type and data structure that would do the same in single object

Hi guys. So I'm working on my first shader, which is a glow. Right now it sorta works but the issue is - when I put it on, say, PNG with some shape used as sprite - the shader only works on pixels that included in the PNG so I have to add empty space around shape so my glow doesn't get chopped once it reaches the edge of the texture. How do I allow for more space to be taken by the shader? Like programmatically add empty space around or something like that. I was thinking maybe it's the job for a vertex shader but since I'm a complete noob I can't really think of how to achieve that. I was hoping somebody here can share his knowledge, this seems like a pretty usual task needed for every filter that goes beyond shape's boundaries.

Hello ! I'm currently working on a "fog of war" material : the standard material + a texture to keep track of once-lit areas, and display them later event if they are not illuminated (because of the standard lighting model or shadowgenerator). It would produce the ~same effect as classical real-time strategy games FoW,(with a moving light revealing the model) but based on actual lighting and on arbitrary UV-unwrapped models. However, I can't figure out how to write to a texture : when the shader gl_FragColor rgb component would be different from (0,0,0), it must modify the corresponding point on texture. From what I found, Babylon.js' DynamicTexture can be altered from the js part (as an HTML canvas), and I should rather use a Framebuffer Object, but I don't understand how to create and manage it from Babylon. Sorry if this is a really noob question, any clue or thought is welcome. Thanks for reading this :-)