glsl,webgl , How to blur a transparent texture in a glsl shader?


How to blur a transparent texture in a glsl shader?

Question:

Tag: glsl,webgl

My setup:

Ping-ponging RGBA FBO's, and two shaders for blurring: a horizontal and a vertical one. Imagine I want to blur a red rectangle.

The blend function is as follows:

_gl.blendEquationSeparate(_gl.FUNC_ADD, _gl.FUNC_ADD);
_gl.blendFuncSeparate(_gl.SRC_ALPHA, _gl.ONE_MINUS_SRC_ALPHA, _gl.ONE, _gl.ONE_MINUS_SRC_ALPHA);

In my blur shaders I add several fragments like this:

vec4 color = texture2D(u_image, v_tex_coord + vec2(x, y) * u_amount) * weight;

Problem:

Blurring works fine on opaque textures, but as it mixes in more and more transparency, the colors become black, as if everything is mixed with a black background. My clear color is 0,0,0,0, so that makes sense.

Question:

How do I get a blur effect that truly goes to transparent red, instead of a red mixed with more and more black as the alpha goes to zero?

I basically want the same as when you blur something on a complete transparent background in Photoshop. Do I need premultiplied FBO's or do I need to handle the mixing of fragments in the shader differently?


Answer:

I solved it by using premultiplied alpha everywhere.

Being used to how Photoshop works, it took me a while to grasp the concept. It felt a bit counterintuitive, but this explanation from Tom Forsyth helped me a lot.

All my shaders now multiply the RGB values by it's A:

gl_FragColor = clr.rgb * alpha;

and I'm using a different blendmode that makes this work:

_gl.blendEquation(_gl.FUNC_ADD); _gl.blendFunc(_gl.ONE, _gl.ONE_MINUS_SRC_ALPHA);

I had to make sure that my .PNG image textures are also premultiplied. I did that using:

_gl.pixelStorei(_gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);


Related:


Deferred Shading - Multiple Lights (OpenGL/GLSL)


