@galacean/engine-rhi-webgl 0.9.0 → 1.0.0-beta.0

package/dist/miniprogram.js

@@ -192,6 +192,37 @@ 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" ? engineMiniprogramAdapter.document.getElementById(canvas) : canvas);
+        var webGLRenderer = new WebGLGraphicDevice(configuration.graphicDeviceOptions);
+        var engine = new WebGLEngine(webCanvas, webGLRenderer, configuration);
+        return engine._initialize(configuration);
+    };
+    _create_class(WebGLEngine, [
+        {
+            key: "canvas",
+            get: /**
+   * Web canvas.
+   */ function get() {
+                return this._canvas;
+            }
+        }
+    ]);
+    return WebGLEngine;
+}(miniprogram$1.Engine);
+
 function _extends() {
     _extends = Object.assign || function assign(target) {
         for (var i = 1; i < arguments.length; i++) {
@@ -205,6 +236,84 @@ function _extends() {
     return _extends.apply(this, arguments);
 }
 
+var GLBuffer = /*#__PURE__*/ function() {
+    function GLBuffer(rhi, type, byteLength, bufferUsage, data) {
+        if (bufferUsage === void 0) bufferUsage = miniprogram$1.BufferUsage.Static;
+        var gl = rhi.gl;
+        var glBuffer = gl.createBuffer();
+        var glBufferUsage = this._getGLBufferUsage(gl, bufferUsage);
+        var glBindTarget = type === miniprogram$1.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 === miniprogram$1.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.resize = function resize(byteLength) {
+        this.bind();
+        this._gl.bufferData(this._glBindTarget, byteLength, this._glBufferUsage);
+    };
+    _proto.destroy = function destroy() {
+        this._gl.deleteBuffer(this._glBuffer);
+        this._gl = null;
+        this._glBuffer = null;
+    };
+    _proto._getGLBufferUsage = function _getGLBufferUsage(gl, bufferUsage) {
+        switch(bufferUsage){
+            case miniprogram$1.BufferUsage.Static:
+                return gl.STATIC_DRAW;
+            case miniprogram$1.BufferUsage.Dynamic:
+                return gl.DYNAMIC_DRAW;
+            case miniprogram$1.BufferUsage.Stream:
+                return gl.STREAM_DRAW;
+        }
+    };
+    return GLBuffer;
+}();
+
 /**
  * GL capability.
  */ var GLCapability = /*#__PURE__*/ function() {
@@ -474,8 +583,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);
                 }
@@ -488,8 +597,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);
                     }
@@ -529,7 +638,7 @@ 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;
@@ -561,7 +670,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);
@@ -1626,20 +1735,19 @@ 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 miniprogram.Vector4(null, null, null, null);
         this._lastScissor = new miniprogram.Vector4(null, null, null, null);
         this._lastClearColor = new miniprogram.Color(null, null, null, null);
         this._scissorEnable = false;
         var options = _extends({
             webGLMode: 0,
-            alpha: false,
             stencil: true,
             _forceFlush: false
         }, initializeOptions);
@@ -1654,12 +1762,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);
@@ -1685,16 +1801,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);
@@ -1711,6 +1818,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 = miniprogram$1.BufferUsage.Static;
+        return new GLBuffer(this, type, byteLength, bufferUsage, data);
+    };
     _proto.requireExtension = function requireExtension(ext) {
         return this._extensions.requireExtension(ext);
     };
