WebGL Mali chipset black or flickering until ending black whole gl canvas

[neurall]

Hi guys we are excited so we can move 2d canvas gui to webgl and have only one canvas in all our old games. unfortunately on mali-400 (galaxy tab e) we are getting black screen and on on s3 mini screen flickers randomly between black and normal . no errors in console and game runs just everything is black.
we don't have larger than 2048 textures and all are power of two squares. in old createjs engine the same game is rendering fine wia old webgl.js path. so I guess it's some kind of render to texture issue? . had not time to look what changed in new easeljs on low level. last build of createjs we build from git was 20.6.2017

I found on internet that mali is known for this and fix is supposedly "32-bit display buffer instead of 24bit?"

[lannymcnie]

There is a SystemInfo example in the demos/WebGL folder, which should give you some info. Any chance you can share that?

[DavidHGillen]

RE: "32-bit display buffer instead of 24bit?" That would probably mean turning the background transparency on. R,G,B @ 8 bytes each == 24bit. RGBA == 32bit, beyond that I don't have much control over the colour depth being used as the shader uses full precision. Transparency can have a bit of a performance impact so it's hardly ideal.

I might also recommend turning on "preserveBuffer" as a separate alternative. The way WebGL works is that it makes an educated guess when you are done drawing and I have no control over that determination. If the buffer is preserved it won't automatically clear itself and it will wait for it be cleared manually (which we do if autoClear is true regardless of preserve buffer). If the flickering is caused by pre-emptive clears this will fix it up perfectly.

Both of these parameters are in the constructor:
var stage = new StageGL("canvasID", {transparent: true});
var stage = new StageGL("canvasID", {preserveBuffer: true});
But I would recommend only turning them on for the problem device unless the flags are required anyway.

Hope that helps, we'll take a look on our end, we might find a solution that doesn't come with any side effects for other devices.

[neurall]

Thx guys for reply and sorry for a few hours delay.

you vere right ,{preserveBuffer: true} actually solved the issue

minimal sample to reproduce black screen are actually your samples referencing easel next pulled from git libs commit c3d6213

BUT
without {preserveBuffer: true} If I swap in helloworld.html ticker.on (tick,stage) to stage.update just as its done in Filter_gl-GL.html then robot renders fine.

blackscreen:
Helloworld.html

twostages.html renders at least just vector button not bitmap one.

Filter_gl-GL.html renders fine thou.
The only difference is manual. Stage.update.

Here is requested system info

Max textures per draw: 8

Max textures active: 8

Max texture size: 2048^2

Max cache size: 2048^2

Max attributes per vertex: 16

WebGL Version string: WebGL 1.0 (OpenGL ES 2.0 Chromium)

As requested. I guess it will be the same to a lot of mediatek/mali cheap android phones

I will try to put together minimal black sample meanwhile

Also adding
WebGL Report

WebGL 1 WebGL 2
✓ This browser supports WebGL 1

Platform: Linux armv7l
Browser User Agent: Mozilla/5.0 (Linux; Android 4.4.4; SM-T560 Build/KTU84P) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.83 Safari/537.36
Context Name: webgl
GL Version: WebGL 1.0 (OpenGL ES 2.0 Chromium)
Shading Language Version: WebGL GLSL ES 1.0 (OpenGL ES GLSL ES 1.0 Chromium)
Vendor: WebKit
Renderer: WebKit WebGL
Unmasked Vendor: ARM
Unmasked Renderer: Mali-400 MP
Antialiasing: Available
ANGLE: No
Major Performance Caveat: No
Vertex Shader
Max Vertex Attributes: 16
Max Vertex Uniform Vectors: 256
Max Vertex Texture Image Units: 0
Max Varying Vectors: 12
Best float precision: [-2127, 2127] (23)
Transform Feedback
Coming in WebGL 2
Rasterizer
Aliased Line Width Range: [1, 100]
Aliased Point Size Range: [1, 100]
Fragment Shader
Max Fragment Uniform Vectors: 256
Max Texture Image Units: 8
float/int precision: mediump/lowp
Best float precision: [-215, 215] (10)
Framebuffer
Max Color Buffers: 1
RGBA Bits: [8, 8, 8, 8]
Depth / Stencil Bits: [24, 8]
Max Render Buffer Size: 4096
Max Viewport Dimensions: [4096, 4096]
Textures
Max Texture Size: 4096
Max Cube Map Texture Size: 4096
Max Combined Texture Image Units: 8
Max Anisotropy: n/a
Uniform Buffers
Coming in WebGL 2
Supported Extensions:
EXT_blend_minmax
EXT_shader_texture_lod
OES_standard_derivatives
OES_vertex_array_object
WEBGL_compressed_texture_etc1
WEBGL_debug_renderer_info
WEBGL_debug_shaders
WEBGL_depth_texture
WEBKIT_WEBGL_depth_texture
WEBGL_lose_context
WEBKIT_WEBGL_lose_context

[DavidHGillen]

without {preserveBuffer: true} If I swap in helloworld.html ticker.on (tick,stage) to stage.update just as its done in Filter_gl-GL.html then robot renders fine.

Interesting, we don't have a device that reproduces the issue in our office here so it's hard to test. But if developers can use this info to time their render calls and avoid the problem on some GPUs it'd be great to know.