WebGL not work as expected

fzlee commented 1 year ago

Describe the bug

launching zenika/alpine-chrome:with-puppeteer with the newest image, and checking webgl support, which gives a positive answer, but when I navigating to a threejs website, you will see many webgl errors.

To Reproduce docker-compose.yaml:

version: '3'
services:
  puppeteer:
    image: zenika/alpine-chrome:with-puppeteer
    volumes:
      - ./:/app2
    command: sleep 10000
    cap_drop:
      - SYS_ADMIN

index.js

const puppeteer = require("puppeteer");

async function run() {
  const browser = await puppeteer.launch({
    headless: "new",
    args: ['--no-sandbox', '--disable-setuid-sandbox'],
  });
  const page = await browser.newPage();

  await page.goto("about:blank");

  const result = await page.evaluate(() => {
    function checkWebGLSupport() {
      const canvas = document.createElement("canvas");
      const gl =
        canvas.getContext("webgl") || canvas.getContext("experimental-webgl");

      if (gl) {
        const version = gl.getParameter(gl.VERSION);
        const renderer = gl.getParameter(gl.RENDERER);
        const extensions = gl.getSupportedExtensions();

        return {
          version,
          renderer,
          extensions,
        };
      } else {
        return "browser doesn't WebGL。";
      }
    }

    return checkWebGLSupport();

  });
  console.log("result:", result);

  const isWebGL2Supported = await page.evaluate(() => {
    const canvas = document.createElement("canvas");
    const gl = canvas.getContext("webgl2");
    return !!gl;
  });
  console.log("isWebGL2Supported:", isWebGL2Supported);
  // await browser.close();
}

function main() {
  run().then(() => {
    console.log("Done");
  });
}

main();

threejs.js:

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch({
    headless: "new",
    args: ["--no-sandbox",
      "--disable-extensions",
      "--single-process",
      "--disable-web-security",
      "--use-gl=angle",]
    });

  const page = await browser.newPage();
  page.on("console", (msg) => {
    console.log("PAGE LOG:", msg.text());
  });

  await page.goto('https://threejs.org/examples/#webgl_animation_keyframes', {
    waitUntil: 'networkidle0'
    });
})();

To reproduce, first

docker-compose up 
docker exec -it {the container} sh

node index.js // check support for webgl, which give a positive answer
node threejs.js // goto threejs example, you will see many errors

fzlee commented 1 year ago

logs for node index.js:

result: {
  version: 'WebGL 1.0 (OpenGL ES 2.0 Chromium)',
  renderer: 'WebKit WebGL',
  extensions: [
    'ANGLE_instanced_arrays',
    'EXT_blend_minmax',
    'EXT_color_buffer_half_float',
    'EXT_float_blend',
    'EXT_frag_depth',
    'EXT_shader_texture_lod',
    'EXT_texture_compression_bptc',
    'EXT_texture_compression_rgtc',
    'EXT_texture_filter_anisotropic',
    'EXT_sRGB',
    'OES_element_index_uint',
    'OES_fbo_render_mipmap',
    'OES_standard_derivatives',
    'OES_texture_float',
    'OES_texture_float_linear',
    'OES_texture_half_float',
    'OES_texture_half_float_linear',
    'OES_vertex_array_object',
    'WEBGL_color_buffer_float',
    'WEBGL_compressed_texture_astc',
    'WEBGL_compressed_texture_etc',
    'WEBGL_compressed_texture_etc1',
    'WEBGL_compressed_texture_s3tc',
    'WEBGL_compressed_texture_s3tc_srgb',
    'WEBGL_debug_renderer_info',
    'WEBGL_depth_texture',
    'WEBGL_draw_buffers',
    'WEBGL_lose_context',
    'WEBGL_multi_draw'
  ]
}
isWebGL2Supported: true
Done

logs for node threejs.js

PAGE LOG: THREE.WebGLRenderer: A WebGL context could not be created. Reason:  Could not create a WebGL context, VENDOR = 0xffff, DEVICE = 0xffff, Sandboxed = no, Optimus = no, AMD switchable = no, Reset notification strategy = 0x0000, ErrorMessage = OffscreenContext Creation failed, GpuChannelHost creation failed.
PAGE LOG: THREE.WebGLRenderer: A WebGL context could not be created. Reason:  Failed to create a WebGL2 context.
PAGE LOG: THREE.WebGLRenderer: A WebGL context could not be created. Reason:  Could not create a WebGL context, VENDOR = 0xffff, DEVICE = 0xffff, Sandboxed = no, Optimus = no, AMD switchable = no, Reset notification strategy = 0x0000, ErrorMessage = OffscreenContext Creation failed, GpuChannelHost creation failed.
PAGE LOG: THREE.WebGLRenderer: A WebGL context could not be created. Reason:  Could not create a WebGL context, VENDOR = 0xffff, DEVICE = 0xffff, Sandboxed = no, Optimus = no, AMD switchable = no, Reset notification strategy = 0x0000, ErrorMessage = OffscreenContext Creation failed, GpuChannelHost creation failed.
PAGE LOG: THREE.WebGLRenderer: A WebGL context could not be created. Reason:  Could not create a WebGL context, VENDOR = 0xffff, DEVICE = 0xffff, Sandboxed = no, Optimus = no, AMD switchable = no, Reset notification strategy = 0x0000, ErrorMessage = OffscreenContext Creation failed, GpuChannelHost creation failed.
PAGE LOG: THREE.WebGLRenderer: A WebGL context could not be created. Reason:  Failed to create a WebGL2 context.
PAGE LOG: THREE.WebGLRenderer: A WebGL context could not be created. Reason:  Could not create a WebGL context, VENDOR = 0xffff, DEVICE = 0xffff, Sandboxed = no, Optimus = no, AMD switchable = no, Reset notification strategy = 0x0000, ErrorMessage = OffscreenContext Creation failed, GpuChannelHost creation failed.
PAGE LOG: THREE.WebGLRenderer: A WebGL context could not be created. Reason:  Could not create a WebGL context, VENDOR = 0xffff, DEVICE = 0xffff, Sandboxed = no, Optimus = no, AMD switchable = no, Reset notification strategy = 0x0000, ErrorMessage = OffscreenContext Creation failed, GpuChannelHost creation failed.
PAGE LOG: THREE.WebGLRenderer: Error creating WebGL context.

fzlee commented 1 year ago

here is the hardware spec for GPU:

+-----------------------------------------------------------------------------+ | Processes: | | GPU GI CI PID Type Process name GPU Memory | | ID ID Usage | |=============================================================================| | 0 N/A N/A 1189 G /usr/lib/xorg/Xorg 9MiB | | 0 N/A N/A 1716 G /usr/bin/gnome-shell 2MiB | +-----------------------------------------------------------------------------+

Zenika / alpine-chrome

WebGL not work as expected #231