@@ -1838,8 +1949,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(miniprogram$1.GLCapabilityType.WEBGL_lose_context);
+        extension.loseContext();
+    };
+    _proto.forceRestoreDevice = function forceRestoreDevice() {
+        var extension = this.requireExtension(miniprogram$1.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() {
@@ -1880,31 +2040,9 @@ 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" ? engineMiniprogramAdapter.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;
-}(miniprogram$1.Engine);
-
 exports.WebCanvas = WebCanvas;
 exports.WebGLEngine = WebGLEngine;
-exports.WebGLRenderer = WebGLRenderer;
+exports.WebGLGraphicDevice = WebGLGraphicDevice;

package/dist/module.js

@@ -1,5 +1,5 @@
 import { Vector2, Vector4, Color } from '@galacean/engine-math';
-import { GLCapabilityType, Logger, TextureWrapMode, TextureFormat, RenderBufferDepthFormat, TextureFilterMode, TextureDepthCompareFunction, Texture, TextureCube, CameraClearFlags, ColorWriteMask, SystemInfo, Platform, Engine } from '@galacean/engine-core';
+import { Engine, BufferUsage, BufferBindFlag, SetDataOptions, GLCapabilityType, Logger, TextureWrapMode, TextureFormat, RenderBufferDepthFormat, TextureFilterMode, TextureDepthCompareFunction, Texture, TextureCube, CameraClearFlags, ColorWriteMask, SystemInfo, Platform } from '@galacean/engine-core';
 
 /**
  * Smoothing plug-in.
@@ -187,6 +187,37 @@ 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 webGLRenderer = new WebGLGraphicDevice(configuration.graphicDeviceOptions);
+        var engine = new WebGLEngine(webCanvas, webGLRenderer, configuration);
+        return engine._initialize(configuration);
+    };
+    _create_class(WebGLEngine, [
+        {
+            key: "canvas",
+            get: /**
+   * Web canvas.
+   */ function get() {
+                return this._canvas;
+            }
+        }
+    ]);
+    return WebGLEngine;
+}(Engine);
+
 function _extends() {
     _extends = Object.assign || function assign(target) {
         for (var i = 1; i < arguments.length; i++) {
@@ -200,6 +231,84 @@ function _extends() {
     return _extends.apply(this, arguments);
 }
 
+var GLBuffer = /*#__PURE__*/ function() {
+    function GLBuffer(rhi, type, byteLength, bufferUsage, data) {
+        if (bufferUsage === void 0) bufferUsage = BufferUsage.Static;
+        var gl = rhi.gl;
+        var glBuffer = gl.createBuffer();
+        var glBufferUsage = this._getGLBufferUsage(gl, bufferUsage);
+        var glBindTarget = type === 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 === 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.resize = function resize(byteLength) {
+        this.bind();
+        this._gl.bufferData(this._glBindTarget, byteLength, this._glBufferUsage);
+    };
+    _proto.destroy = function destroy() {
+        this._gl.deleteBuffer(this._glBuffer);
+        this._gl = null;
+        this._glBuffer = null;
+    };
+    _proto._getGLBufferUsage = function _getGLBufferUsage(gl, bufferUsage) {
+        switch(bufferUsage){
+            case BufferUsage.Static:
+                return gl.STATIC_DRAW;
+            case BufferUsage.Dynamic:
+                return gl.DYNAMIC_DRAW;
+            case BufferUsage.Stream:
+                return gl.STREAM_DRAW;
+        }
+    };
+    return GLBuffer;
+}();
+
 /**
  * GL capability.
  */ var GLCapability = /*#__PURE__*/ function() {
@@ -469,8 +578,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);
                 }
@@ -483,8 +592,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);
                     }
@@ -524,7 +633,7 @@ 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;
@@ -556,7 +665,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);
@@ -1621,20 +1730,19 @@ var WebGLMode;
     WebGLMode[WebGLMode[/** WebGL1.0, */ "WebGL1"] = 2] = "WebGL1";
 })(WebGLMode || (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 Vector4(null, null, null, null);
         this._lastScissor = new Vector4(null, null, null, null);
         this._lastClearColor = new Color(null, null, null, null);
         this._scissorEnable = false;
         var options = _extends({
             webGLMode: 0,
-            alpha: false,
             stencil: true,
             _forceFlush: false
         }, initializeOptions);
@@ -1649,12 +1757,20 @@ var WebGLMode;
             }
         }
         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);
@@ -1680,16 +1796,7 @@ var WebGLMode;
             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);
@@ -1706,6 +1813,10 @@ var WebGLMode;
     _proto.createPlatformRenderTarget = function createPlatformRenderTarget(target) {
         return new GLRenderTarget(this, target);
     };
+    _proto.createPlatformBuffer = function createPlatformBuffer(type, byteLength, bufferUsage, data) {
+        if (bufferUsage === void 0) bufferUsage = BufferUsage.Static;
+        return new GLBuffer(this, type, byteLength, bufferUsage, data);
+    };
     _proto.requireExtension = function requireExtension(ext) {
         return this._extensions.requireExtension(ext);
     };
@@ -1833,8 +1944,57 @@ var WebGLMode;
     _proto.flush = function flush() {
         this._gl.flush();
     };
-    _proto.destroy = function destroy() {};
-    _create_class(WebGLRenderer, [
+    _proto.forceLoseDevice = function forceLoseDevice() {
+        var extension = this.requireExtension(GLCapabilityType.WEBGL_lose_context);
+        extension.loseContext();
+    };
+    _proto.forceRestoreDevice = function forceRestoreDevice() {
+        var extension = this.requireExtension(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() {
@@ -1875,30 +2035,8 @@ var WebGLMode;
             }
         }
     ]);
-    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;
-}(Engine);
-
-export { GLCompressedTextureInternalFormat, WebCanvas, WebGLEngine, WebGLMode, WebGLRenderer };
+export { GLCompressedTextureInternalFormat, WebCanvas, WebGLEngine, WebGLGraphicDevice, WebGLMode };
 //# sourceMappingURL=module.js.map