finalize gif.

Pen-Group · Jul 14, 2024 · 4ab1097 · 4ab1097
1 parent 9ed4366
commit 4ab1097
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 12 deletions.
diff --git a/Source/editor/buttons/recordButton.js b/Source/editor/buttons/recordButton.js
@@ -2,39 +2,50 @@
     const recordButton = document.getElementById("recordButton");
     let recording = false;
 
-    console.log("gif loaded")
+    const canvas = document.getElementById("shaderpreview");
 
     recordButton.onclick = () => {
         if (recording) return;
 
         recording = true;
 
         recordButton.innerText = "Recording";
+
+        penPlus.overrideSize.width = 960;
+        penPlus.overrideSize.height = 720;
 
         const gif = new GIF({
-            workers: 1,
+            workers: 5,
             quality: 10,
-            background: "#0f0f1f",
+            background: "#0f0f8f",
             dither: "FloydSteinberg",
+            workerScript:"util/gif.worker.js",
             width: 960,
             height: 720
         });
 
         const renderLoop = setInterval(() => {
-            gif.addFrame(gl.canvas, {delay:33})
+            gif.addFrame(canvas, {delay: 33});
         }, 33);
 
-        gif.on('finished', function(blob) {
+        gif.on('finished', (blob) =>  {
             window.open(URL.createObjectURL(blob));
 
             recording = false;
             recordButton.innerText = "Capture GIF";
+
+            penPlus.overrideSize.width = null;
+            penPlus.overrideSize.height = null;
+        });
+
+        gif.on('progress', (progress) => {
+            recordButton.innerText = `Rendering ${Math.floor(progress * 100)}%`;
         });
 
         setTimeout(() => {
             clearInterval(renderLoop);
 
-            recordButton.innerText = "Rendering";
+            recordButton.innerText = "Rendering 0%";
 
             gif.render();
         },15000);

diff --git a/Source/editor/compileTime/shaders.js b/Source/editor/compileTime/shaders.js
@@ -1,4 +1,4 @@
-const gl = document.getElementById("shaderpreview").getContext("webgl", { antialias: false });
+const gl = document.getElementById("shaderpreview").getContext("webgl", { antialias: false, preserveDrawingBuffer: true });
 
 function replacementShader() {
   penPlus.Generated_GLSL = penPlus.defaultShader + penPlus.defaultVert + penPlus.defaultFrag;

diff --git a/Source/index.html b/Source/index.html
@@ -23,6 +23,8 @@
     <link rel="stylesheet" href="css/syntaxHighlighting.css" />
     <link rel="stylesheet" href="css/blocklyButtons.css" />
     <link rel="stylesheet" href="css/scrollbars.css" />
+
+    <script src="util/gif.js"></script>
   </head>
   <body>
     <div class="shaderMenu">
@@ -158,7 +160,6 @@
     <script src="util/xml_helper.js"></script>
     <script src="util/eventDispatcher.js"></script>
     <script src="editor/lib/extensionLoader.js"></script>
-    <script src="util/gif.js"></script>
 
     <!--Blockly Patches-->
     <script src="blockly/render/penPlusTheme.js"></script>

diff --git a/Source/render/previewRender.js b/Source/render/previewRender.js
@@ -1,5 +1,10 @@
 //Isolating render preview variables and code just so we don't accidentally overrite them!
 function previewRender() {
+  penPlus.overrideSize = {
+    width:null,
+    height:null
+  };
+
   gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
   gl.enable(gl.DEPTH_TEST);
   gl.depthFunc(gl.LEQUAL);
@@ -549,12 +554,13 @@ function previewRender() {
   function renderFrame() {
     now = Date.now();
     if (gl && gl.shaders && gl.shaders["editorShader"]) {
+      gl.clear(gl.COLOR_BUFFER_BIT );
       penPlus.timer += (now - lastTime) / 1000;
       document.body.style.setProperty("--U_TIMER", penPlus.timer + "px");
       document.body.style.setProperty("--U_TIMER_SIN", Math.sin(penPlus.timer * 0.5) + "px");
 
-      gl.canvas.width = gl.canvas.clientWidth;
-      gl.canvas.height = gl.canvas.clientHeight;
+      gl.canvas.width = penPlus.overrideSize.width || gl.canvas.clientWidth;
+      gl.canvas.height = penPlus.overrideSize.height || gl.canvas.clientHeight;
       gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
 
       gl.useProgram(gl.shaders["editorShader"]);

diff --git a/Source/util/gif.js b/Source/util/gif.js