opengl,glsl,light,deferred-rendering,deferred-shading
I'm working on a deferred shading program and now I have to set up 50 different lights in the scene. To do so, I'm randomly generating its attributes (position, diffuse color, specular color) with this piece of code: void FBORender::BuildLights() { std::random_device rd; std::mt19937 gen(rd()); std::uniform_real_distribution<> dis(0.0, 0.1); for (int...

Multiple WebGL models on the same page


graphics,three.js,webgl
My research lab is working on a webpage that displays a long scrollable list of 3d models, about 50 or so. Our first idea was to do this with separate THREE.js WebGL contexts, but it seems this isn't advisable given the architecture of WebGL, and browsers seem to limit the...

OpenGL OGLDev SSAO Tutorial Implementation Fragment Shader yields Noise


c++,opengl,glsl,ssao,deferred-shading
TASK BACKGROUND I am trying to implement SSAO after OGLDev Tutorial 45, which is based on a Tutorial by John Chapman. The OGLDev Tutorial uses a highly simplified method which samples random points in a radius around the fragment position and steps up the AO factor depending on how many...

How do I resize webGL canvas in bootstrap.js column?


javascript,html5,twitter-bootstrap,canvas,webgl
I have a webpage at here where I want to resize a webGL drawing in an HTML5 canvas to fit within "6" columns using the bootstrap.js library for layout. The layout is defined as: <div class="container"> <div class = "row"> <div class = "col-md-2"></div> <div class = "col-md-6" id="rightColDiv"><canvas id="lesson04-canvas"...

How to get shader version from QOpenGLShader?


qt,opengl,glsl
I am using QT to load, compile and link OpenGL shaders. I need to perform specific operations depending on the GLSLversion used in the shader code Is it possible to recover the version from the QOpenGLShader interface without actually getting the shader source code and parsing it to detect the...

How much data does texImage2D in WebGL need?


javascript,three.js,webgl
I created a DataTexture in ThreeJS, which in turn will call texImage2D. var twidth = 50; var theight = 50; var tsize = twidth * theight; var tileData = new Uint8Array( tsize * 3); //fill it with some data tileDataTexture = new THREE.DataTexture(this.tileData, twidth, theight, THREE.RGBFormat); As you can see,...

mat4 type in attribute shader


opengl-es,webgl,shader
how to send to a shader attribute with the MAT4 type? attribute mat4 attr; ... JS: var attr=gl.getAttribLocation(_program,"attr"); ...

How to access all vertexes within the same patch in Tessellation Control Shader


opengl,glsl,tessellation
I want to do LOD in Tessenllation Control Shader. And my method is to calculate the area each patch occupyed on screen coordinate, and set different tessellation level for them. So I need to access all vertices within a patch and I do so like: for(int i = 0; i...

WebGL fragment-shader for multiple light sources?


javascript,webgl
I want to be able to append multiple light sources to each node of my scene graph, but I have no clue how to do it! From the tutorials on learningwebgl.com I learned to either use directional or position lighting, but I couldn't find a good explanation of how to...

GLSL Error #132 Syntax error: “gl_position” parse error


java,opengl,glsl
I've tried my best to find the answer to this problem or any error i had made in the code, but i just couldn't find anything.. If this helps, i have a sapphire Radeon HD 6950 graphics card and it uses an AMD Radeon HD 6900 series driver. The Error...

OpenGL: Defining variables in shaders


opengl,glsl
My OpenGL program, using GLSL for shaders, has a simple vertex and fragment shader (given by a tutorial). The vertex shader is: #version 330 layout (location = 0) in vec3 Position; void main() { gl_Position = vec4(0.5 * Position.x, 0.5 * Position.y, Position.z, 1.0); } And the fragment shader is:...

OpenGL GLSL: How to implement the concept of gradient map in photoshop using fragment shader?


image-processing,glsl,photoshop
This may be not the perfect question for stackoverflow but I have asked this in graphicdesign network of stackexchange but did not get any answer so posting it here. I am trying to implement gradient map of Photoshop programmatically using glsl fragment shader. Consider below shown gradient map where all...

What can I use as an array index in GLSL in WebGL ?


arrays,indexing,glsl,webgl
Are there ONLY constants allowed or can I use for loop indices or any other dynamic values ?

GLFW with GLES in simple C++ Emscripten file wont build


webgl,opengl-es-2.0,glfw,emscripten
I'm trying to setup an OpenGL Context with a window and viewport using the minimum code to do this with emscripten. I've started coding, this with the following code: #include<stdio.h> #include<stdlib.h> #include<GLES2/gl2.h> #include<GL/glfw.h> #include<emscripten/emscripten.h> int init_gl() { const int width = 480, height = 800; if (glfwInit() != GL_TRUE) {...

How to create latitudinal (horizontal) contour lines in GLSL?


opengl,glsl,webgl
I'm aiming for this effect: (horizontal-only contour lines): I did find this example, however it creates horizontal and vertical contour lines. I can't quite wrap my head around how the call to fwidth() is generating the lines. uniform float gsize;//size of the grid uniform float gwidth;//grid lines'width in pixels varying...

WebGL vs CSS3D for large scatter plot of images


three.js,webgl
I am building a web application which will display a large number of image thumbnails as a 3D cloud and provide the ability to click on individual images to launch a large view. I have successfully done this in CSS3D using three.js by creating a THREE.CSS3DObject for each thumbnail and...

Should Meshes with and without Skeleton use different Shaders?


c++,opengl,glsl,shader,vertex-shader
Should Meshes with and without Skeleton use different Shaders? Background: Right now my shader is constructed to handle meshes with skeletons. Each vertex takes 3 bone IDs, with respective bone weight. This works well for models with skeletons that I wish to animate, but I feel that it is a...

Programmatically generate texture for WebGL in JavaScript


javascript,opengl-es,textures,webgl
I have the following code to programmatically generate a texture for WebGL in C. I need to do the same thing in JavaScript for WebGL. How do I properly create the 3 dimensional checkerboard matrix? GLubyte checkerboard[64][64][3]; How do I set the values? checkerboard[i][j][0] = (GLubyte) c; How do I...

Declaring array in GLSL based on uniform int


c++,arrays,opengl,glsl,uniform
In the program that I'm coding, I have to generate multiple lights sources and pass is to the shader. As this number is defined outside the shader, I though to pass it through an uniform int and use this to declare the arrays size. uniform int numLights; uniform vec4 ambientColor;...

Webgl: color attachments with different formats do not work on windows


javascript,webgl
I'm trying to use WEBGL_draw_buffers with OES_texture_float, which works. However, when using two render targets with a different type, this does not work on my windows machine (amd). It does, however, work on my linux machine (open source radeon driver). So a framebuffer with the following color attachments does not...

Ambient and Specular lighting not working correctly in GLSL


opengl,glsl,lighting,phong
In my lighting scene, for some reason the ambient lighting isn't working at all. The whole model is the same brightness, no matter which way it is facing. I tried getting rid of the attenuation but it still has the same results. Along with that, the specular lighting is always...

“Tainted canvases may not be loaded” Cross domain issue with WebGL textures


google-chrome,gwt,libgdx,html5-canvas,webgl
I've learnt a lot in the last 48 hours about cross domain policies, but apparently not enough. Following on from this question. My HTML5 game supports Facebook login. I'm trying to download profile pictures of people's friends. In the HTML5 version of my game I get the following error in...

Write positions to texture OpenGL/GLSL


c++,opengl,textures,glsl
I want to write the model-space vertex positions of a 3D mesh to a texture in OGL. Currently in order to write to a texture I set it to a fullscreen quad and write to it using a separate pass (based on tutorial seen here.) The problem is that, from...

How to use framebuffer targets in webgl?


webgl,framebuffer
How can I specifically use the read and write framebuffers in webgl ? Can't seem to find the constants for it.

What can I do to optimize my WebGL animations?


javascript,jquery,performance,webgl
I have a page with multiple WebGL animations. When I have one or two on the page, the performance is fine on most hardware. When I run 7 or 8 the animations become very slow. I have heard about viewport slicing, but can't find a good resource. Would it help?...

How can I render .mtl for object on iPhone 5 using ThreeJS?


javascript,ios,three.js,webgl,.obj
I am trying to load .obj files through ThreeJS and have it be cross compatible. I am using the OBJMTLLoader method. The object loads and renders fine for Firefox, Chrome, and IE on Windows; see falloutfan.com/eyebot for reference. On iPhone 5, I am able to see the object, but it...

How it is possible to get rid of spurious artifacts of Shadow Mapping?


javascript,webgl,shader,shadow
Spurious artifacts in case of creation of shadows through shadow mapping. I can't understand why many shadows are drawn, and from where they originate? example: example...

Overlaying a transparent color over a Texture with GLSL


glsl,lwjgl,slick2d,vertex-shader,blending
I have an image that I am loading using the Slick library, and the image renders fine without my shader active. When I use my shader to overlay a transparent color over the image the entire image is replaced by the transparent color. without the shader With the shader Vertex...

HDR Bloom effect rendering pipeline using OpenGL/GLSL


opengl,glsl,shader
I have integrated bloom HDR rendering using OpenGL and GLSL... At least I think! I'm not really sure about the result. I followed a tutorial from intel website: https://software.intel.com/en-us/articles/compute-shader-hdr-and-bloom And about Gaussian blur effect I follow scrupulously all the advices concerning the performance on the following website: https://software.intel.com/en-us/blogs/2014/07/15/an-investigation-of-fast-real-time-gpu-based-image-blur-algorithms According to...

THREEJS Shader Material overwritten


javascript,three.js,textures,webgl,shader
I have a shader material that works as expected. This shader has a texture attached. I want to create 2 meshes using this shader material, with a different texture for each mesh. Problem is that if I try to render my 2 meshes in the scene, the first object's material...

Show two WebGL animations with the same shader


javascript,webgl
I need to show two animations using WebGL on the page. Do I need to instantiate multiple shaders, or is there a way to reuse one shader? They are using the same program (so not entirely different animations). They both need to react to mouse events. something like this window.onload...

Water rendering in opengl [duplicate]


opengl,glsl,shader
This question already has an answer here: How to render ocean wave using opengl in 3D? [closed] 2 answers I have absolutely no idea how to render water sources (ocean, lake, etc). It's like every tutorial I come across assumes I have the basic knowledge in this subject, and...

WebGL Normal calculations from position texture


glsl,webgl,normals,render-to-texture
Iam trying to create a procedural water puddle in webGL with "water ripples" by vertex displacement. The problem I'm having is that I get a noise I can't explain. Below is the first pass vertex shader where I calculate the vertex positions that i later render to a texture that...

Supporting WebGL on Android 5's WebView


java,android,google-chrome,android-webview,webgl
I have a web project (depends on WebGL) which works on computers, any browser. Now I am trying this project to be opened as an application on Android based mobile phones. I used WebView to accomplish this. My phone (Nexus 3) had Android 4.3 and as I learnt afterwards before...

Modern GLSL ( opengl 3+ ) : Implementing phong effect correctly;


glsl,opengl-3
I am implementing a basic phong lighting GLSL shader; I have looked up some things on the internet, and found that the phong effect was created by adding an ambient, diffuse, and specular layer on the object (see image below, from tom dalling's site); problem is I have seen a...

Why WebGL slower than Canvas?


javascript,html5,canvas,webgl
I am just started to play around with canvas and webgl, read some article, etc.. and as per my knowledge, WebGL should be much more faster than canvas, but in these following tests it is remarkably slower: http://jsperf.com/canvas-drawimage-vs-webgl-drawarrays http://jsperf.com/three-js-canvas-vs-webgl/2 I run them in Chrome and Firefox, in both browser the...

can I send an array of data as a vertex attribute?


three.js,glsl,webgl,shader
I have a PointCloud in which I am using to visualize some time-related data points. For each vertex in the PointCloud.Geometry, I'd like to assign an attribute which is an array of epoch times. These epoch times are ints, an example would be: epochTimes = [1432314839, 1432314840, 1432314841]; the custom...

Passing grayscale OpenCV image to an OpenGL texture


c++,opencv,opengl,glsl
I want to use a grayscale image generated in OpenCV in a GLSL shader. Based on the question on OpenCV image loading for OpenGL Texture, I've managed to come up with the code that passes RGB image to the shader: cv::Mat image; // ...acquire and process image somehow... //create and...

Webgl 1 bit per pixel texture


opengl-es,webgl
Is there any way to use 1 bit per pixel texture data in WebGL (for example texture 16×16px in 32 bytes of data) or is it necessary to unpack data from 1bpp to 8bpp first? I have found similar OpenGL related question and answer http://stackoverflow.com/a/15706596/4540236, but it seems to me,...

Atmosphere Scattering for Earth from space and on the ground


three.js,glsl,webgl
Please provide prompt how to make the atmosphere of the Earth so that it is visible from space and from the ground (as shown in the image) a model of the earth: Earth = new THREE.Mesh(new THREE.SphereGeometry(6700,32,32),ShaderMaterialEarth); model of the cosmos: cosmos= new THREE.Mesh(new THREE.SphereGeometry(50000,32,32),ShaderMaterialCosmos); and a light source: sun...

How can I render an infinite 2D grid in GLSL?


opengl,glsl
Ideally, what I'd like to do is draw a single quad and have GLSL handle the creation of the actual gridlines. In my attempt so far the vertex shader: #version 400 layout (location = 0) in vec4 in_position; layout (location = 2) in vec3 in_UV; uniform mat4 model; uniform mat4...

Threejs: PointCloudMaterial size compared to ShaderMaterial gl_PointSize with size attenuation


three.js,webgl,vertex-shader
I am curious to know what the relationship is between gl_PointSize and the size property within PointCloudMaterial. When I create a PointCloud with PointCloudMaterial and set the size property to 1, the size of the particles are far larger than when creating a PointCloud with a ShaderMaterial and setting the...

Create a 2D texture from existing textures


three.js,textures,webgl,texture-atlas
I have an application where I load a series of medical images (jpg), create a texture object for each image and display those textures on 3D planes. The amount of images depends in the CT scanner's resolution but my prototype should work with up to 512. As an additional task,...

GLSL - program link error: Slot 0 unavailable from layout location request


c++,opengl,glsl
I'm trying to draw a textured quad copying some code from a tutorial but I'm afraid there is a problem with the shaders. Both the vertex shader and the fragment shader compilation works, but when linking the program I get the error: ERROR: Active attribute aliasing. Slot 0 unavailable for...

Video Memory from ETC2 Texture Compression on OpenGL 4.3


c++,opengl,opengl-es,textures,glsl
Currently I'm writing a renderer which uses many textures and will fill up my graphics card's video memory (3 Gb for my nVidia GTX 780 Ti). So I pre-compressed all necessary images by using Mali's texture compression tool and integrated my renderer with libktx for loading compressed textures(*.ktx). The compression...