VideoTexture

dist/preview release/babylon.max.js

@@ -14038,7 +14038,8 @@ var BABYLON;
             return effect;
         };
         /**
-         * Create an effect to use with particle systems
+         * Create an effect to use with particle systems.
+         * Please note that some parameters like animation sheets or not being billboard are not supported in this configuration
          * @param fragmentName defines the base name of the effect (The name of file without .fragment.fx)
          * @param uniformsNames defines a list of attribute names
          * @param samplers defines an array of string used to represent textures
@@ -14052,10 +14053,13 @@ var BABYLON;
             if (uniformsNames === void 0) { uniformsNames = []; }
             if (samplers === void 0) { samplers = []; }
             if (defines === void 0) { defines = ""; }
+            var attributesNamesOrOptions = BABYLON.ParticleSystem._GetAttributeNamesOrOptions();
+            var effectCreationOption = BABYLON.ParticleSystem._GetEffectCreationOptions();
+            defines += "\n#define BILLBOARD\n";
             return this.createEffect({
                 vertex: "particles",
                 fragmentElement: fragmentName
-            }, ["position", "color", "options"], ["view", "projection"].concat(uniformsNames), ["diffuseSampler"].concat(samplers), defines, fallbacks, onCompiled, onError);
+            }, attributesNamesOrOptions, effectCreationOption.concat(uniformsNames), ["diffuseSampler"].concat(samplers), defines, fallbacks, onCompiled, onError);
         };
         /**
          * Directly creates a webGL program
@@ -14802,19 +14806,35 @@ var BABYLON;
                             gl.texImage2D(gl.TEXTURE_2D, 0, internalFormat, internalFormat, gl.UNSIGNED_BYTE, img);
                             return false;
                         }
-                        // Using shaders to rescale because canvas.drawImage is lossy
-                        var source = new BABYLON.InternalTexture(_this, BABYLON.InternalTexture.DATASOURCE_TEMP);
-                        _this._bindTextureDirectly(gl.TEXTURE_2D, source, true);
-                        gl.texImage2D(gl.TEXTURE_2D, 0, internalFormat, internalFormat, gl.UNSIGNED_BYTE, img);
-                        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
-                        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
-                        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
-                        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
-                        _this._rescaleTexture(source, texture, scene, internalFormat, function () {
-                            _this._releaseTexture(source);
-                            _this._bindTextureDirectly(gl.TEXTURE_2D, texture, true);
-                            continuationCallback();
-                        });
+                        var maxTextureSize = _this._caps.maxTextureSize;
+                        if (img.width > maxTextureSize || img.height > maxTextureSize) {
+                            _this._prepareWorkingCanvas();
+                            if (!_this._workingCanvas || !_this._workingContext) {
+                                return false;
+                            }
+                            _this._workingCanvas.width = potWidth;
+                            _this._workingCanvas.height = potHeight;
+                            _this._workingContext.drawImage(img, 0, 0, img.width, img.height, 0, 0, potWidth, potHeight);
+                            gl.texImage2D(gl.TEXTURE_2D, 0, internalFormat, internalFormat, gl.UNSIGNED_BYTE, _this._workingCanvas);
+                            texture.width = potWidth;
+                            texture.height = potHeight;
+                            return false;
+                        }
+                        else {
+                            // Using shaders when possible to rescale because canvas.drawImage is lossy
+                            var source_1 = new BABYLON.InternalTexture(_this, BABYLON.InternalTexture.DATASOURCE_TEMP);
+                            _this._bindTextureDirectly(gl.TEXTURE_2D, source_1, true);
+                            gl.texImage2D(gl.TEXTURE_2D, 0, internalFormat, internalFormat, gl.UNSIGNED_BYTE, img);
+                            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+                            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+                            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+                            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+                            _this._rescaleTexture(source_1, texture, scene, internalFormat, function () {
+                                _this._releaseTexture(source_1);
+                                _this._bindTextureDirectly(gl.TEXTURE_2D, texture, true);
+                                continuationCallback();
+                            });
+                        }
                         return true;
                     }, samplingMode);
                 };
@@ -16287,8 +16307,9 @@ var BABYLON;
         Engine.prototype._prepareWebGLTexture = function (texture, scene, width, height, invertY, noMipmap, isCompressed, processFunction, samplingMode) {
             var _this = this;
             if (samplingMode === void 0) { samplingMode = BABYLON.Texture.TRILINEAR_SAMPLINGMODE; }
-            var potWidth = this.needPOTTextures ? BABYLON.Tools.GetExponentOfTwo(width, this.getCaps().maxTextureSize) : width;
-            var potHeight = this.needPOTTextures ? BABYLON.Tools.GetExponentOfTwo(height, this.getCaps().maxTextureSize) : height;
+            var maxTextureSize = this.getCaps().maxTextureSize;
+            var potWidth = Math.min(maxTextureSize, this.needPOTTextures ? BABYLON.Tools.GetExponentOfTwo(width, maxTextureSize) : width);
+            var potHeight = Math.min(maxTextureSize, this.needPOTTextures ? BABYLON.Tools.GetExponentOfTwo(height, maxTextureSize) : height);
             var gl = this._gl;
             if (!gl) {
                 return;
@@ -55992,6 +56013,27 @@ var BABYLON;
                 }
             }
         };
+        /** @hidden */
+        ParticleSystem._GetAttributeNamesOrOptions = function (isAnimationSheetEnabled, isBillboardBased) {
+            if (isAnimationSheetEnabled === void 0) { isAnimationSheetEnabled = false; }
+            if (isBillboardBased === void 0) { isBillboardBased = false; }
+            var attributeNamesOrOptions = [BABYLON.VertexBuffer.PositionKind, BABYLON.VertexBuffer.ColorKind, "angle", "offset", "size"];
+            if (isAnimationSheetEnabled) {
+                attributeNamesOrOptions.push("cellIndex");
+            }
+            if (!isBillboardBased) {
+                attributeNamesOrOptions.push("direction");
+            }
+            return attributeNamesOrOptions;
+        };
+        ParticleSystem._GetEffectCreationOptions = function (isAnimationSheetEnabled) {
+            if (isAnimationSheetEnabled === void 0) { isAnimationSheetEnabled = false; }
+            var effectCreationOption = ["invView", "view", "projection", "vClipPlane", "textureMask"];
+            if (isAnimationSheetEnabled) {
+                effectCreationOption.push("particlesInfos");
+            }
+            return effectCreationOption;
+        };
         ParticleSystem.prototype._getEffect = function () {
             if (this._customEffect) {
                 return this._customEffect;
@@ -56011,15 +56053,8 @@ var BABYLON;
             var join = defines.join("\n");
             if (this._cachedDefines !== join) {
                 this._cachedDefines = join;
-                var attributesNamesOrOptions = [BABYLON.VertexBuffer.PositionKind, BABYLON.VertexBuffer.ColorKind, "angle", "offset", "size"];
-                var effectCreationOption = ["invView", "view", "projection", "vClipPlane", "textureMask"];
-                if (this._isAnimationSheetEnabled) {
-                    attributesNamesOrOptions.push("cellIndex");
-                    effectCreationOption.push("particlesInfos");
-                }
-                if (!this._isBillboardBased) {
-                    attributesNamesOrOptions.push("direction");
-                }
+                var attributesNamesOrOptions = ParticleSystem._GetAttributeNamesOrOptions(this._isAnimationSheetEnabled, this._isBillboardBased);
+                var effectCreationOption = ParticleSystem._GetEffectCreationOptions(this._isAnimationSheetEnabled);
                 this._effect = this._scene.getEngine().createEffect("particles", attributesNamesOrOptions, effectCreationOption, ["diffuseSampler"], join);
             }
             return this._effect;
@@ -64988,6 +65023,9 @@ var BABYLON;
         };
         VideoTexture.CreateFromWebCam = function (scene, onReady, constraints) {
             var video = document.createElement("video");
+            video.setAttribute('autoplay', '');
+            video.setAttribute('muted', '');
+            video.setAttribute('playsinline', '');
             var constraintsDeviceId;
             if (constraints && constraints.deviceId) {
                 constraintsDeviceId = {

dist/preview release/babylon.no-module.max.js

@@ -14005,7 +14005,8 @@ var BABYLON;
             return effect;
         };
         /**
-         * Create an effect to use with particle systems
+         * Create an effect to use with particle systems.
+         * Please note that some parameters like animation sheets or not being billboard are not supported in this configuration
          * @param fragmentName defines the base name of the effect (The name of file without .fragment.fx)
          * @param uniformsNames defines a list of attribute names
          * @param samplers defines an array of string used to represent textures
@@ -14019,10 +14020,13 @@ var BABYLON;
             if (uniformsNames === void 0) { uniformsNames = []; }
             if (samplers === void 0) { samplers = []; }
             if (defines === void 0) { defines = ""; }
+            var attributesNamesOrOptions = BABYLON.ParticleSystem._GetAttributeNamesOrOptions();
+            var effectCreationOption = BABYLON.ParticleSystem._GetEffectCreationOptions();
+            defines += "\n#define BILLBOARD\n";
             return this.createEffect({
                 vertex: "particles",
                 fragmentElement: fragmentName
-            }, ["position", "color", "options"], ["view", "projection"].concat(uniformsNames), ["diffuseSampler"].concat(samplers), defines, fallbacks, onCompiled, onError);
+            }, attributesNamesOrOptions, effectCreationOption.concat(uniformsNames), ["diffuseSampler"].concat(samplers), defines, fallbacks, onCompiled, onError);
         };
         /**
          * Directly creates a webGL program
@@ -14769,19 +14773,35 @@ var BABYLON;
                             gl.texImage2D(gl.TEXTURE_2D, 0, internalFormat, internalFormat, gl.UNSIGNED_BYTE, img);
                             return false;
                         }
-                        // Using shaders to rescale because canvas.drawImage is lossy
-                        var source = new BABYLON.InternalTexture(_this, BABYLON.InternalTexture.DATASOURCE_TEMP);
-                        _this._bindTextureDirectly(gl.TEXTURE_2D, source, true);
-                        gl.texImage2D(gl.TEXTURE_2D, 0, internalFormat, internalFormat, gl.UNSIGNED_BYTE, img);
-                        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
-                        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
-                        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
-                        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
-                        _this._rescaleTexture(source, texture, scene, internalFormat, function () {
-                            _this._releaseTexture(source);
-                            _this._bindTextureDirectly(gl.TEXTURE_2D, texture, true);
-                            continuationCallback();
-                        });
+                        var maxTextureSize = _this._caps.maxTextureSize;
+                        if (img.width > maxTextureSize || img.height > maxTextureSize) {
+                            _this._prepareWorkingCanvas();
+                            if (!_this._workingCanvas || !_this._workingContext) {
+                                return false;
+                            }
+                            _this._workingCanvas.width = potWidth;
+                            _this._workingCanvas.height = potHeight;
+                            _this._workingContext.drawImage(img, 0, 0, img.width, img.height, 0, 0, potWidth, potHeight);
+                            gl.texImage2D(gl.TEXTURE_2D, 0, internalFormat, internalFormat, gl.UNSIGNED_BYTE, _this._workingCanvas);
+                            texture.width = potWidth;
+                            texture.height = potHeight;
+                            return false;
+                        }
+                        else {
+                            // Using shaders when possible to rescale because canvas.drawImage is lossy
+                            var source_1 = new BABYLON.InternalTexture(_this, BABYLON.InternalTexture.DATASOURCE_TEMP);
+                            _this._bindTextureDirectly(gl.TEXTURE_2D, source_1, true);
+                            gl.texImage2D(gl.TEXTURE_2D, 0, internalFormat, internalFormat, gl.UNSIGNED_BYTE, img);
+                            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+                            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+                            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+                            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+                            _this._rescaleTexture(source_1, texture, scene, internalFormat, function () {
+                                _this._releaseTexture(source_1);
+                                _this._bindTextureDirectly(gl.TEXTURE_2D, texture, true);
+                                continuationCallback();
+                            });
+                        }
                         return true;
                     }, samplingMode);
                 };
@@ -16254,8 +16274,9 @@ var BABYLON;
         Engine.prototype._prepareWebGLTexture = function (texture, scene, width, height, invertY, noMipmap, isCompressed, processFunction, samplingMode) {
             var _this = this;
             if (samplingMode === void 0) { samplingMode = BABYLON.Texture.TRILINEAR_SAMPLINGMODE; }
-            var potWidth = this.needPOTTextures ? BABYLON.Tools.GetExponentOfTwo(width, this.getCaps().maxTextureSize) : width;
-            var potHeight = this.needPOTTextures ? BABYLON.Tools.GetExponentOfTwo(height, this.getCaps().maxTextureSize) : height;
+            var maxTextureSize = this.getCaps().maxTextureSize;
+            var potWidth = Math.min(maxTextureSize, this.needPOTTextures ? BABYLON.Tools.GetExponentOfTwo(width, maxTextureSize) : width);
+            var potHeight = Math.min(maxTextureSize, this.needPOTTextures ? BABYLON.Tools.GetExponentOfTwo(height, maxTextureSize) : height);
             var gl = this._gl;
             if (!gl) {
                 return;
@@ -55959,6 +55980,27 @@ var BABYLON;
                 }
             }
         };
+        /** @hidden */
+        ParticleSystem._GetAttributeNamesOrOptions = function (isAnimationSheetEnabled, isBillboardBased) {
+            if (isAnimationSheetEnabled === void 0) { isAnimationSheetEnabled = false; }
+            if (isBillboardBased === void 0) { isBillboardBased = false; }
+            var attributeNamesOrOptions = [BABYLON.VertexBuffer.PositionKind, BABYLON.VertexBuffer.ColorKind, "angle", "offset", "size"];
+            if (isAnimationSheetEnabled) {
+                attributeNamesOrOptions.push("cellIndex");
+            }
+            if (!isBillboardBased) {
+                attributeNamesOrOptions.push("direction");
+            }
+            return attributeNamesOrOptions;
+        };
+        ParticleSystem._GetEffectCreationOptions = function (isAnimationSheetEnabled) {
+            if (isAnimationSheetEnabled === void 0) { isAnimationSheetEnabled = false; }
+            var effectCreationOption = ["invView", "view", "projection", "vClipPlane", "textureMask"];
+            if (isAnimationSheetEnabled) {
+                effectCreationOption.push("particlesInfos");
+            }
+            return effectCreationOption;
+        };
         ParticleSystem.prototype._getEffect = function () {
             if (this._customEffect) {
                 return this._customEffect;
@@ -55978,15 +56020,8 @@ var BABYLON;
             var join = defines.join("\n");
             if (this._cachedDefines !== join) {
                 this._cachedDefines = join;
-                var attributesNamesOrOptions = [BABYLON.VertexBuffer.PositionKind, BABYLON.VertexBuffer.ColorKind, "angle", "offset", "size"];
-                var effectCreationOption = ["invView", "view", "projection", "vClipPlane", "textureMask"];
-                if (this._isAnimationSheetEnabled) {
-                    attributesNamesOrOptions.push("cellIndex");
-                    effectCreationOption.push("particlesInfos");
-                }
-                if (!this._isBillboardBased) {
-                    attributesNamesOrOptions.push("direction");
-                }
+                var attributesNamesOrOptions = ParticleSystem._GetAttributeNamesOrOptions(this._isAnimationSheetEnabled, this._isBillboardBased);
+                var effectCreationOption = ParticleSystem._GetEffectCreationOptions(this._isAnimationSheetEnabled);
                 this._effect = this._scene.getEngine().createEffect("particles", attributesNamesOrOptions, effectCreationOption, ["diffuseSampler"], join);
             }
             return this._effect;
@@ -64955,6 +64990,9 @@ var BABYLON;
         };
         VideoTexture.CreateFromWebCam = function (scene, onReady, constraints) {
             var video = document.createElement("video");
+            video.setAttribute('autoplay', '');
+            video.setAttribute('muted', '');
+            video.setAttribute('playsinline', '');
             var constraintsDeviceId;
             if (constraints && constraints.deviceId) {
                 constraintsDeviceId = {

dist/preview release/es6.js

@@ -14005,7 +14005,8 @@ var BABYLON;
             return effect;
         };
         /**
-         * Create an effect to use with particle systems
+         * Create an effect to use with particle systems.
+         * Please note that some parameters like animation sheets or not being billboard are not supported in this configuration
          * @param fragmentName defines the base name of the effect (The name of file without .fragment.fx)
          * @param uniformsNames defines a list of attribute names
          * @param samplers defines an array of string used to represent textures
@@ -14019,10 +14020,13 @@ var BABYLON;
             if (uniformsNames === void 0) { uniformsNames = []; }
             if (samplers === void 0) { samplers = []; }
             if (defines === void 0) { defines = ""; }
+            var attributesNamesOrOptions = BABYLON.ParticleSystem._GetAttributeNamesOrOptions();
+            var effectCreationOption = BABYLON.ParticleSystem._GetEffectCreationOptions();
+            defines += "\n#define BILLBOARD\n";
             return this.createEffect({
                 vertex: "particles",
                 fragmentElement: fragmentName
-            }, ["position", "color", "options"], ["view", "projection"].concat(uniformsNames), ["diffuseSampler"].concat(samplers), defines, fallbacks, onCompiled, onError);
+            }, attributesNamesOrOptions, effectCreationOption.concat(uniformsNames), ["diffuseSampler"].concat(samplers), defines, fallbacks, onCompiled, onError);
         };
         /**
          * Directly creates a webGL program
@@ -14769,19 +14773,35 @@ var BABYLON;
                             gl.texImage2D(gl.TEXTURE_2D, 0, internalFormat, internalFormat, gl.UNSIGNED_BYTE, img);
                             return false;
                         }
-                        // Using shaders to rescale because canvas.drawImage is lossy
-                        var source = new BABYLON.InternalTexture(_this, BABYLON.InternalTexture.DATASOURCE_TEMP);
-                        _this._bindTextureDirectly(gl.TEXTURE_2D, source, true);
-                        gl.texImage2D(gl.TEXTURE_2D, 0, internalFormat, internalFormat, gl.UNSIGNED_BYTE, img);
-                        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
-                        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
-                        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
-                        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
-                        _this._rescaleTexture(source, texture, scene, internalFormat, function () {
-                            _this._releaseTexture(source);
-                            _this._bindTextureDirectly(gl.TEXTURE_2D, texture, true);
-                            continuationCallback();
-                        });
+                        var maxTextureSize = _this._caps.maxTextureSize;
+                        if (img.width > maxTextureSize || img.height > maxTextureSize) {
+                            _this._prepareWorkingCanvas();
+                            if (!_this._workingCanvas || !_this._workingContext) {
+                                return false;
+                            }
+                            _this._workingCanvas.width = potWidth;
+                            _this._workingCanvas.height = potHeight;
+                            _this._workingContext.drawImage(img, 0, 0, img.width, img.height, 0, 0, potWidth, potHeight);
+                            gl.texImage2D(gl.TEXTURE_2D, 0, internalFormat, internalFormat, gl.UNSIGNED_BYTE, _this._workingCanvas);
+                            texture.width = potWidth;
+                            texture.height = potHeight;
+                            return false;
+                        }
+                        else {
+                            // Using shaders when possible to rescale because canvas.drawImage is lossy
+                            var source_1 = new BABYLON.InternalTexture(_this, BABYLON.InternalTexture.DATASOURCE_TEMP);
+                            _this._bindTextureDirectly(gl.TEXTURE_2D, source_1, true);
+                            gl.texImage2D(gl.TEXTURE_2D, 0, internalFormat, internalFormat, gl.UNSIGNED_BYTE, img);
+                            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+                            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+                            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+                            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+                            _this._rescaleTexture(source_1, texture, scene, internalFormat, function () {
+                                _this._releaseTexture(source_1);
+                                _this._bindTextureDirectly(gl.TEXTURE_2D, texture, true);
+                                continuationCallback();
+                            });
+                        }
                         return true;
                     }, samplingMode);
                 };
@@ -16254,8 +16274,9 @@ var BABYLON;
         Engine.prototype._prepareWebGLTexture = function (texture, scene, width, height, invertY, noMipmap, isCompressed, processFunction, samplingMode) {
             var _this = this;
             if (samplingMode === void 0) { samplingMode = BABYLON.Texture.TRILINEAR_SAMPLINGMODE; }
-            var potWidth = this.needPOTTextures ? BABYLON.Tools.GetExponentOfTwo(width, this.getCaps().maxTextureSize) : width;
-            var potHeight = this.needPOTTextures ? BABYLON.Tools.GetExponentOfTwo(height, this.getCaps().maxTextureSize) : height;
+            var maxTextureSize = this.getCaps().maxTextureSize;
+            var potWidth = Math.min(maxTextureSize, this.needPOTTextures ? BABYLON.Tools.GetExponentOfTwo(width, maxTextureSize) : width);
+            var potHeight = Math.min(maxTextureSize, this.needPOTTextures ? BABYLON.Tools.GetExponentOfTwo(height, maxTextureSize) : height);
             var gl = this._gl;
             if (!gl) {
                 return;
@@ -55959,6 +55980,27 @@ var BABYLON;
                 }
             }
         };
+        /** @hidden */
+        ParticleSystem._GetAttributeNamesOrOptions = function (isAnimationSheetEnabled, isBillboardBased) {
+            if (isAnimationSheetEnabled === void 0) { isAnimationSheetEnabled = false; }
+            if (isBillboardBased === void 0) { isBillboardBased = false; }
+            var attributeNamesOrOptions = [BABYLON.VertexBuffer.PositionKind, BABYLON.VertexBuffer.ColorKind, "angle", "offset", "size"];
+            if (isAnimationSheetEnabled) {
+                attributeNamesOrOptions.push("cellIndex");
+            }
+            if (!isBillboardBased) {
+                attributeNamesOrOptions.push("direction");
+            }
+            return attributeNamesOrOptions;
+        };
+        ParticleSystem._GetEffectCreationOptions = function (isAnimationSheetEnabled) {
+            if (isAnimationSheetEnabled === void 0) { isAnimationSheetEnabled = false; }
+            var effectCreationOption = ["invView", "view", "projection", "vClipPlane", "textureMask"];
+            if (isAnimationSheetEnabled) {
+                effectCreationOption.push("particlesInfos");
+            }
+            return effectCreationOption;
+        };
         ParticleSystem.prototype._getEffect = function () {
             if (this._customEffect) {
                 return this._customEffect;
@@ -55978,15 +56020,8 @@ var BABYLON;
             var join = defines.join("\n");
             if (this._cachedDefines !== join) {
                 this._cachedDefines = join;
-                var attributesNamesOrOptions = [BABYLON.VertexBuffer.PositionKind, BABYLON.VertexBuffer.ColorKind, "angle", "offset", "size"];
-                var effectCreationOption = ["invView", "view", "projection", "vClipPlane", "textureMask"];
-                if (this._isAnimationSheetEnabled) {
-                    attributesNamesOrOptions.push("cellIndex");
-                    effectCreationOption.push("particlesInfos");
-                }
-                if (!this._isBillboardBased) {
-                    attributesNamesOrOptions.push("direction");
-                }
+                var attributesNamesOrOptions = ParticleSystem._GetAttributeNamesOrOptions(this._isAnimationSheetEnabled, this._isBillboardBased);
+                var effectCreationOption = ParticleSystem._GetEffectCreationOptions(this._isAnimationSheetEnabled);
                 this._effect = this._scene.getEngine().createEffect("particles", attributesNamesOrOptions, effectCreationOption, ["diffuseSampler"], join);
             }
             return this._effect;
@@ -64955,6 +64990,9 @@ var BABYLON;
         };
         VideoTexture.CreateFromWebCam = function (scene, onReady, constraints) {
             var video = document.createElement("video");
+            video.setAttribute('autoplay', '');
+            video.setAttribute('muted', '');
+            video.setAttribute('playsinline', '');
             var constraintsDeviceId;
             if (constraints && constraints.deviceId) {
                 constraintsDeviceId = {

dist/preview release/viewer/babylon.viewer.max.js

@@ -14126,7 +14126,8 @@ var BABYLON;
             return effect;
         };
         /**
-         * Create an effect to use with particle systems
+         * Create an effect to use with particle systems.
+         * Please note that some parameters like animation sheets or not being billboard are not supported in this configuration
          * @param fragmentName defines the base name of the effect (The name of file without .fragment.fx)
          * @param uniformsNames defines a list of attribute names
          * @param samplers defines an array of string used to represent textures
@@ -14140,10 +14141,13 @@ var BABYLON;
             if (uniformsNames === void 0) { uniformsNames = []; }
             if (samplers === void 0) { samplers = []; }
             if (defines === void 0) { defines = ""; }
+            var attributesNamesOrOptions = BABYLON.ParticleSystem._GetAttributeNamesOrOptions();
+            var effectCreationOption = BABYLON.ParticleSystem._GetEffectCreationOptions();
+            defines += "\n#define BILLBOARD\n";
             return this.createEffect({
                 vertex: "particles",
                 fragmentElement: fragmentName
-            }, ["position", "color", "options"], ["view", "projection"].concat(uniformsNames), ["diffuseSampler"].concat(samplers), defines, fallbacks, onCompiled, onError);
+            }, attributesNamesOrOptions, effectCreationOption.concat(uniformsNames), ["diffuseSampler"].concat(samplers), defines, fallbacks, onCompiled, onError);
         };
         /**
          * Directly creates a webGL program
@@ -14890,19 +14894,35 @@ var BABYLON;
                             gl.texImage2D(gl.TEXTURE_2D, 0, internalFormat, internalFormat, gl.UNSIGNED_BYTE, img);
                             return false;
                         }
-                        // Using shaders to rescale because canvas.drawImage is lossy
-                        var source = new BABYLON.InternalTexture(_this, BABYLON.InternalTexture.DATASOURCE_TEMP);
-                        _this._bindTextureDirectly(gl.TEXTURE_2D, source, true);
-                        gl.texImage2D(gl.TEXTURE_2D, 0, internalFormat, internalFormat, gl.UNSIGNED_BYTE, img);
-                        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
-                        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
-                        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
-                        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
-                        _this._rescaleTexture(source, texture, scene, internalFormat, function () {
-                            _this._releaseTexture(source);
-                            _this._bindTextureDirectly(gl.TEXTURE_2D, texture, true);
-                            continuationCallback();
-                        });
+                        var maxTextureSize = _this._caps.maxTextureSize;
+                        if (img.width > maxTextureSize || img.height > maxTextureSize) {
+                            _this._prepareWorkingCanvas();
+                            if (!_this._workingCanvas || !_this._workingContext) {
+                                return false;
+                            }
+                            _this._workingCanvas.width = potWidth;
+                            _this._workingCanvas.height = potHeight;
+                            _this._workingContext.drawImage(img, 0, 0, img.width, img.height, 0, 0, potWidth, potHeight);
+                            gl.texImage2D(gl.TEXTURE_2D, 0, internalFormat, internalFormat, gl.UNSIGNED_BYTE, _this._workingCanvas);
+                            texture.width = potWidth;
+                            texture.height = potHeight;
+                            return false;
+                        }
+                        else {
+                            // Using shaders when possible to rescale because canvas.drawImage is lossy
+                            var source_1 = new BABYLON.InternalTexture(_this, BABYLON.InternalTexture.DATASOURCE_TEMP);
+                            _this._bindTextureDirectly(gl.TEXTURE_2D, source_1, true);
+                            gl.texImage2D(gl.TEXTURE_2D, 0, internalFormat, internalFormat, gl.UNSIGNED_BYTE, img);
+                            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+                            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+                            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+                            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+                            _this._rescaleTexture(source_1, texture, scene, internalFormat, function () {
+                                _this._releaseTexture(source_1);
+                                _this._bindTextureDirectly(gl.TEXTURE_2D, texture, true);
+                                continuationCallback();
+                            });
+                        }
                         return true;
                     }, samplingMode);
                 };
@@ -16375,8 +16395,9 @@ var BABYLON;
         Engine.prototype._prepareWebGLTexture = function (texture, scene, width, height, invertY, noMipmap, isCompressed, processFunction, samplingMode) {
             var _this = this;
             if (samplingMode === void 0) { samplingMode = BABYLON.Texture.TRILINEAR_SAMPLINGMODE; }
-            var potWidth = this.needPOTTextures ? BABYLON.Tools.GetExponentOfTwo(width, this.getCaps().maxTextureSize) : width;
-            var potHeight = this.needPOTTextures ? BABYLON.Tools.GetExponentOfTwo(height, this.getCaps().maxTextureSize) : height;
+            var maxTextureSize = this.getCaps().maxTextureSize;
+            var potWidth = Math.min(maxTextureSize, this.needPOTTextures ? BABYLON.Tools.GetExponentOfTwo(width, maxTextureSize) : width);
+            var potHeight = Math.min(maxTextureSize, this.needPOTTextures ? BABYLON.Tools.GetExponentOfTwo(height, maxTextureSize) : height);
             var gl = this._gl;
             if (!gl) {
                 return;
@@ -56080,6 +56101,27 @@ var BABYLON;
                 }
             }
         };
+        /** @hidden */
+        ParticleSystem._GetAttributeNamesOrOptions = function (isAnimationSheetEnabled, isBillboardBased) {
+            if (isAnimationSheetEnabled === void 0) { isAnimationSheetEnabled = false; }
+            if (isBillboardBased === void 0) { isBillboardBased = false; }
+            var attributeNamesOrOptions = [BABYLON.VertexBuffer.PositionKind, BABYLON.VertexBuffer.ColorKind, "angle", "offset", "size"];
+            if (isAnimationSheetEnabled) {
+                attributeNamesOrOptions.push("cellIndex");
+            }
+            if (!isBillboardBased) {
+                attributeNamesOrOptions.push("direction");
+            }
+            return attributeNamesOrOptions;
+        };
+        ParticleSystem._GetEffectCreationOptions = function (isAnimationSheetEnabled) {
+            if (isAnimationSheetEnabled === void 0) { isAnimationSheetEnabled = false; }
+            var effectCreationOption = ["invView", "view", "projection", "vClipPlane", "textureMask"];
+            if (isAnimationSheetEnabled) {
+                effectCreationOption.push("particlesInfos");
+            }
+            return effectCreationOption;
+        };
         ParticleSystem.prototype._getEffect = function () {
             if (this._customEffect) {
                 return this._customEffect;
@@ -56099,15 +56141,8 @@ var BABYLON;
             var join = defines.join("\n");
             if (this._cachedDefines !== join) {
                 this._cachedDefines = join;
-                var attributesNamesOrOptions = [BABYLON.VertexBuffer.PositionKind, BABYLON.VertexBuffer.ColorKind, "angle", "offset", "size"];
-                var effectCreationOption = ["invView", "view", "projection", "vClipPlane", "textureMask"];
-                if (this._isAnimationSheetEnabled) {
-                    attributesNamesOrOptions.push("cellIndex");
-                    effectCreationOption.push("particlesInfos");
-                }
-                if (!this._isBillboardBased) {
-                    attributesNamesOrOptions.push("direction");
-                }
+                var attributesNamesOrOptions = ParticleSystem._GetAttributeNamesOrOptions(this._isAnimationSheetEnabled, this._isBillboardBased);
+                var effectCreationOption = ParticleSystem._GetEffectCreationOptions(this._isAnimationSheetEnabled);
                 this._effect = this._scene.getEngine().createEffect("particles", attributesNamesOrOptions, effectCreationOption, ["diffuseSampler"], join);
             }
             return this._effect;
@@ -65076,6 +65111,9 @@ var BABYLON;
         };
         VideoTexture.CreateFromWebCam = function (scene, onReady, constraints) {
             var video = document.createElement("video");
+            video.setAttribute('autoplay', '');
+            video.setAttribute('muted', '');
+            video.setAttribute('playsinline', '');
             var constraintsDeviceId;
             if (constraints && constraints.deviceId) {
                 constraintsDeviceId = {

src/Materials/Textures/babylon.videoTexture.ts

@@ -293,6 +293,10 @@
             }
         ): void {
             var video = document.createElement("video");
+            video.setAttribute('autoplay', '');
+            video.setAttribute('muted', '');
+            video.setAttribute('playsinline', '');
+
             var constraintsDeviceId;
             if (constraints && constraints.deviceId) {
                 constraintsDeviceId = {