@galacean/engine-rhi-webgl 1.0.0 → 1.0.1

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, TextureUsage, TextureWrapMode, TextureFormat, RenderBufferDepthFormat, TextureFilterMode, TextureDepthCompareFunction, Texture, TextureCube, CameraClearFlags, ColorWriteMask, SystemInfo, Platform } from '@galacean/engine-core';
 
 /**
  * Smoothing plug-in.
@@ -187,6 +187,39 @@ 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
+        return engine._initialize(configuration);
+    };
+    _create_class(WebGLEngine, [
+        {
+            key: "canvas",
+            get: /**
+   * Web canvas.
+   */ function get() {
+                // @ts-ignore
+                return this._canvas;
+            }
+        }
+    ]);
+    return WebGLEngine;
+}(Engine);
+
 function _extends() {
     _extends = Object.assign || function assign(target) {
         for (var i = 1; i < arguments.length; i++) {
@@ -200,6 +233,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 +580,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 +594,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 +635,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 +667,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);
@@ -663,9 +774,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 !== TextureUsage.Dynamic) {
             gl.texStorage2D(this._target, mipmapCount, internalFormat, width, height);
         } else {
             if (!isCube) {
@@ -1460,11 +1571,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 === 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 }
@@ -1621,22 +1736,22 @@ 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
+            _forceFlush: false,
+            _maxAllowSkinUniformVectorCount: 256
         }, initializeOptions);
         if (SystemInfo.platform === Platform.IPhone || SystemInfo.platform === Platform.IPad) {
             var version = SystemInfo.operatingSystem.match(/(\d+).?(\d+)?.?(\d+)?/);
@@ -1649,12 +1764,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 +1803,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 +1820,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);
     };
@@ -1788,23 +1906,23 @@ var WebGLMode;
     };
     _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) {
@@ -1833,8 +1951,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 +2042,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