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

package/dist/miniprogram.js

@@ -192,37 +192,6 @@ 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++) {
@@ -236,84 +205,6 @@ 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() {
@@ -583,8 +474,8 @@ var GLBuffer = /*#__PURE__*/ function() {
                 if (useVao) {
                     gl.drawElements(topology, count, _glIndexType, start * _glIndexByteCount);
                 } else {
-                    var _glBuffer = _indexBufferBinding.buffer._platformBuffer._glBuffer;
-                    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, _glBuffer);
+                    var _nativeBuffer = _indexBufferBinding.buffer._nativeBuffer;
+                    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, _nativeBuffer);
                     gl.drawElements(topology, count, _glIndexType, start * _glIndexByteCount);
                     gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
                 }
@@ -597,8 +488,8 @@ var GLBuffer = /*#__PURE__*/ function() {
                     if (useVao) {
                         gl.drawElementsInstanced(topology, count, _glIndexType, start * _glIndexByteCount, _instanceCount);
                     } else {
-                        var _glBuffer1 = _indexBufferBinding.buffer._platformBuffer._glBuffer;
-                        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, _glBuffer1);
+                        var _nativeBuffer1 = _indexBufferBinding.buffer._nativeBuffer;
+                        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, _nativeBuffer1);
                         gl.drawElementsInstanced(topology, count, _glIndexType, start * _glIndexByteCount, _instanceCount);
                         gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
                     }
@@ -638,7 +529,7 @@ var GLBuffer = /*#__PURE__*/ function() {
             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._platformBuffer._glBuffer;
+                vbo = buffer._nativeBuffer;
                 // prevent binding the vbo which already bound at the last loop, e.g. a buffer with multiple attributes.
                 if (lastBoundVbo !== vbo) {
                     lastBoundVbo = vbo;
@@ -670,7 +561,7 @@ var GLBuffer = /*#__PURE__*/ function() {
         // @ts-ignore
         var _indexBufferBinding = this._primitive._indexBufferBinding;
         if (_indexBufferBinding) {
-            gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, _indexBufferBinding.buffer._platformBuffer._glBuffer);
+            gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, _indexBufferBinding.buffer._nativeBuffer);
         }
         this._bindBufferAndAttrib(shaderProgram);
         /** unbind */ gl.bindVertexArray(null);
@@ -1735,19 +1626,20 @@ exports.WebGLMode = void 0;
     WebGLMode[WebGLMode[/** WebGL1.0, */ "WebGL1"] = 2] = "WebGL1";
 })(exports.WebGLMode || (exports.WebGLMode = {}));
 /**
- * WebGL graphic device, including WebGL1.0 and WebGL2.0.
- */ var WebGLGraphicDevice = /*#__PURE__*/ function() {
-    function WebGLGraphicDevice(initializeOptions) {
+ * WebGL renderer, including WebGL1.0 and WebGL2.0.
+ */ var WebGLRenderer = /*#__PURE__*/ function() {
+    function WebGLRenderer(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);
@@ -1762,20 +1654,12 @@ exports.WebGLMode = void 0;
             }
         }
         this._options = options;
-        this._onWebGLContextLost = this._onWebGLContextLost.bind(this);
-        this._onWebGLContextRestored = this._onWebGLContextRestored.bind(this);
     }
-    var _proto = WebGLGraphicDevice.prototype;
-    _proto.init = function init(canvas, onDeviceLost, onDeviceRestored) {
+    var _proto = WebGLRenderer.prototype;
+    _proto.init = function init(canvas) {
         var options = this._options;
-        var webCanvas = canvas._webCanvas;
+        var webCanvas = this._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);
@@ -1801,7 +1685,16 @@ exports.WebGLMode = void 0;
             throw new Error("Get GL Context FAILED.");
         }
         this._gl = gl;
-        this._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.createPlatformPrimitive = function createPlatformPrimitive(primitive) {
         return new GLPrimitive(this, primitive);
@@ -1818,10 +1711,6 @@ 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);
     };
@@ -1949,57 +1838,8 @@ exports.WebGLMode = void 0;
     _proto.flush = function flush() {
         this._gl.flush();
     };
-    _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, [
+    _proto.destroy = function destroy() {};
+    _create_class(WebGLRenderer, [
         {
             key: "isWebGL2",
             get: function get() {
@@ -2040,9 +1880,31 @@ exports.WebGLMode = void 0;
             }
         }
     ]);
-    return WebGLGraphicDevice;
+    return WebGLRenderer;
 }();
 
