3

Hy

I have a rendering issue with text in WebGL. Here the pb:

BUG example

The first rendering is crappy the second is OK. The difference is my DOM (nothing related to the HTML DOM):

DOM representation

The difference between the view V2 and V3 is:

  • V2 is just a green rectangle (composed of 2 GL triangles) and contains a DOM child V4 which is a Text View (means a text, render into a Canvas then copy into a texture) The blend is done by the GPU
  • V3 is TextView with a green background. The text is rendered into a Canvas then into a texture (like the V4). And a Shader fill the rectangle and takes the texture to generate the final view => no blend (actually done by the shader)

It should be a problem of blend and texture configuration. But I cannot find the right configuration.

Here my default configuration for the 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: A view (Vn) is the basic document object into my WebGL toolkit. It's called internally a Sprite, it's composed basically by 4 vertices, and a vertex and fragment shaders are associated to it, for the rendering purpose.

NOTE 2: If I use this blend configuration:

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

The text rendering works well but the rest of rendering, specially images had incorrect alpha.

NOTE 3: sorry dont have enough reputation(!!!) to include image in my post :-(

1 Answer 1

0

Canvas 2D always uses pre-multiplied alpha so you pretty much have to use the second blendfunc. Can you set that blendfunc just when you render text?

1
  • Ok thx for the tip :-) Yes I can change the blend functions during my rendering. I will investigate that. But will be simpler if I could be able to generate right texture.
    – Dave
    Aug 27, 2014 at 0:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.