WebGL兼容性检查

文章介绍了如何在JavaScript中检测WebGL和WebGL2的可用性,提供了isWebGLAvailable和isWebGL2Available方法,以及检查颜色空间支持和错误消息获取的函数,帮助开发者根据浏览器兼容性进行相应处理。
摘要由CSDN通过智能技术生成

引入文件WebGL.js

class WebGL {

  static isWebGLAvailable () {

    try {

      const canvas = document.createElement('canvas');
      return !!(window.WebGLRenderingContext && (canvas.getContext('webgl') || canvas.getContext('experimental-webgl')));

    } catch (e) {

      return false;

    }

  }

  static isWebGL2Available () {

    try {

      const canvas = document.createElement('canvas');
      return !!(window.WebGL2RenderingContext && canvas.getContext('webgl2'));

    } catch (e) {

      return false;

    }

  }

  static isColorSpaceAvailable (colorSpace) {

    try {

      const canvas = document.createElement('canvas');
      const ctx = window.WebGL2RenderingContext && canvas.getContext('webgl2');
      ctx.drawingBufferColorSpace = colorSpace;
      return ctx.drawingBufferColorSpace === colorSpace; // deepscan-disable-line SAME_OPERAND_VALUE

    } catch (e) {

      return false;

    }

  }

  static getWebGLErrorMessage () {

    return this.getErrorMessage(1);

  }

  static getWebGL2ErrorMessage () {

    return this.getErrorMessage(2);

  }

  static getErrorMessage (version) {

    const names = {
      1: 'WebGL',
      2: 'WebGL 2'
    };

    const contexts = {
      1: window.WebGLRenderingContext,
      2: window.WebGL2RenderingContext
    };

    let message = 'Your $0 does not seem to support <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation" style="color:#000">$1</a>';

    const element = document.createElement('div');
    element.id = 'webglmessage';
    element.style.fontFamily = 'monospace';
    element.style.fontSize = '13px';
    element.style.fontWeight = 'normal';
    element.style.textAlign = 'center';
    element.style.background = '#fff';
    element.style.color = '#000';
    element.style.padding = '1.5em';
    element.style.width = '400px';
    element.style.margin = '5em auto 0';

    if (contexts[version]) {

      message = message.replace('$0', 'graphics card');

    } else {

      message = message.replace('$0', 'browser');

    }

    message = message.replace('$1', names[version]);

    element.innerHTML = message;

    return element;

  }

}

export default WebGL;

JS中使用

import WebGL from './WebGL.js';

if (WebGL.isWebGLAvailable()) {

  // Initiate function or other initializations here
  console.log('支持WebGL')
} else {

	// 不支持WebGL

}
  • 11
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值