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

How to blur a transparent texture in a glsl shader?


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;


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.


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?


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


WebGL fragment-shader for multiple light sources?

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 I learned to either use directional or position lighting, but I couldn't find a good explanation of how to...

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

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...

Ambient and Specular lighting not working correctly in GLSL

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...

Webgl 1 bit per pixel texture

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, but it seems to me,...

Overlaying a transparent color over a Texture with GLSL

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...

How to get shader version from QOpenGLShader?

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 can I render .mtl for object on iPhone 5 using ThreeJS?

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 for reference. On iPhone 5, I am able to see the object, but it...

Programmatically generate texture for WebGL in JavaScript

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...

mat4 type in attribute shader

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

Why WebGL slower than Canvas?

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: I run them in Chrome and Firefox, in both browser the...

How to use framebuffer targets in webgl?

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

OpenGL: Defining variables in shaders

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:...

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

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...

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

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...

HDR Bloom effect rendering pipeline using OpenGL/GLSL

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: And about Gaussian blur effect I follow scrupulously all the advices concerning the performance on the following website: According to...

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

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 access all vertexes within the same patch in Tessellation Control Shader

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...

Should Meshes with and without Skeleton use different Shaders?

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...

How can I render an infinite 2D grid in 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...

Declaring array in GLSL based on uniform int

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 vs CSS3D for large scatter plot of images

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...

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

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) {...

WebGL Normal calculations from position 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...

Write positions to texture OpenGL/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...

What can I do to optimize my WebGL animations?

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?...

Create a 2D texture from existing textures

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,...

Multiple WebGL models on the same page

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...

Passing grayscale OpenCV image to an OpenGL texture

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...

Video Memory from ETC2 Texture Compression on OpenGL 4.3

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...

Atmosphere Scattering for Earth from space and on the ground

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 to create latitudinal (horizontal) contour lines in GLSL?

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...

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

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...

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

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...

Water rendering in opengl [duplicate]

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...

THREEJS Shader Material overwritten

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...

Threejs: PointCloudMaterial size compared to ShaderMaterial gl_PointSize with size attenuation

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...

How much data does texImage2D in WebGL need?

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,...

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

Are there ONLY constants allowed or can I use for loop indices or any other dynamic values ?

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

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...

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

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...

Deferred Shading - Multiple Lights (OpenGL/GLSL)

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...

Supporting WebGL on Android 5's WebView

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...

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

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...

OpenGL OGLDev SSAO Tutorial Implementation Fragment Shader yields Noise

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...

Show two WebGL animations with the same shader

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...