+/**
+ * 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.WebGLGraphicDevice = WebGLGraphicDevice;
+exports.WebGLRenderer = WebGLRenderer;

package/dist/module.js

@@ -1,5 +1,5 @@
 import { Vector2, Vector4, Color } from '@galacean/engine-math';
-import { Engine, BufferUsage, BufferBindFlag, SetDataOptions, GLCapabilityType, Logger, TextureWrapMode, TextureFormat, RenderBufferDepthFormat, TextureFilterMode, TextureDepthCompareFunction, Texture, TextureCube, CameraClearFlags, ColorWriteMask, SystemInfo, Platform } from '@galacean/engine-core';
+import { GLCapabilityType, Logger, TextureWrapMode, TextureFormat, RenderBufferDepthFormat, TextureFilterMode, TextureDepthCompareFunction, Texture, TextureCube, CameraClearFlags, ColorWriteMask, SystemInfo, Platform, Engine } from '@galacean/engine-core';
 
 /**
  * Smoothing plug-in.
@@ -187,37 +187,6 @@ 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++) {
@@ -231,84 +200,6 @@ 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() {
@@ -578,8 +469,8 @@ var GLBuffer = /*#__PURE__*/ function() {
                 if (useVao) {
                     gl.drawElements(topology, count, _glIndexType, start * _glIndexByteCount);
                 } else {
-                    var _glBuffer = _indexBufferBinding.buffer._platformBuffer._glBuffer;
-                    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, _glBuffer);
+                    var _nativeBuffer = _indexBufferBinding.buffer._nativeBuffer;
+                    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, _nativeBuffer);
                     gl.drawElements(topology, count, _glIndexType, start * _glIndexByteCount);
                     gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
                 }
@@ -592,8 +483,8 @@ var GLBuffer = /*#__PURE__*/ function() {
                     if (useVao) {
                         gl.drawElementsInstanced(topology, count, _glIndexType, start * _glIndexByteCount, _instanceCount);
                     } else {
-                        var _glBuffer1 = _indexBufferBinding.buffer._platformBuffer._glBuffer;
-                        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, _glBuffer1);
+                        var _nativeBuffer1 = _indexBufferBinding.buffer._nativeBuffer;
+                        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, _nativeBuffer1);
                         gl.drawElementsInstanced(topology, count, _glIndexType, start * _glIndexByteCount, _instanceCount);
                         gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
                     }
@@ -633,7 +524,7 @@ var GLBuffer = /*#__PURE__*/ function() {
             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._platformBuffer._glBuffer;
+                vbo = buffer._nativeBuffer;
                 // prevent binding the vbo which already bound at the last loop, e.g. a buffer with multiple attributes.
                 if (lastBoundVbo !== vbo) {
                     lastBoundVbo = vbo;
@@ -665,7 +556,7 @@ var GLBuffer = /*#__PURE__*/ function() {
         // @ts-ignore
         var _indexBufferBinding = this._primitive._indexBufferBinding;
         if (_indexBufferBinding) {
-            gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, _indexBufferBinding.buffer._platformBuffer._glBuffer);
+            gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, _indexBufferBinding.buffer._nativeBuffer);
         }
         this._bindBufferAndAttrib(shaderProgram);
         /** unbind */ gl.bindVertexArray(null);
@@ -1730,19 +1621,20 @@ var WebGLMode;
     WebGLMode[WebGLMode[/** WebGL1.0, */ "WebGL1"] = 2] = "WebGL1";
 })(WebGLMode || (WebGLMode = {}));
 /**
- * WebGL graphic device, including WebGL1.0 and WebGL2.0.
- */ var WebGLGraphicDevice = /*#__PURE__*/ function() {
-    function WebGLGraphicDevice(initializeOptions) {
+ * WebGL renderer, including WebGL1.0 and WebGL2.0.
+ */ var WebGLRenderer = /*#__PURE__*/ function() {
+    function WebGLRenderer(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);
@@ -1757,20 +1649,12 @@ var WebGLMode;
             }
         }
         this._options = options;
-        this._onWebGLContextLost = this._onWebGLContextLost.bind(this);
-        this._onWebGLContextRestored = this._onWebGLContextRestored.bind(this);
     }
-    var _proto = WebGLGraphicDevice.prototype;
-    _proto.init = function init(canvas, onDeviceLost, onDeviceRestored) {
+    var _proto = WebGLRenderer.prototype;
+    _proto.init = function init(canvas) {
         var options = this._options;
-        var webCanvas = canvas._webCanvas;
+        var webCanvas = this._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);
@@ -1796,7 +1680,16 @@ var WebGLMode;
             throw new Error("Get GL Context FAILED.");
         }
         this._gl = gl;
-        this._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.createPlatformPrimitive = function createPlatformPrimitive(primitive) {
         return new GLPrimitive(this, primitive);
@@ -1813,10 +1706,6 @@ 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);
     };
@@ -1944,57 +1833,8 @@ var WebGLMode;
     _proto.flush = function flush() {
         this._gl.flush();
     };
-    _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, [
+    _proto.destroy = function destroy() {};
+    _create_class(WebGLRenderer, [
         {
             key: "isWebGL2",
             get: function get() {
@@ -2035,8 +1875,30 @@ var WebGLMode;
             }
         }
     ]);
-    return WebGLGraphicDevice;
+    return WebGLRenderer;
 }();
 
-export { GLCompressedTextureInternalFormat, WebCanvas, WebGLEngine, WebGLGraphicDevice, WebGLMode };
+/**
+ * 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 };
 //# sourceMappingURL=module.js.map