WebGL: Text Processing and Blending

Hy

I have a problem with text in WebGL. Here pb:

The first render is crappy, the second is fine. The difference is in my DOM (nothing to do with HTML DOM):

Difference between V2 and V3 views:

• V2 is just a green rectangle (made up of two GL triangles) and contains a V4 DOM child that is a text view (means text, render to canvas and then copy to texture) The blend is done with the GPU
• V3 is a TextView with a green background. The text is then converted to canvas to texture (like V4). And the Shader fills the rectangle and takes the texture to create the final look => no blend (actually made by the shader)

It must be a blend and texture configuration issue. But I cannot find the configuration I want.

Here's my default config for blend:

gl_ctx.disable (gl_ctx.DEPTH_TEST);
gl_ctx.enable (gl_ctx.BLEND);
gl_ctx.blendFunc (gl_ctx.SRC_ALPHA, gl_ctx.ONE_MINUS_SRC_ALPHA);

gl_ctx.clearDepth (1.0);
gl_ctx.clearColor (1, 1, 1, 1);

      

        
        
        
      

    

Thanks in advance for your help.

NOTE 1 View (Vn) is the main document object in my WebGL toolbox. It was called internally Sprite, it consisted mainly of four vertices, and it used vertex and fragment shaders for rendering purposes.

NOTE 2 If I use this mix configuration:

gl_ctx.blendFunc (gl_ctx.ONE, gl_ctx.ONE_MINUS_SRC_ALPHA);

      

        
        
        
      

    

Text rendering works well, but the rest of the rendering, in particular, the images have the wrong alpha.

NOTE 3: sorry you don't have enough reputation (!!!) to include the image in my post: --(