Fixup uncached texture detection, update gallery.

Author: ILOVEPIE

README.hbs

@@ -9,6 +9,8 @@ A Gpu Accelerated Javascript Advanced Substation Alpha Subtitles Renderer.
 SABRE.js is a full renderer for Substation Alpha Subtitles and Advanced Substation Alpha Subtitles.
 It allows you to draw styled/stylized subtitles over web video with multiple fonts, colors, animations and effects.
 
+<span style="text-align:center; width:100%; display: inline-block;"></span>[![karaoke demo loop](gallery/images/demo_loop.gif)](gallery/video/demo_loop.mp4)</video></span>
+
 #### Other Similar software.
 
 - Javascript-Subtitles-Octopus

README.md

@@ -9,6 +9,8 @@ A Gpu Accelerated Javascript Advanced Substation Alpha Subtitles Renderer.
 SABRE.js is a full renderer for Substation Alpha Subtitles and Advanced Substation Alpha Subtitles.
 It allows you to draw styled/stylized subtitles over web video with multiple fonts, colors, animations and effects.
 
+<span style="text-align:center; width:100%; display: inline-block;"></span>[![karaoke demo loop](gallery/images/demo_loop.gif)](gallery/video/demo_loop.mp4)</video></span>
+
 #### Other Similar software.
 
 - Javascript-Subtitles-Octopus

gallery/but_i_use_safari.md

@@ -8,5 +8,14 @@
 
 ### 5/15/2021 - Closing in on psychovisual equivalency with libass...
 
+Karaoke FTW!
+
 ![Karaoke FTW!](/gallery/images/gallery2.png)
+
+Japanese text works too!
+
 ![Japanese text works too!](/gallery/images/gallery3.png)
+
+### 12/19/2023 - Video Demo
+
+![karaoke in motion](/gallery/images/mahouka_intro.gif)

gallery/gallery.md

@@ -6,5 +6,14 @@
 
 ### 5/15/2021 - Closing in on psychovisual equivalency with libass...
 
+Karaoke FTW!
+
 ![Karaoke FTW!](/gallery/images/gallery2.webp)
+
+Japanese text works too!
+
 ![Japanese text works too!](/gallery/images/gallery3.webp)
+
+### 12/19/2023 - Video Demo
+
+![karaoke in motion](/gallery/images/mahouka_intro.webp)

gallery/images/demo_loop.gif

@@ -3129,7 +3129,7 @@ const renderer_prototype = global.Object.create(Object, {
             let cachedGlyphInfo = null;
             let cachedMaskGlyphInfo = null;
             this._gl.activeTexture(this._gl.TEXTURE0);
-            if (texHash === null) {
+            if (texHash === null || !this._checkGlyphCache(texHash,texIndex)) {
                 this._gl.bindTexture(this._gl.TEXTURE_2D, this._textureSubtitle);
                 this._loadSubtitleToVram(source, this._textureSubtitleBounds); 
             } else {
@@ -3138,7 +3138,7 @@ const renderer_prototype = global.Object.create(Object, {
             }
             if (!isShape) {
                 this._gl.activeTexture(this._gl.TEXTURE1);
-                if (texMaskHash === null) {
+                if (texMaskHash === null || !this._checkGlyphCache(texMaskHash,texMaskIndex)) {
                     this._gl.bindTexture(
                         this._gl.TEXTURE_2D,
                         this._textureSubtitleMask
@@ -3216,7 +3216,7 @@ const renderer_prototype = global.Object.create(Object, {
             ],0);
 
             let tex_coords;
-            if (texHash === null) {
+            if (texHash === null || !this._checkGlyphCache(texHash,texIndex)) {
                 let dimensions = source.getTextureDimensions();
                 let extents = this._textureSubtitleBounds;
                 let width = dimensions[0] / extents[0];
@@ -3247,7 +3247,7 @@ const renderer_prototype = global.Object.create(Object, {
 
             let mask_coords;
             if (!isShape) {
-                if (texMaskHash === null) {
+                if (texMaskHash === null || !this._checkGlyphCache(texMaskHash,texMaskIndex)) {
                     let maskDimensions =
                         this._textMaskRenderer.getTextureDimensions();
                     let extents = this._textureSubtitleMaskBounds;