detect-features/tables/table-extensions-webgl2.js

Detect and report browser and hardware features.

// Native
const fs = require('fs');

// Vendor
const glob = require('glob');
const markdownTable = require('markdown-table');

function fileLoader(file) {
  return new Promise((resolve, reject) => {
    fs.readFile(file, 'utf8', (error, data) => {
      if (error) {
        reject(console.error(error));
      }

      resolve(JSON.parse(data));
    });
  });
}

glob('./data/*.json', (error, files) => {
  const fileList = files.map(
    file => new Promise((resolve, reject) => {
        fileLoader(file)
          .then((file) => {
            resolve(file);
          })
          .catch((error) => {
            reject(error);
          });
      }),
  );

  Promise.all(fileList).then((fileListData) => {
    const deviceNameList = [
      'Apple iPad 5th',
      'Apple iPad Air 2',
      'Apple iPad Mini 3',
      'Apple iPad Pro',
      'Apple iPhone 5S',
      'Apple iPhone 6 Plus',
      'Apple iPhone 6',
      'Apple iPhone 6S Plus',
      'Apple iPhone 6S',
      'Apple iPhone 7',
      'Apple iPhone 8 Plus',
      'Apple iPhone 8',
      'Apple iPhone SE',
      'Apple iPhone X',
      'Google Nexus 5X',
      'Google Nexus 6P',
      'Google Pixel 2',
      'Google Pixel 2',
      'Google Pixel v7',
      'Google Pixel v8',
      'Google Pixel v8',
      'LG G5',
      'MacOS High Sierra',
      'MacOS High Sierra',
      'MacOS High Sierra',
      'Motorola Moto X 2nd Gen',
      'Oculus Go',
      'Samsung S6',
      'Samsung S7',
      'Samsung S7',
      'Samsung S8',
      'Samsung S8',
      'Samsung S8+',
      'Samsung S8+',
      'Windows 10',
      'Windows 10',
      'Windows 10',
      'Windows 10',
      'Windows 10',
      'Windows 10',
      'Windows 7',
      'Windows 7',
      'Windows 8',
    ];

    const tableData = fileListData.map((fileData, i) => {
      const filename = deviceNameList[i];
      const { browserName } = fileData.browserFeatures.browserType;
      const { browserVersion } = fileData.browserFeatures.browserType;
      const { operatingSystemName } = fileData.browserFeatures.browserType;
      const { operatingSystemVersion } = fileData.browserFeatures.browserType;
      const { isWebGL2Supported } = fileData.browserFeatures;

      // Khronos ratified WebGL Extensions
      let isANGLEInstancedArraysSupported = false;
      let isEXTBlendMinmaxSupported = false;
      let isEXTFragDepthSupported = false;
      let isEXTShaderTextureLodSupported = false;
      let isEXTTextureFilterAnisotropicSupported = false;
      let isWEBKITEXTTextureFilterAnisotropicSupported = false;
      let isOESElementIndexUintSupported = false;
      let isOESStandardDerivativesSupported = false;
      let isOESTextureFloatSupported = false;
      let isOESTextureFloatLinearSupported = false;
      let isOESTextureHalfFloatSupported = false;
      let isOESTextureHalfFloatLinearSupported = false;
      let isOESVertexArrayObjectSupported = false;
      let isWEBGLCompressedTextureS3tcSupported = false;
      let isWEBKITWEBGLCompressedTextureS3tcSupported = false;
      let isWEBGLDebugRendererInfoSupported = false;
      let isWEBGLDebugShadersSupported = false;
      let isWEBGLDepthTextureSupported = false;
      let isMOZWEBGLDepthTextureSupported = false;
      let isWEBKITWEBGLDepthTextureSupported = false;
      let isWEBGLDrawBuffersSupported = false;
      let isWEBGLLoseContextSupported = false;
      let isMOZWEBGLLoseContextSupported = false;
      let isWEBKITWEBGLLoseContextSupported = false;

      // Community approved WebGL Extensions
      let isEXTColorBufferFloatSupported = false;
      let isEXTColorBufferHalfFloatSupported = false;
      let isEXTDisjointTimerQuerySupported = false;
      let isEXTDisjointTimerQueryWebgl2Supported = false;
      let isEXTSRGBSupported = false;
      let isWEBGLColorBufferFloatSupported = false;
      let isWEBGLCompressedTextureAstcSupported = false;
      let isMOZWEBGLCompressedTextureAtcSupported = false;
      let isWEBKITWEBGLCompressedTextureAtcSupported = false;
      let isWEBGLCompressedTextureAtcSupported = false;
      let isWEBGLCompressedTextureEtcSupported = false;
      let isWEBGLCompressedTextureEtc1Supported = false;
      let isWEBGLCompressedTexturePvrtcSupported = false;
      let isWEBKITWEBGLCompressedTexturePvrtcSupported = false;
      let isWEBGLCompressedTextureS3tcSrgbSupported = false;

      if (isWebGL2Supported) {
        const { supportedExtensions } = fileData.browserFeatures.webGL2Features.extensions;

        // Khronos ratified WebGL Extensions
        isANGLEInstancedArraysSupported = supportedExtensions.ANGLE_instanced_arrays;
        isEXTBlendMinmaxSupported = supportedExtensions.EXT_blend_minmax;
        isEXTFragDepthSupported = supportedExtensions.EXT_frag_depth;
        isEXTShaderTextureLodSupported = supportedExtensions.EXT_shader_texture_lod;
        isEXTTextureFilterAnisotropicSupported = supportedExtensions.EXT_texture_filter_anisotropic;
        isWEBKITEXTTextureFilterAnisotropicSupported = supportedExtensions.WEBKIT_EXT_texture_filter_anisotropic;
        isOESElementIndexUintSupported = supportedExtensions.OES_element_index_uint;
        isOESStandardDerivativesSupported = supportedExtensions.OES_standard_derivatives;
        isOESTextureFloatSupported = supportedExtensions.OES_texture_float;
        isOESTextureFloatLinearSupported = supportedExtensions.OES_texture_float_linear;
        isOESTextureHalfFloatSupported = supportedExtensions.OES_texture_half_float;
        isOESTextureHalfFloatLinearSupported = supportedExtensions.OES_texture_half_float_linear;
        isOESVertexArrayObjectSupported = supportedExtensions.OES_vertex_array_object;
        isWEBGLCompressedTextureS3tcSupported = supportedExtensions.WEBGL_compressed_texture_s3tc;
        isWEBKITWEBGLCompressedTextureS3tcSupported = supportedExtensions.WEBKIT_WEBGL_compressed_texture_s3tc;
        isWEBGLDebugRendererInfoSupported = supportedExtensions.WEBGL_debug_renderer_info;
        isWEBGLDebugShadersSupported = supportedExtensions.WEBGL_debug_shaders;
        isWEBGLDepthTextureSupported = supportedExtensions.WEBGL_depth_texture;
        isMOZWEBGLDepthTextureSupported = supportedExtensions.MOZ_WEBGL_depth_texture;
        isWEBKITWEBGLDepthTextureSupported = supportedExtensions.WEBKIT_WEBGL_depth_texture;
        isWEBGLDrawBuffersSupported = supportedExtensions.WEBGL_draw_buffers;
        isWEBGLLoseContextSupported = supportedExtensions.WEBGL_lose_context;
        isMOZWEBGLLoseContextSupported = supportedExtensions.MOZ_WEBGL_lose_context;
        isWEBKITWEBGLLoseContextSupported = supportedExtensions.WEBKIT_WEBGL_lose_context;

        // Community approved WebGL Extensions
        isEXTColorBufferFloatSupported = supportedExtensions.EXT_color_buffer_float;
        isEXTColorBufferHalfFloatSupported = supportedExtensions.EXT_color_buffer_half_float;
        isEXTDisjointTimerQuerySupported = supportedExtensions.EXT_disjoint_timer_query;
        isEXTDisjointTimerQueryWebgl2Supported = supportedExtensions.EXT_disjoint_timer_query_webgl2;
        isEXTSRGBSupported = supportedExtensions.EXT_sRGB;
        isWEBGLColorBufferFloatSupported = supportedExtensions.WEBGL_color_buffer_float;
        isWEBGLCompressedTextureAstcSupported = supportedExtensions.WEBGL_compressed_texture_astc;
        isMOZWEBGLCompressedTextureAtcSupported = supportedExtensions.MOZ_WEBGL_compressed_texture_atc;
        isWEBKITWEBGLCompressedTextureAtcSupported = supportedExtensions.WEBKIT_WEBGL_compressed_texture_atc;
        isWEBGLCompressedTextureAtcSupported = supportedExtensions.WEBGL_compressed_texture_atc;
        isWEBGLCompressedTextureEtcSupported = supportedExtensions.WEBGL_compressed_texture_etc;
        isWEBGLCompressedTextureEtc1Supported = supportedExtensions.WEBGL_compressed_texture_etc1;
        isWEBGLCompressedTexturePvrtcSupported = supportedExtensions.WEBGL_compressed_texture_pvrtc;
        isWEBKITWEBGLCompressedTexturePvrtcSupported = supportedExtensions.WEBKIT_WEBGL_compressed_texture_pvrtc;
        isWEBGLCompressedTextureS3tcSrgbSupported = supportedExtensions.WEBGL_compressed_texture_s3tc_srgb;
      }

      return {
        filename,
        operatingSystemName,
        operatingSystemVersion,
        browserName,
        browserVersion,

        // Khronos ratified WebGL Extensions
        isANGLEInstancedArraysSupported,
        isEXTBlendMinmaxSupported,
        isEXTFragDepthSupported,
        isEXTShaderTextureLodSupported,
        isEXTTextureFilterAnisotropicSupported,
        isWEBKITEXTTextureFilterAnisotropicSupported,
        isOESElementIndexUintSupported,
        isOESStandardDerivativesSupported,
        isOESTextureFloatSupported,
        isOESTextureFloatLinearSupported,
        isOESTextureHalfFloatSupported,
        isOESTextureHalfFloatLinearSupported,
        isOESVertexArrayObjectSupported,
        isWEBGLCompressedTextureS3tcSupported,
        isWEBKITWEBGLCompressedTextureS3tcSupported,
        isWEBGLDebugRendererInfoSupported,
        isWEBGLDebugShadersSupported,
        isWEBGLDepthTextureSupported,
        isMOZWEBGLDepthTextureSupported,
        isWEBKITWEBGLDepthTextureSupported,
        isWEBGLDrawBuffersSupported,
        isWEBGLLoseContextSupported,
        isMOZWEBGLLoseContextSupported,
        isWEBKITWEBGLLoseContextSupported,

        // Community approved WebGL Extensions
        isEXTColorBufferFloatSupported,
        isEXTColorBufferHalfFloatSupported,
        isEXTDisjointTimerQuerySupported,
        isEXTDisjointTimerQueryWebgl2Supported,
        isEXTSRGBSupported,
        isWEBGLColorBufferFloatSupported,
        isWEBGLCompressedTextureAstcSupported,
        isMOZWEBGLCompressedTextureAtcSupported,
        isWEBKITWEBGLCompressedTextureAtcSupported,
        isWEBGLCompressedTextureAtcSupported,
        isWEBGLCompressedTextureEtcSupported,
        isWEBGLCompressedTextureEtc1Supported,
        isWEBGLCompressedTexturePvrtcSupported,
        isWEBKITWEBGLCompressedTexturePvrtcSupported,
        isWEBGLCompressedTextureS3tcSrgbSupported,
      };
    });

    const tableOutput = tableData.map(row => [
      row.filename,
      row.operatingSystemName,
      row.operatingSystemVersion,
      row.browserName,
      row.browserVersion,

      // Khronos ratified WebGL Extensions
      row.isANGLEInstancedArraysSupported ? 'X' : '',
      row.isEXTBlendMinmaxSupported ? 'X' : '',
      row.isEXTFragDepthSupported ? 'X' : '',
      row.isEXTShaderTextureLodSupported ? 'X' : '',
      row.isEXTTextureFilterAnisotropicSupported ? 'X' : '',
      row.isWEBKITEXTTextureFilterAnisotropicSupported ? 'X' : '',
      row.isOESElementIndexUintSupported ? 'X' : '',
      row.isOESStandardDerivativesSupported ? 'X' : '',
      row.isOESTextureFloatSupported ? 'X' : '',
      row.isOESTextureFloatLinearSupported ? 'X' : '',
      row.isOESTextureHalfFloatSupported ? 'X' : '',
      row.isOESTextureHalfFloatLinearSupported ? 'X' : '',
      row.isOESVertexArrayObjectSupported ? 'X' : '',
      row.isWEBGLCompressedTextureS3tcSupported ? 'X' : '',
      row.isWEBKITWEBGLCompressedTextureS3tcSupported ? 'X' : '',
      row.isWEBGLDebugRendererInfoSupported ? 'X' : '',
      row.isWEBGLDebugShadersSupported ? 'X' : '',
      row.isWEBGLDepthTextureSupported ? 'X' : '',
      row.isMOZWEBGLDepthTextureSupported ? 'X' : '',
      row.isWEBKITWEBGLDepthTextureSupported ? 'X' : '',
      row.isWEBGLDrawBuffersSupported ? 'X' : '',
      row.isWEBGLLoseContextSupported ? 'X' : '',
      row.isMOZWEBGLLoseContextSupported ? 'X' : '',
      row.isWEBKITWEBGLLoseContextSupported ? 'X' : '',

      // Community approved WebGL Extensions
      row.isEXTColorBufferFloatSupported ? 'X' : '',
      row.isEXTColorBufferHalfFloatSupported ? 'X' : '',
      row.isEXTDisjointTimerQuerySupported ? 'X' : '',
      row.isEXTDisjointTimerQueryWebgl2Supported ? 'X' : '',
      row.isEXTSRGBSupported ? 'X' : '',
      row.isWEBGLColorBufferFloatSupported ? 'X' : '',
      row.isWEBGLCompressedTextureAstcSupported ? 'X' : '',
      row.isMOZWEBGLCompressedTextureAtcSupported ? 'X' : '',
      row.isWEBKITWEBGLCompressedTextureAtcSupported ? 'X' : '',
      row.isWEBGLCompressedTextureAtcSupported ? 'X' : '',
      row.isWEBGLCompressedTextureEtcSupported ? 'X' : '',
      row.isWEBGLCompressedTextureEtc1Supported ? 'X' : '',
      row.isWEBGLCompressedTexturePvrtcSupported ? 'X' : '',
      row.isWEBKITWEBGLCompressedTexturePvrtcSupported ? 'X' : '',
      row.isWEBGLCompressedTextureS3tcSrgbSupported ? 'X' : '',
    ]);

    const table = markdownTable([
      [
        'Device',
        'OS',
        'OS version',
        'Browser',
        'Browser version',
        'ANGLE_instanced_arrays',
        'EXT_blend_minmax',
        'EXT_frag_depth',
        'EXT_shader_texture_lod',
        'EXT_texture_filter_anisotropic',
        'WEBKIT_EXT_texture_filter_anisotropic',
        'OES_element_index_uint',
        'OES_standard_derivatives',
        'OES_texture_float',
        'OES_texture_float_linear',
        'OES_texture_half_float',
        'OES_texture_half_float_linear',
        'OES_vertex_array_object',
        'WEBGL_compressed_texture_s3tc',
        'WEBKIT_WEBGL_compressed_texture_s3tc',
        'WEBGL_debug_renderer_info',
        'WEBGL_debug_shaders',
        'WEBGL_depth_texture',
        'MOZ_WEBGL_depth_texture',
        'WEBKIT_WEBGL_depth_texture',
        'WEBGL_draw_buffers',
        'WEBGL_lose_context',
        'MOZ_WEBGL_lose_context',
        'WEBKIT_WEBGL_lose_context',
        'EXT_color_buffer_float',
        'EXT_color_buffer_half_float',
        'EXT_disjoint_timer_query',
        'EXT_disjoint_timer_query_webgl2',
        'EXT_sRGB',
        'WEBGL_color_buffer_float',
        'WEBGL_compressed_texture_astc',
        'MOZ_WEBGL_compressed_texture_atc',
        'WEBKIT_WEBGL_compressed_texture_atc',
        'WEBGL_compressed_texture_atc',
        'WEBGL_compressed_texture_etc',
        'WEBGL_compressed_texture_etc1',
        'WEBGL_compressed_texture_pvrtc',
        'WEBKIT_WEBGL_compressed_texture_pvrtc',
        'WEBGL_compressed_texture_s3tc_srgb',
      ],
      ...tableOutput,
    ]);

    console.log(table);
  });
});