@galacean/engine-rhi-webgl 1.0.0 → 1.1.0-alpha.1

package/dist/main.js

@@ -61,6 +61,11 @@ var engineCore = require('@galacean/engine-core');
     GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["RGBA_S3TC_DXT1_EXT"] = 0x83f1] = "RGBA_S3TC_DXT1_EXT";
     GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["RGBA_S3TC_DXT3_EXT"] = 0x83f2] = "RGBA_S3TC_DXT3_EXT";
     GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["RGBA_S3TC_DXT5_EXT"] = 0x83f3] = "RGBA_S3TC_DXT5_EXT";
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat[// bptc
+    "RGBA_BPTC_UNORM_EXT"] = 0x8e8c] = "RGBA_BPTC_UNORM_EXT";
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["SRGB_ALPHA_BPTC_UNORM_EXT"] = 0x8e8d] = "SRGB_ALPHA_BPTC_UNORM_EXT";
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["RGB_BPTC_SIGNED_FLOAT_EXT"] = 0x8e8e] = "RGB_BPTC_SIGNED_FLOAT_EXT";
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["RGB_BPTC_UNSIGNED_FLOAT_EXT"] = 0x8e8f] = "RGB_BPTC_UNSIGNED_FLOAT_EXT";
 })(exports.GLCompressedTextureInternalFormat || (exports.GLCompressedTextureInternalFormat = {}));
 
 function _defineProperties(target, props) {
@@ -191,6 +196,43 @@ function _inherits(subClass, superClass) {
     if (superClass) _set_prototype_of(subClass, superClass);
 }
 
+/**
+ * WebGL platform engine,support includes WebGL1.0 and WebGL2.0.
+ */ var WebGLEngine = /*#__PURE__*/ function(Engine) {
+    _inherits(WebGLEngine, Engine);
+    function WebGLEngine() {
+        return Engine.apply(this, arguments);
+    }
+    /**
+   * Create a WebGL engine.
+   * @param configuration - WebGL engine configuration
+   * @returns A promise that will resolve when the engine is created
+   */ WebGLEngine.create = function create(configuration) {
+        var canvas = configuration.canvas;
+        var webCanvas = new WebCanvas(typeof canvas === "string" ? document.getElementById(canvas) : canvas);
+        var webGLGraphicDevice = new WebGLGraphicDevice(configuration.graphicDeviceOptions);
+        var engine = new WebGLEngine(webCanvas, webGLGraphicDevice, configuration);
+        // @ts-ignore
+        var promise = engine._initialize(configuration);
+        return promise.then(function() {
+            engine.sceneManager.addScene(new engineCore.Scene(engine, "DefaultScene"));
+            return engine;
+        });
+    };
+    _create_class(WebGLEngine, [
+        {
+            key: "canvas",
+            get: /**
+   * Web canvas.
+   */ function get() {
+                // @ts-ignore
+                return this._canvas;
+            }
+        }
+    ]);
+    return WebGLEngine;
+}(engineCore.Engine);
+
 function _extends() {
     _extends = Object.assign || function assign(target) {
         for (var i = 1; i < arguments.length; i++) {
@@ -204,6 +246,80 @@ function _extends() {
     return _extends.apply(this, arguments);
 }
 
+var GLBuffer = /*#__PURE__*/ function() {
+    function GLBuffer(rhi, type, byteLength, bufferUsage, data) {
+        if (bufferUsage === void 0) bufferUsage = engineCore.BufferUsage.Static;
+        var gl = rhi.gl;
+        var glBuffer = gl.createBuffer();
+        var glBufferUsage = this._getGLBufferUsage(gl, bufferUsage);
+        var glBindTarget = type === engineCore.BufferBindFlag.VertexBuffer ? gl.ARRAY_BUFFER : gl.ELEMENT_ARRAY_BUFFER;
+        this._gl = gl;
+        this._glBuffer = glBuffer;
+        this._glBufferUsage = glBufferUsage;
+        this._glBindTarget = glBindTarget;
+        this._isWebGL2 = rhi.isWebGL2;
+        this.bind();
+        if (data) {
+            gl.bufferData(glBindTarget, data, glBufferUsage);
+        } else {
+            gl.bufferData(glBindTarget, byteLength, glBufferUsage);
+        }
+        gl.bindBuffer(glBindTarget, null);
+    }
+    var _proto = GLBuffer.prototype;
+    _proto.bind = function bind() {
+        this._gl.bindBuffer(this._glBindTarget, this._glBuffer);
+    };
+    _proto.setData = function setData(byteLength, data, bufferByteOffset, dataOffset, dataLength, options) {
+        var gl = this._gl;
+        var glBindTarget = this._glBindTarget;
+        this.bind();
+        if (options === engineCore.SetDataOptions.Discard) {
+            gl.bufferData(glBindTarget, byteLength, this._glBufferUsage);
+        }
+        // TypeArray is BYTES_PER_ELEMENT, unTypeArray is 1
+        var byteSize = data.BYTES_PER_ELEMENT || 1;
+        var dataByteLength = dataLength ? byteSize * dataLength : data.byteLength;
+        if (dataOffset !== 0 || dataByteLength < data.byteLength) {
+            var isArrayBufferView = data.byteOffset !== undefined;
+            if (this._isWebGL2 && isArrayBufferView) {
+                gl.bufferSubData(glBindTarget, bufferByteOffset, data, dataOffset, dataByteLength / byteSize);
+            } else {
+                var subData = new Uint8Array(isArrayBufferView ? data.buffer : data, dataOffset * byteSize, dataByteLength);
+                gl.bufferSubData(glBindTarget, bufferByteOffset, subData);
+            }
+        } else {
+            gl.bufferSubData(glBindTarget, bufferByteOffset, data);
+        }
+        gl.bindBuffer(glBindTarget, null);
+    };
+    _proto.getData = function getData(data, bufferByteOffset, dataOffset, dataLength) {
+        if (this._isWebGL2) {
+            var gl = this._gl;
+            this.bind();
+            gl.getBufferSubData(this._glBindTarget, bufferByteOffset, data, dataOffset, dataLength);
+        } else {
+            throw "Buffer is write-only on WebGL1.0 platforms.";
+        }
+    };
+    _proto.destroy = function destroy() {
+        this._gl.deleteBuffer(this._glBuffer);
+        this._gl = null;
+        this._glBuffer = null;
+    };
+    _proto._getGLBufferUsage = function _getGLBufferUsage(gl, bufferUsage) {
+        switch(bufferUsage){
+            case engineCore.BufferUsage.Static:
+                return gl.STATIC_DRAW;
+            case engineCore.BufferUsage.Dynamic:
+                return gl.DYNAMIC_DRAW;
+            case engineCore.BufferUsage.Stream:
+                return gl.STREAM_DRAW;
+        }
+    };
+    return GLBuffer;
+}();
+
 /**
  * GL capability.
  */ var GLCapability = /*#__PURE__*/ function() {
@@ -227,7 +343,8 @@ function _extends() {
         RGB_ETC1_WEBGL = exports.GLCompressedTextureInternalFormat.RGB_ETC1_WEBGL, // etc
         R11_EAC = exports.GLCompressedTextureInternalFormat.R11_EAC, SRGB8_ALPHA8_ETC2_EAC = exports.GLCompressedTextureInternalFormat.SRGB8_ALPHA8_ETC2_EAC, // pvrtc
         RGB_PVRTC_4BPPV1_IMG = exports.GLCompressedTextureInternalFormat.RGB_PVRTC_4BPPV1_IMG, RGBA_PVRTC_2BPPV1_IMG = exports.GLCompressedTextureInternalFormat.RGBA_PVRTC_2BPPV1_IMG, // s3tc
-        RGB_S3TC_DXT1_EXT = exports.GLCompressedTextureInternalFormat.RGB_S3TC_DXT1_EXT, RGBA_S3TC_DXT5_EXT = exports.GLCompressedTextureInternalFormat.RGBA_S3TC_DXT5_EXT;
+        RGB_S3TC_DXT1_EXT = exports.GLCompressedTextureInternalFormat.RGB_S3TC_DXT1_EXT, RGBA_S3TC_DXT5_EXT = exports.GLCompressedTextureInternalFormat.RGBA_S3TC_DXT5_EXT, // bptc
+        RGBA_BPTC_UNORM_EXT = exports.GLCompressedTextureInternalFormat.RGBA_BPTC_UNORM_EXT, RGB_BPTC_UNSIGNED_FLOAT_EXT = exports.GLCompressedTextureInternalFormat.RGB_BPTC_UNSIGNED_FLOAT_EXT;
         if (internalType >= RGBA_ASTC_4X4_KHR && RGBA_ASTC_12X12_KHR <= RGBA_ASTC_12X12_KHR || internalType >= SRGB8_ALPHA8_ASTC_4X4_KHR && internalType <= SRGB8_ALPHA8_ASTC_12X12_KHR) {
             return this.canIUse(engineCore.GLCapabilityType.astc);
         } else if (internalType === RGB_ETC1_WEBGL) {
@@ -238,6 +355,8 @@ function _extends() {
             return this.canIUse(engineCore.GLCapabilityType.pvrtc);
         } else if (internalType >= RGB_S3TC_DXT1_EXT && internalType <= RGBA_S3TC_DXT5_EXT) {
             return this.canIUse(engineCore.GLCapabilityType.s3tc);
+        } else if (internalType >= RGBA_BPTC_UNORM_EXT && internalType <= RGB_BPTC_UNSIGNED_FLOAT_EXT) {
+            return this.canIUse(engineCore.GLCapabilityType.bptc);
         }
         return false;
     };
@@ -247,7 +366,7 @@ function _extends() {
         var cap = this.capabilityList;
         var isWebGL2 = this.rhi.isWebGL2;
         var requireExtension = this.rhi.requireExtension.bind(this.rhi);
-        var shaderVertexID = engineCore.GLCapabilityType.shaderVertexID, standardDerivatives = engineCore.GLCapabilityType.standardDerivatives, shaderTextureLod = engineCore.GLCapabilityType.shaderTextureLod, elementIndexUint = engineCore.GLCapabilityType.elementIndexUint, depthTexture = engineCore.GLCapabilityType.depthTexture, vertexArrayObject = engineCore.GLCapabilityType.vertexArrayObject, instancedArrays = engineCore.GLCapabilityType.instancedArrays, multipleSample = engineCore.GLCapabilityType.multipleSample, drawBuffers = engineCore.GLCapabilityType.drawBuffers, astc = engineCore.GLCapabilityType.astc, astc_webkit = engineCore.GLCapabilityType.astc_webkit, etc = engineCore.GLCapabilityType.etc, etc_webkit = engineCore.GLCapabilityType.etc_webkit, etc1 = engineCore.GLCapabilityType.etc1, etc1_webkit = engineCore.GLCapabilityType.etc1_webkit, pvrtc = engineCore.GLCapabilityType.pvrtc, pvrtc_webkit = engineCore.GLCapabilityType.pvrtc_webkit, s3tc = engineCore.GLCapabilityType.s3tc, s3tc_webkit = engineCore.GLCapabilityType.s3tc_webkit, textureFloat = engineCore.GLCapabilityType.textureFloat, textureHalfFloat = engineCore.GLCapabilityType.textureHalfFloat, textureFloatLinear = engineCore.GLCapabilityType.textureFloatLinear, textureHalfFloatLinear = engineCore.GLCapabilityType.textureHalfFloatLinear, WEBGL_colorBufferFloat = engineCore.GLCapabilityType.WEBGL_colorBufferFloat, colorBufferFloat = engineCore.GLCapabilityType.colorBufferFloat, colorBufferHalfFloat = engineCore.GLCapabilityType.colorBufferHalfFloat, textureFilterAnisotropic = engineCore.GLCapabilityType.textureFilterAnisotropic;
+        var shaderVertexID = engineCore.GLCapabilityType.shaderVertexID, standardDerivatives = engineCore.GLCapabilityType.standardDerivatives, shaderTextureLod = engineCore.GLCapabilityType.shaderTextureLod, elementIndexUint = engineCore.GLCapabilityType.elementIndexUint, depthTexture = engineCore.GLCapabilityType.depthTexture, vertexArrayObject = engineCore.GLCapabilityType.vertexArrayObject, instancedArrays = engineCore.GLCapabilityType.instancedArrays, multipleSample = engineCore.GLCapabilityType.multipleSample, drawBuffers = engineCore.GLCapabilityType.drawBuffers, astc = engineCore.GLCapabilityType.astc, astc_webkit = engineCore.GLCapabilityType.astc_webkit, etc = engineCore.GLCapabilityType.etc, etc_webkit = engineCore.GLCapabilityType.etc_webkit, etc1 = engineCore.GLCapabilityType.etc1, etc1_webkit = engineCore.GLCapabilityType.etc1_webkit, pvrtc = engineCore.GLCapabilityType.pvrtc, pvrtc_webkit = engineCore.GLCapabilityType.pvrtc_webkit, s3tc = engineCore.GLCapabilityType.s3tc, s3tc_webkit = engineCore.GLCapabilityType.s3tc_webkit, bptc = engineCore.GLCapabilityType.bptc, textureFloat = engineCore.GLCapabilityType.textureFloat, textureHalfFloat = engineCore.GLCapabilityType.textureHalfFloat, textureFloatLinear = engineCore.GLCapabilityType.textureFloatLinear, textureHalfFloatLinear = engineCore.GLCapabilityType.textureHalfFloatLinear, WEBGL_colorBufferFloat = engineCore.GLCapabilityType.WEBGL_colorBufferFloat, colorBufferFloat = engineCore.GLCapabilityType.colorBufferFloat, colorBufferHalfFloat = engineCore.GLCapabilityType.colorBufferHalfFloat, textureFilterAnisotropic = engineCore.GLCapabilityType.textureFilterAnisotropic;
         cap.set(shaderVertexID, isWebGL2);
         cap.set(standardDerivatives, isWebGL2 || !!requireExtension(standardDerivatives));
         cap.set(shaderTextureLod, isWebGL2 || !!requireExtension(shaderTextureLod));
@@ -269,6 +388,7 @@ function _extends() {
         cap.set(etc1, !!(requireExtension(etc1) || requireExtension(etc1_webkit)));
         cap.set(pvrtc, !!(requireExtension(pvrtc) || requireExtension(pvrtc_webkit)));
         cap.set(s3tc, !!(requireExtension(s3tc) || requireExtension(s3tc_webkit)));
+        cap.set(bptc, !!requireExtension(bptc));
     };
     /**
    * If there are extensions that can supplement this ability, smooth out the difference.
@@ -473,8 +593,8 @@ function _extends() {
                 if (useVao) {
                     gl.drawElements(topology, count, _glIndexType, start * _glIndexByteCount);
                 } else {
-                    var _nativeBuffer = _indexBufferBinding.buffer._nativeBuffer;
-                    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, _nativeBuffer);
+                    var _glBuffer = _indexBufferBinding.buffer._platformBuffer._glBuffer;
+                    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, _glBuffer);
                     gl.drawElements(topology, count, _glIndexType, start * _glIndexByteCount);
                     gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
                 }
@@ -487,8 +607,8 @@ function _extends() {
                     if (useVao) {
                         gl.drawElementsInstanced(topology, count, _glIndexType, start * _glIndexByteCount, _instanceCount);
                     } else {
-                        var _nativeBuffer1 = _indexBufferBinding.buffer._nativeBuffer;
-                        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, _nativeBuffer1);
+                        var _glBuffer1 = _indexBufferBinding.buffer._platformBuffer._glBuffer;
+                        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, _glBuffer1);
                         gl.drawElementsInstanced(topology, count, _glIndexType, start * _glIndexByteCount, _instanceCount);
                         gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
                     }
@@ -528,14 +648,14 @@ function _extends() {
             var element = attributes[name];
             if (element) {
                 var _vertexBufferBindings_element_bindingIndex = vertexBufferBindings[element.bindingIndex], buffer = _vertexBufferBindings_element_bindingIndex.buffer, stride = _vertexBufferBindings_element_bindingIndex.stride;
-                vbo = buffer._nativeBuffer;
+                vbo = buffer._platformBuffer._glBuffer;
                 // prevent binding the vbo which already bound at the last loop, e.g. a buffer with multiple attributes.
                 if (lastBoundVbo !== vbo) {
                     lastBoundVbo = vbo;
                     gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
                 }
                 gl.enableVertexAttribArray(loc);
-                var elementInfo = element._glElementInfo;
+                var elementInfo = element._formatMetaInfo;
                 gl.vertexAttribPointer(loc, elementInfo.size, elementInfo.type, elementInfo.normalized, stride, element.offset);
                 if (this._canUseInstancedArrays) {
                     gl.vertexAttribDivisor(loc, element.instanceStepRate);
@@ -560,7 +680,7 @@ function _extends() {
         // @ts-ignore
         var _indexBufferBinding = this._primitive._indexBufferBinding;
         if (_indexBufferBinding) {
-            gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, _indexBufferBinding.buffer._nativeBuffer);
+            gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, _indexBufferBinding.buffer._platformBuffer._glBuffer);
         }
         this._bindBufferAndAttrib(shaderProgram);
         /** unbind */ gl.bindVertexArray(null);
@@ -667,9 +787,9 @@ function _extends() {
         var isWebGL2 = this._isWebGL2;
         var _this__formatDetail = this._formatDetail, internalFormat = _this__formatDetail.internalFormat, baseFormat = _this__formatDetail.baseFormat, dataType = _this__formatDetail.dataType;
         // @ts-ignore
-        var _this__texture = this._texture, mipmapCount = _this__texture.mipmapCount, width = _this__texture.width, height = _this__texture.height, _isDepthTexture = _this__texture._isDepthTexture;
+        var _this__texture = this._texture, mipmapCount = _this__texture.mipmapCount, width = _this__texture.width, height = _this__texture.height, usage = _this__texture.usage, _isDepthTexture = _this__texture._isDepthTexture;
         this._bind();
-        if (isWebGL2 && !(baseFormat === gl.LUMINANCE_ALPHA || baseFormat === gl.ALPHA)) {
+        if (isWebGL2 && !(baseFormat === gl.LUMINANCE_ALPHA || baseFormat === gl.ALPHA) && usage !== engineCore.TextureUsage.Dynamic) {
             gl.texStorage2D(this._target, mipmapCount, internalFormat, width, height);
         } else {
             if (!isCube) {
@@ -816,16 +936,21 @@ function _extends() {
                     dataType: gl.FLOAT,
                     isCompressed: false
                 };
-            case engineCore.TextureFormat.DXT1:
+            case engineCore.TextureFormat.BC1:
                 return {
                     internalFormat: exports.GLCompressedTextureInternalFormat.RGB_S3TC_DXT1_EXT,
                     isCompressed: true
                 };
-            case engineCore.TextureFormat.DXT5:
+            case engineCore.TextureFormat.BC3:
                 return {
                     internalFormat: exports.GLCompressedTextureInternalFormat.RGBA_S3TC_DXT5_EXT,
                     isCompressed: true
                 };
+            case engineCore.TextureFormat.BC7:
+                return {
+                    internalFormat: exports.GLCompressedTextureInternalFormat.RGBA_BPTC_UNORM_EXT,
+                    isCompressed: true
+                };
             case engineCore.TextureFormat.ETC1_RGB:
                 return {
                     internalFormat: exports.GLCompressedTextureInternalFormat.RGB_ETC1_WEBGL,
@@ -1464,11 +1589,15 @@ function _extends() {
    * {@inheritDoc IPlatformTexture2D.setImageSource}
    */ _proto.setImageSource = function setImageSource(imageSource, mipLevel, flipY, premultiplyAlpha, x, y) {
         var gl = this._gl;
-        var _this__formatDetail = this._formatDetail, baseFormat = _this__formatDetail.baseFormat, dataType = _this__formatDetail.dataType;
+        var _this__formatDetail = this._formatDetail, internalFormat = _this__formatDetail.internalFormat, baseFormat = _this__formatDetail.baseFormat, dataType = _this__formatDetail.dataType;
         this._bind();
         gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, +flipY);
         gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, +premultiplyAlpha);
-        gl.texSubImage2D(this._target, mipLevel, x || 0, y || 0, baseFormat, dataType, imageSource);
+        if (this._texture.usage === engineCore.TextureUsage.Dynamic) {
+            gl.texImage2D(this._target, mipLevel, internalFormat, baseFormat, dataType, imageSource);
+        } else {
+            gl.texSubImage2D(this._target, mipLevel, x || 0, y || 0, baseFormat, dataType, imageSource);
+        }
     };
     /**
    * {@inheritDoc IPlatformTexture2D.getPixelBuffer }
@@ -1526,7 +1655,8 @@ function _extends() {
         this._bind();
         gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, +flipY);
         gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, +premultiplyAlpha);
-        gl.texSubImage3D(this._target, mipLevel, x, y, elementIndex, imageSource.width, imageSource.height, 1, baseFormat, dataType, imageSource);
+        var _imageSource_width, _imageSource_height;
+        gl.texSubImage3D(this._target, mipLevel, x, y, elementIndex, (_imageSource_width = imageSource.width) != null ? _imageSource_width : imageSource.codedWidth, (_imageSource_height = imageSource.height) != null ? _imageSource_height : imageSource.codedHeight, 1, baseFormat, dataType, imageSource);
     };
     /**
    * {@inheritDoc IPlatformTexture2DArray.getPixelBuffer}
@@ -1625,22 +1755,22 @@ exports.WebGLMode = void 0;
     WebGLMode[WebGLMode[/** WebGL1.0, */ "WebGL1"] = 2] = "WebGL1";
 })(exports.WebGLMode || (exports.WebGLMode = {}));
 /**
- * WebGL renderer, including WebGL1.0 and WebGL2.0.
- */ var WebGLRenderer = /*#__PURE__*/ function() {
-    function WebGLRenderer(initializeOptions) {
+ * WebGL graphic device, including WebGL1.0 and WebGL2.0.
+ */ var WebGLGraphicDevice = /*#__PURE__*/ function() {
+    function WebGLGraphicDevice(initializeOptions) {
         if (initializeOptions === void 0) initializeOptions = {};
+        /** @internal */ this._readFrameBuffer = null;
         /** @internal */ this._enableGlobalDepthBias = false;
         this._activeTextures = new Array(32);
-        // cache value
         this._lastViewport = new engineMath.Vector4(null, null, null, null);
         this._lastScissor = new engineMath.Vector4(null, null, null, null);
         this._lastClearColor = new engineMath.Color(null, null, null, null);
         this._scissorEnable = false;
         var options = _extends({
             webGLMode: 0,
-            alpha: false,
             stencil: true,
-            _forceFlush: false
+            _forceFlush: false,
+            _maxAllowSkinUniformVectorCount: 256
         }, initializeOptions);
         if (engineCore.SystemInfo.platform === engineCore.Platform.IPhone || engineCore.SystemInfo.platform === engineCore.Platform.IPad) {
             var version = engineCore.SystemInfo.operatingSystem.match(/(\d+).?(\d+)?.?(\d+)?/);
@@ -1653,12 +1783,20 @@ exports.WebGLMode = void 0;
             }
         }
         this._options = options;
+        this._onWebGLContextLost = this._onWebGLContextLost.bind(this);
+        this._onWebGLContextRestored = this._onWebGLContextRestored.bind(this);
     }
-    var _proto = WebGLRenderer.prototype;
-    _proto.init = function init(canvas) {
+    var _proto = WebGLGraphicDevice.prototype;
+    _proto.init = function init(canvas, onDeviceLost, onDeviceRestored) {
         var options = this._options;
-        var webCanvas = this._webCanvas = canvas._webCanvas;
+        var webCanvas = canvas._webCanvas;
         var webGLMode = options.webGLMode;
+        this._onDeviceLost = onDeviceLost;
+        this._onDeviceRestored = onDeviceRestored;
+        webCanvas.addEventListener("webglcontextlost", this._onWebGLContextLost, false);
+        webCanvas.addEventListener("webglcontextrestored", this._onWebGLContextRestored, false);
+        webCanvas.addEventListener("webglcontextcreationerror", this._onContextCreationError, false);
+        this._webCanvas = webCanvas;
         var gl;
         if (webGLMode == 0 || webGLMode == 1) {
             gl = webCanvas.getContext("webgl2", options);
@@ -1684,16 +1822,7 @@ exports.WebGLMode = void 0;
             throw new Error("Get GL Context FAILED.");
         }
         this._gl = gl;
-        this._activeTextureID = gl.TEXTURE0;
-        this._renderStates = new GLRenderStates(gl);
-        this._extensions = new GLExtensions(this);
-        this._capability = new GLCapability(this);
-        // Make sure the active texture in gl context is on default, because gl context may be used in other webgl renderer.
-        gl.activeTexture(gl.TEXTURE0);
-        var debugRenderInfo = gl.getExtension("WEBGL_debug_renderer_info");
-        if (debugRenderInfo != null) {
-            this._renderer = gl.getParameter(debugRenderInfo.UNMASKED_RENDERER_WEBGL);
-        }
+        this._initGLState(gl);
     };
     _proto.createPlatformPrimitive = function createPlatformPrimitive(primitive) {
         return new GLPrimitive(this, primitive);
@@ -1710,6 +1839,10 @@ exports.WebGLMode = void 0;
     _proto.createPlatformRenderTarget = function createPlatformRenderTarget(target) {
         return new GLRenderTarget(this, target);
     };
+    _proto.createPlatformBuffer = function createPlatformBuffer(type, byteLength, bufferUsage, data) {
+        if (bufferUsage === void 0) bufferUsage = engineCore.BufferUsage.Static;
+        return new GLBuffer(this, type, byteLength, bufferUsage, data);
+    };
     _proto.requireExtension = function requireExtension(ext) {
         return this._extensions.requireExtension(ext);
     };
@@ -1792,23 +1925,23 @@ exports.WebGLMode = void 0;
     };
     _proto.activeRenderTarget = function activeRenderTarget(renderTarget, viewport, mipLevel) {
         var gl = this._gl;
+        var bufferWidth, bufferHeight;
         if (renderTarget) {
             var /** @ts-ignore */ _renderTarget__platformRenderTarget;
             (_renderTarget__platformRenderTarget = renderTarget._platformRenderTarget) == null ? void 0 : _renderTarget__platformRenderTarget._activeRenderTarget();
-            var width = renderTarget.width >> mipLevel;
-            var height = renderTarget.height >> mipLevel;
-            this.viewport(0, 0, width, height);
-            this.scissor(0, 0, width, height);
+            bufferWidth = renderTarget.width >> mipLevel;
+            bufferHeight = renderTarget.height >> mipLevel;
         } else {
             gl.bindFramebuffer(gl.FRAMEBUFFER, null);
-            var drawingBufferWidth = gl.drawingBufferWidth, drawingBufferHeight = gl.drawingBufferHeight;
-            var width1 = drawingBufferWidth * viewport.z;
-            var height1 = drawingBufferHeight * viewport.w;
-            var x = viewport.x * drawingBufferWidth;
-            var y = drawingBufferHeight - viewport.y * drawingBufferHeight - height1;
-            this.viewport(x, y, width1, height1);
-            this.scissor(x, y, width1, height1);
+            bufferWidth = gl.drawingBufferWidth;
+            bufferHeight = gl.drawingBufferHeight;
         }
+        var width = bufferWidth * viewport.z;
+        var height = bufferHeight * viewport.w;
+        var x = viewport.x * bufferWidth;
+        var y = bufferHeight - viewport.y * bufferHeight - height;
+        this.viewport(x, y, width, height);
+        this.scissor(x, y, width, height);
     };
     _proto.activeTexture = function activeTexture(textureID) {
         if (this._activeTextureID !== textureID) {
@@ -1837,8 +1970,57 @@ exports.WebGLMode = void 0;
     _proto.flush = function flush() {
         this._gl.flush();
     };
-    _proto.destroy = function destroy() {};
-    _create_class(WebGLRenderer, [
+    _proto.forceLoseDevice = function forceLoseDevice() {
+        var extension = this.requireExtension(engineCore.GLCapabilityType.WEBGL_lose_context);
+        extension.loseContext();
+    };
+    _proto.forceRestoreDevice = function forceRestoreDevice() {
+        var extension = this.requireExtension(engineCore.GLCapabilityType.WEBGL_lose_context);
+        extension.restoreContext();
+    };
+    _proto.resetState = function resetState() {
+        this._readFrameBuffer = null;
+        this._enableGlobalDepthBias = false;
+        this._currentBindShaderProgram = null;
+        var activeTextures = this._activeTextures;
+        for(var i = 0, n = activeTextures.length; i < n; i++){
+            activeTextures[i] = null;
+        }
+        this._lastViewport.set(null, null, null, null);
+        this._lastScissor.set(null, null, null, null);
+        this._lastClearColor.set(null, null, null, null);
+        this._scissorEnable = false;
+        this._initGLState(this._gl);
+    };
+    _proto._initGLState = function _initGLState(gl) {
+        this._activeTextureID = gl.TEXTURE0;
+        this._renderStates = new GLRenderStates(gl);
+        this._extensions = new GLExtensions(this);
+        this._capability = new GLCapability(this);
+        // Make sure the active texture in gl context is on default, because gl context may be used in other webgl renderer.
+        gl.activeTexture(gl.TEXTURE0);
+        var debugRenderInfo = gl.getExtension("WEBGL_debug_renderer_info");
+        if (debugRenderInfo != null) {
+            this._renderer = gl.getParameter(debugRenderInfo.UNMASKED_RENDERER_WEBGL);
+        }
+    };
+    _proto.destroy = function destroy() {
+        var webCanvas = this._webCanvas;
+        webCanvas.removeEventListener("webglcontextcreationerror", this._onContextCreationError, false);
+        webCanvas.removeEventListener("webglcontextlost", this._onWebGLContextLost, false);
+        webCanvas.removeEventListener("webglcontextrestored", this._onWebGLContextRestored, false);
+    };
+    _proto._onContextCreationError = function _onContextCreationError(event) {
+        console.error("WebGLRenderer: WebGL context could not be created. Reason: ", event.statusMessage);
+    };
+    _proto._onWebGLContextLost = function _onWebGLContextLost(event) {
+        event.preventDefault();
+        this._onDeviceLost();
+    };
+    _proto._onWebGLContextRestored = function _onWebGLContextRestored(event) {
+        this._onDeviceRestored();
+    };
+    _create_class(WebGLGraphicDevice, [
         {
             key: "isWebGL2",
             get: function get() {
@@ -1879,32 +2061,10 @@ exports.WebGLMode = void 0;
             }
         }
     ]);
-    return WebGLRenderer;
+    return WebGLGraphicDevice;
 }();
 
-/**
- * WebGL platform engine,support includes WebGL1.0 and WebGL2.0.
- */ var WebGLEngine = /*#__PURE__*/ function(Engine) {
-    _inherits(WebGLEngine, Engine);
-    function WebGLEngine(canvas, webGLRendererOptions) {
-        var webCanvas = new WebCanvas(typeof canvas === "string" ? document.getElementById(canvas) : canvas);
-        var hardwareRenderer = new WebGLRenderer(webGLRendererOptions);
-        return Engine.call(this, webCanvas, hardwareRenderer);
-    }
-    _create_class(WebGLEngine, [
-        {
-            key: "canvas",
-            get: /**
-   * Web canvas.
-   */ function get() {
-                return this._canvas;
-            }
-        }
-    ]);
-    return WebGLEngine;
-}(engineCore.Engine);
-
 exports.WebCanvas = WebCanvas;
 exports.WebGLEngine = WebGLEngine;
-exports.WebGLRenderer = WebGLRenderer;
+exports.WebGLGraphicDevice = WebGLGraphicDevice;
 //# sourceMappingURL=main.js.map