@rive-app/webgl2 2.32.2 → 2.33.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rive-app/webgl2",
-  "version": "2.32.2",
+  "version": "2.33.0",
   "description": "Rive's webgl2 based web api.",
   "main": "rive.js",
   "homepage": "https://rive.app",

package/rive.d.ts

@@ -33,6 +33,10 @@ export declare enum Alignment {
     BottomCenter = "bottomCenter",
     BottomRight = "bottomRight"
 }
+export declare enum DrawOptimizationOptions {
+    AlwaysDraw = "alwaysDraw",
+    DrawOnChanged = "drawOnChanged"
+}
 export interface LayoutParameters {
     fit?: Fit;
     alignment?: Alignment;
@@ -260,6 +264,10 @@ export interface RiveParameters {
      * Enables multi touch support
      */
     enableMultiTouch?: boolean;
+    /**
+     * Enum with drawing options for optimizations
+     */
+    drawingOptions?: DrawOptimizationOptions;
     onLoad?: EventCallback;
     onLoadError?: EventCallback;
     onPlay?: EventCallback;
@@ -421,6 +429,7 @@ export declare class Rive {
     private _boundDraw;
     private _viewModelInstance;
     private _dataEnums;
+    private drawOptimization;
     durations: number[];
     frameTimes: number[];
     frameCount: number;
@@ -700,6 +709,7 @@ export declare class Rive {
      * renderer is already active, then this will have zero effect.
      */
     startRendering(): void;
+    private scheduleRendering;
     /**
      * Enables frames-per-second (FPS) reporting for the runtime
      * If no callback is provided, Rive will append a fixed-position div at the top-right corner of

package/rive.js

@@ -427,7 +427,7 @@ function Na(a, b) {
     return Ma(c, a, b);
   }));
 }
-var Oa, Pa, Ta = {544671:(a, b, c, d, e) => {
+var Oa, Pa, Ta = {547041:(a, b, c, d, e) => {
   if ("undefined" === typeof window || void 0 === (window.AudioContext || window.webkitAudioContext)) {
     return 0;
   }
@@ -490,11 +490,11 @@ var Oa, Pa, Ta = {544671:(a, b, c, d, e) => {
   }
   window.h.Ea += 1;
   return 1;
-}, 546849:() => {
+}, 549219:() => {
   "undefined" !== typeof window.h && (window.h.Xa.map(function(a) {
     document.removeEventListener(a, window.h.unlock, !0);
   }), --window.h.Ea, 0 === window.h.Ea && delete window.h);
-}, 547153:() => void 0 !== navigator.mediaDevices && void 0 !== navigator.mediaDevices.getUserMedia, 547257:() => {
+}, 549523:() => void 0 !== navigator.mediaDevices && void 0 !== navigator.mediaDevices.getUserMedia, 549627:() => {
   try {
     var a = new (window.AudioContext || window.webkitAudioContext)(), b = a.sampleRate;
     a.close();
@@ -502,7 +502,7 @@ var Oa, Pa, Ta = {544671:(a, b, c, d, e) => {
   } catch (c) {
     return 0;
   }
-}, 547428:(a, b, c, d, e, f) => {
+}, 549798:(a, b, c, d, e, f) => {
   if ("undefined" === typeof window.h) {
     return -1;
   }
@@ -548,7 +548,7 @@ var Oa, Pa, Ta = {544671:(a, b, c, d, e) => {
   a == window.h.I.Ca && g.Y.connect(g.K.destination);
   g.nb = f;
   return window.h.lc(g);
-}, 550305:a => window.h.ta(a).K.sampleRate, 550378:a => {
+}, 552675:a => window.h.ta(a).K.sampleRate, 552748:a => {
   a = window.h.ta(a);
   void 0 !== a.Y && (a.Y.onaudioprocess = function() {
   }, a.Y.disconnect(), a.Y = void 0);
@@ -556,13 +556,13 @@ var Oa, Pa, Ta = {544671:(a, b, c, d, e) => {
   a.K.close();
   a.K = void 0;
   a.nb = void 0;
-}, 550778:a => {
+}, 553148:a => {
   window.h.yb(a);
-}, 550828:a => {
+}, 553198:a => {
   a = window.h.ta(a);
   a.K.resume();
   a.state = window.h.ia.ub;
-}, 550967:a => {
+}, 553337:a => {
   a = window.h.ta(a);
   a.K.suspend();
   a.state = window.h.ia.stopped;
@@ -3388,7 +3388,9 @@ f, g, k, m) => {
   W.vertexAttribIPointer(a, b, c, d, e);
 }, glVertexAttribPointer:(a, b, c, d, e, f) => {
   W.vertexAttribPointer(a, b, c, !!d, e, f);
-}, glViewport:(a, b, c, d) => W.viewport(a, b, c, d), provokingVertexWEBGL:function(a, b) {
+}, glViewport:(a, b, c, d) => W.viewport(a, b, c, d), isWindowsBrowser:function() {
+  return -1 < navigator.platform.indexOf("Win");
+}, provokingVertexWEBGL:function(a, b) {
   (a = w[a].C.pb) && a.provokingVertexWEBGL(b);
 }, strftime_l:(a, b, c, d) => Yd(a, b, c, d), upload_image:function(a, b) {
   var c = l.images;
@@ -3496,7 +3498,7 @@ moduleRtn = ca;
 /* 2 */
 /***/ ((module) => {
 
-module.exports = /*#__PURE__*/JSON.parse('{"name":"@rive-app/webgl2","version":"2.32.2","description":"Rive\'s webgl2 based web api.","main":"rive.js","homepage":"https://rive.app","repository":{"type":"git","url":"https://github.com/rive-app/rive-wasm/tree/master/js"},"keywords":["rive","animation"],"author":"Rive","contributors":["Luigi Rosso <luigi@rive.app> (https://rive.app)","Maxwell Talbot <max@rive.app> (https://rive.app)","Arthur Vivian <arthur@rive.app> (https://rive.app)","Umberto Sonnino <umberto@rive.app> (https://rive.app)","Matthew Sullivan <matt.j.sullivan@gmail.com> (mailto:matt.j.sullivan@gmail.com)","Chris Dalton <chris@rive.app> (https://rive.app)"],"license":"MIT","files":["rive.js","rive.wasm","rive.js.map","rive.d.ts","rive_advanced.mjs.d.ts"],"typings":"rive.d.ts","dependencies":{},"browser":{"fs":false,"path":false}}');
+module.exports = /*#__PURE__*/JSON.parse('{"name":"@rive-app/webgl2","version":"2.33.0","description":"Rive\'s webgl2 based web api.","main":"rive.js","homepage":"https://rive.app","repository":{"type":"git","url":"https://github.com/rive-app/rive-wasm/tree/master/js"},"keywords":["rive","animation"],"author":"Rive","contributors":["Luigi Rosso <luigi@rive.app> (https://rive.app)","Maxwell Talbot <max@rive.app> (https://rive.app)","Arthur Vivian <arthur@rive.app> (https://rive.app)","Umberto Sonnino <umberto@rive.app> (https://rive.app)","Matthew Sullivan <matt.j.sullivan@gmail.com> (mailto:matt.j.sullivan@gmail.com)","Chris Dalton <chris@rive.app> (https://rive.app)"],"license":"MIT","files":["rive.js","rive.wasm","rive.js.map","rive.d.ts","rive_advanced.mjs.d.ts"],"typings":"rive.d.ts","dependencies":{},"browser":{"fs":false,"path":false}}');
 
 /***/ }),
 /* 3 */
@@ -4311,6 +4313,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   Alignment: () => (/* binding */ Alignment),
 /* harmony export */   DataEnum: () => (/* binding */ DataEnum),
+/* harmony export */   DrawOptimizationOptions: () => (/* binding */ DrawOptimizationOptions),
 /* harmony export */   EventType: () => (/* binding */ EventType),
 /* harmony export */   Fit: () => (/* binding */ Fit),
 /* harmony export */   Layout: () => (/* binding */ Layout),
@@ -4458,6 +4461,12 @@ var Alignment;
     Alignment["BottomCenter"] = "bottomCenter";
     Alignment["BottomRight"] = "bottomRight";
 })(Alignment || (Alignment = {}));
+// Drawing optimization options
+var DrawOptimizationOptions;
+(function (DrawOptimizationOptions) {
+    DrawOptimizationOptions["AlwaysDraw"] = "alwaysDraw";
+    DrawOptimizationOptions["DrawOnChanged"] = "drawOnChanged";
+})(DrawOptimizationOptions || (DrawOptimizationOptions = {}));
 // Alignment options for Rive animations in a HTML canvas
 var Layout = /** @class */ (function () {
     function Layout(params) {
@@ -5780,7 +5789,7 @@ var RiveFile = /** @class */ (function () {
 var Rive = /** @class */ (function () {
     function Rive(params) {
         var _this = this;
-        var _a;
+        var _a, _b;
         // Tracks if a Rive file is loaded
         this.loaded = false;
         // Tracks if a Rive file is destroyed
@@ -5822,6 +5831,7 @@ var Rive = /** @class */ (function () {
         this._boundDraw = null;
         this._viewModelInstance = null;
         this._dataEnums = null;
+        this.drawOptimization = DrawOptimizationOptions.DrawOnChanged;
         // Durations to generate a frame for the last second. Used for performance profiling.
         this.durations = [];
         this.frameTimes = [];
@@ -5861,6 +5871,7 @@ var Rive = /** @class */ (function () {
                 ? params.dispatchPointerExit
                 : this.dispatchPointerExit;
         this.enableMultiTouch = !!params.enableMultiTouch;
+        this.drawOptimization = (_b = params.drawingOptions) !== null && _b !== void 0 ? _b : this.drawOptimization;
         this.enableRiveAssetCDN =
             params.enableRiveAssetCDN === undefined
                 ? true
@@ -6185,7 +6196,7 @@ var Rive = /** @class */ (function () {
             }
         }
         else {
-            this.startRendering();
+            this.scheduleRendering();
         }
     };
     /**
@@ -6272,17 +6283,21 @@ var Rive = /** @class */ (function () {
             this.artboard.advance(elapsedTime);
         }
         var renderer = this.renderer;
-        // Canvas must be wiped to prevent artifacts
-        renderer.clear();
-        renderer.save();
-        // Update the renderer alignment if necessary
-        this.alignRenderer();
         // Do not draw on 0 canvas size
         if (!this._hasZeroSize) {
-            this.artboard.draw(renderer);
+            // If there was no dirt on this frame, do not clear and draw
+            if (this.drawOptimization == DrawOptimizationOptions.AlwaysDraw ||
+                this.artboard.didChange()) {
+                // Canvas must be wiped to prevent artifacts
+                renderer.clear();
+                renderer.save();
+                // Update the renderer alignment if necessary
+                this.alignRenderer();
+                this.artboard.draw(renderer);
+                renderer.restore();
+                renderer.flush();
+            }
         }
-        renderer.restore();
-        renderer.flush();
         // Check for any animations that looped
         this.animator.handleLooping();
         // Check for any state machines that had a state change
@@ -6303,7 +6318,7 @@ var Rive = /** @class */ (function () {
         // https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations
         if (this.animator.isPlaying) {
             // Request a new rendering frame
-            this.startRendering();
+            this.scheduleRendering();
         }
         else if (this.animator.isPaused) {
             // Reset the end time so on playback it starts at the correct frame
@@ -6993,6 +7008,9 @@ var Rive = /** @class */ (function () {
      * renderer is already active, then this will have zero effect.
      */
     Rive.prototype.startRendering = function () {
+        this.drawFrame();
+    };
+    Rive.prototype.scheduleRendering = function () {
         if (this.loaded && this.artboard && !this.frameRequestId) {
             if (this.runtime.requestAnimationFrame) {
                 this.frameRequestId = this.runtime.requestAnimationFrame(this._boundDraw);