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

function QuantizeFilter() { var vertexShader = null; //Doesn't actually quantize, just testing. var fragmentShader = [ 'precision mediump float;', '', 'varying vec2 vTextureCoord;', '', 'uniform vec4 dimensions;', //This is the variable. 'uniform vec3 palette[3];', 'uniform sampler2D uSampler;', '', 'void main(void)', '{', ' gl_FragColor = vec4(0.5, 0.5, 0.5, 1.0);', '}' ].join('\n'); var uniforms = { dimensions: { type: '4fv', value: new Float32Array([0, 0, 0, 0]) }, palette: { type: '3fv', value: [ [255.0, 255.0, 255.0], [200.0, 200.0, 200.0], [0.0, 0.0, 0.0] ] } }; PIXI.AbstractFilter.call(this, vertexShader, fragmentShader, uniforms ); } QuantizeFilter.prototype = Object.create(PIXI.AbstractFilter.prototype); QuantizeFilter.prototype.constructor = QuantizeFilter; Object.defineProperties(QuantizeFilter.prototype, { palette: { get: function() { return this.uniforms.palette.value; }, set: function(value) { this.uniforms.palette.value = value; } } }); Custom (test) filter for Pixi.js V4 I'd like to make the 'uniform vec3 palette[3];' array size, size to the 'palette' uniform input. So I could set palette to 256 or so arrays of colors and the uniform will size appropriately: 'uniform vec3 palette[256];' Hypothetically, I've thought of just making the string in javascript, and prepending it to the fragment shader text, but I don't know of a way to do that. Any help is appreciated, ty.

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

Hello, I need to set a bunch of textures array in my shaders, is there a simple way to achieve that in babylon js or should I use something like here => http://stackoverflow.com/questions/19592850/how-to-bind-an-array-of-textures-to-a-webgl-shader-uniform Cheers

Hi there guys. Say I want to make a filter that does something to original texture after it was blurred with Blur filter. Here's the PIXI blur filter: BlurFilter.prototype.applyFilter = function (renderer, input, output) { var renderTarget = renderer.filterManager.getRenderTarget(true); this.blurXFilter.applyFilter(renderer, input, renderTarget); this.blurYFilter.applyFilter(renderer, renderTarget, output); renderer.filterManager.returnRenderTarget(renderTarget); }; Is there a way for me to store original input texture and use it as a uniform for my filter, kinda like that: this.myFilter.originalTexture = input.texture; this.blurXFilter.applyFilter(renderer, input, renderTarget); this.blurYFilter.applyFilter(renderer, renderTarget, renderTargetTemp); this.myFilter.applyFilter(renderer, renderTargetTemp, output); I tried getting input.texture however input.texture is an empty WebGLTexture object at that point.

How to pass an array to shader/filter in pixi.js? For example array of textures. This is what I need and guess that pixi.js doesn't support it yet? The answer is here: http://www.html5gamedevs.com/topic/7055-position-of-sprite-in-shader/?p=42687

Hi, For performances reasons on mobile devices, I need to disable some textures at runtime to get a good FPS rate. In BABYLON.Scene.js there is a parameter to disable all textures but it's don't what I need. I need to disable only some textures not all. I haven't found a method to do that. A good way could be to easily remove a specified uniform define. We can add some parameters in Scene.js to disable a specified type of texture. if (this._scene.texturesEnabled) { if (this.specularTexture && this._scene.specularTextureEnabled) { }}Is there a better method ? What do you think about that ? If you want I can send a pull request that do this job Yann. Edit: I send a pull request which has been merged, we can achieve this by using static parameters: // Disable bump and specular texture for all Standard MaterialsBabylon.StandardMaterial.BumpTextureEnabled = false;Babylon.StandardMaterial.SpecularTextureEnabled = false;@Deltakosh: Thanks for merging