egret优化--自动切换webgl模式

在egret项目中,在index可以选择renderMode,用来处理 是否开启webgl

在谷歌浏览器下可以查看

webgl模式:

canvas模式:

上图可以看到:webgl模式 和 canvas模式, 创建 的element 名字都是 canvas. 所以如果需要调用原生的element,修改层级关系.可以通过下面代码取到canvas对象

const _player = document.getElementsByClassName("egret-player")[0];
const _canvas = _player.getElementsByTagName("canvas")[0];

但是 webgl 模式下 会添加两个webgl相关的监听,用来处理相关 webgl相关的逻辑

WebGL 兼容性

使用 WebGL 渲染可以获得硬件加速渲染，获得性能上的提升。我们当然希望可以在所有环境中使用 WebGL 渲染。好消息 WebGL 正在获得更多更广泛的支持。

egret webgl相关注意

• WebGL 与脏矩形

  我们知道在 Egret Engine 2.5 版本开始提供自动脏矩形功能，通过减少重绘区域减少渲染的负担来获得程序性能上的提升。在开启自动脏矩形的模式下，只会重绘场景中实际移动的区域。由于实际上 WebGL 和 Canvas 渲染的原理是不同的，在 WebGL 渲染模式下是没有脏区域的。

  如果我们打开重绘区域显示，在 index.html 中设置 data-show-paint-rect：

  data-show-paint-rect=“true”

  在 Canvas 模式下我们可以看到重绘部分会被红色矩形包裹起来。而如果开启了 WebGL 渲染模式，发现并没有重绘区域，因为在 WebGL 模式下并没有脏区域。

• 当引擎发现用户浏览器并不支持 WebGL 时，则会自动切换回到 Canvas 渲染模式中。

• 文本和矢量绘图

  我们知道使用 WebGL 渲染是可以得到性能提升的。但在使用很多文本和矢量绘图的情况下，可能有更多的开销，起不到提升性能的作用。因为在 WebGL 渲染模式下文本和矢量绘图是需要在 Canvas 中缓存下来再渲染到 WebGL 中。由于多了在 Canvas 渲染的过程，如果使用大量的文本或者矢量绘图将不能得到相应的性能提升。

• 在 WebGL 渲染模式中太多的 cacheAsBitmap 和 RenderTexture，因为每个相当于申请一个新的 canvas ，而 webglContext 的数量是有限制的，如果申请多了，之前的就会丢失。

• WebGL 标准正在普及，在手机上有些特性支持还不是很友好。手机上非 Chrome 浏览器现在对不规则遮罩支持还不是很好，在使用 WebGL 渲染器时可以尽量避免使用不规则遮罩。

判断浏览器是否支持webgl

如果你只是单纯的想知道当前浏览器 是否支持webgl
可以直接在浏览器访问https://get.webgl.org/
如果浏览器支持webgl的话,可以看到下图效果

index中 js判断是否支持webGL

webgl模式下 会提升一部分性能,但是并不是所有的浏览器就支持开启webgl.

需要浏览器自动切换支持webgl的,切换到webgl模式

参考链接:https://www.cnblogs.com/jichi/p/10491632.html

代码如下:

var Detector = {
    canvas: !!window.CanvasRenderingContext2D,
    webgl: (function() {
        try {
            var canvas = document.createElement('canvas');
            return !!(window.WebGLRenderingContext && (canvas.getContext('webgl') || canvas.getContext('experimental-webgl')));
        } catch(e) {
            return false;
        }
    })(),
    workers: !!window.Worker,
    fileapi: window.File && window.FileReader && window.FileList && window.Blob,
    getWebGLErrorMessage: function() {
        var element = document.createElement('div');
        element.id = 'webgl-error-message';
        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(!this.webgl) {
            element.innerHTML = window.WebGLRenderingContext ? [
                'Your graphics card does not seem to support <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation" rel="external nofollow" rel="external nofollow" style="color:#000">WebGL</a>.<br />',
                'Find out how to get it <a href="http://get.webgl.org/" rel="external nofollow" rel="external nofollow" style="color:#000">here</a>.'
            ].join('\n') : [
                'Your browser does not seem to support <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation" rel="external nofollow" rel="external nofollow" style="color:#000">WebGL</a>.<br/>',
                'Find out how to get it <a href="http://get.webgl.org/" rel="external nofollow" rel="external nofollow" style="color:#000">here</a>.'
            ].join('\n');
        }
        return element;
    },
    addGetWebGLMessage: function(parameters) {
        var parent, id, element;
        parameters = parameters || {};
        parent = parameters.parent !== undefined ? parameters.parent : document.body;
        id = parameters.id !== undefined ? parameters.id : 'oldie';
        element = Detector.getWebGLErrorMessage();
        element.id = id;
        parent.appendChild(element);
    }
};

通过调用Detector.webgl，如果返回true为支持，false为不支持。

添加到index里 动态切换就可以了