implement resetGlslPipeline

matthen · Oct 30, 2023 · 0f2d2c3 · 0f2d2c3
1 parent 471fab2
commit 0f2d2c3
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 12 deletions.
diff --git a/src/animations/minimalShader.tsx b/src/animations/minimalShader.tsx
@@ -3,11 +3,12 @@ import { GlslPipeline } from 'glsl-pipeline';
 import { WebGLRenderer } from 'three';
 
 import { Animation, DrawArgs, DrawFn, MakeDrawFn, Parameter } from 'lib/Animation';
+import Utils from 'lib/utils';
 
 import shader from './shaders/minimalShader.glsl';
 
 const MinimalShader = () => {
-    const duration = 10;
+    const duration = 2;
     const canvasWidth = 768;
     const canvasHeight = 768;
 
@@ -17,18 +18,16 @@ const MinimalShader = () => {
         const renderer = new WebGLRenderer({
             canvas,
         });
-        let pipeline: GlslPipeline | undefined;
+        let pipeline = new GlslPipeline(renderer, { u_t: { value: 0 }, u_speed: { value: 0 } });
+        pipeline.load(shader);
 
         const drawFn: DrawFn = ({ t, speed }: DrawArgs) => {
             if (t == 0) {
-                pipeline = new GlslPipeline(renderer, { u_t: { value: t }, u_speed: { value: speed } });
-                pipeline.load(shader);
-            }
-            if (pipeline) {
-                pipeline.uniforms.u_t.value = t;
-                pipeline.uniforms.u_speed.value = speed;
-                pipeline.renderMain();
+                Utils.resetGlslPipeline(pipeline);
             }
+            pipeline.uniforms.u_t.value = t;
+            pipeline.uniforms.u_speed.value = speed;
+            pipeline.renderMain();
         };
 
         return drawFn;

diff --git a/src/lib/Animation.tsx b/src/lib/Animation.tsx
@@ -220,16 +220,16 @@ export const Animation = (props: AnimationOptions) => {
                         )}
                     </div>
                     <div className="mt-4 grid grid-cols-9 gap-2">
-                        <div className="col-span-2 -mt-2 flex flex-row justify-end pr-2">
+                        <div className="relative -top-1 col-span-2 flex flex-row justify-end pr-2 text-sm ">
                             <button
-                                className="mr-2 text-light-200 hover:text-light disabled:text-neutral-400 disabled:hover:text-neutral-400"
+                                className="rounded-l-md bg-dark px-2 text-light-200 hover:bg-dark-600 hover:text-light disabled:text-neutral-400 disabled:hover:text-neutral-400"
                                 onClick={() => onClickReset()}
                                 disabled={controlMode == 'recording'}
                             >
                                 <FaStepBackward />
                             </button>
                             <button
-                                className="text-light-200 hover:text-light disabled:text-neutral-400 disabled:hover:text-neutral-400"
+                                className="rounded-r-md bg-dark  px-2 text-light-200 hover:bg-dark-600 hover:text-light disabled:text-neutral-400 disabled:hover:text-neutral-400"
                                 onClick={() => onClickPlayPause()}
                                 disabled={controlMode == 'recording'}
                             >

diff --git a/src/lib/utils.ts b/src/lib/utils.ts
@@ -1,3 +1,5 @@
+import { Clock } from 'three';
+
 namespace Utils {
     export const range = (start: number, end: number, step: number = 1) => {
         const result: number[] = [];
@@ -125,6 +127,21 @@ namespace Utils {
 
     export const piDigits =
         '3141592653589793238462643383279502884197169399375105820974944592307816406286208998628034825342117067982148086513282306647093844609550582231725359408128481117450284102701938521105559644622948954930381964428810975665933446128475648233786783165271201909145648566923460348610454326648213393607260249141273724587006606315588174881520920962829254091715364367892590360011330530548820466521384146951941511609433057270365759591953092186117381932611793105118548074462379962749567351885752724891227938183011949129833673362440656643086021394946395224737190702179860943702770539217176293176752384674818467669405132000568127145263560827785771342757789609173637178721468440901224953430146549585371050792279689258923542019956112129021960864034418159813629774771309960518707211349999998372978049951059731732816096318595024459455346908302642522308253344685035261931188171010003137838752886587533208381420617177669147303598253490428755468731159562863882353787593751957781857780532171226806613001927876611195909216420198938095257201065485863278865936153381827968230301952035301852968995773622599413891249721775283479131515574857242454150695950829533116861727855889075098381754637464939319255060400927701671139009848824012858361603563707660104710181942955596198946767837449448255379774726847104047534646208046684259069491293313677028989152104752162056966024058038150193511253382430035587640247496473263914199272604269922796782354781636009341721641219924586315030286182974555706749838505494588586926995690927210797509302955321165344987202755960236480665499119881834797753566369807426542527862551818417574672890977772793800081647060016145249192173217214772350141441973568548161361157352552133475741849468438523323907394143334547762416862518983569485562099219222184272550254256887671790494601653466804988627232791786085784383827967976681454100953883786360950680064225125205117392984896084128488626945604241965285022210661186306744278622039194945047123713786960956364371917287467764657573962413890865832645995813390478027590099465764078951269468398352595709825822620522489407726719478268482601476990902640136394437455305068203496252451749399651431429809190659250937221696461515709858387410597885959772975498930161753928468138268683868942774155991855925245953959431049972524680845987273644695848653836736222626099124608051243884390451244136549762780797715691435997700129616089441694868555848406353422072225828488648158456028506016842739452267467678895252138522549954666727823986456596116354886230577456498035593634568174324112515076069479451096596094025228879710893145669136867228748940560101503308617928680920874760917824938589009714909675985261365549781893129784821682998948722658804857564014270477555132379641451523746234364542858444795265867821051141354735739523113427166102135969536231442952484937187110145765403590279934403742007310578539062198387447808478489683321445713868751943506430218453191048481005370614680674919278191197939952061419663428754440643745123718192179998391015919561814675142691239748940907186494231961567945208095146550225231603881930142093762137855956638937787083039069792077346722182562599661501421503068038447734549202605414665925201497442850732518666002132434088190710486331734649651453905796268561005508106658796998163574736384052571459102897064140110971206280439039759515677157700420337869936007230558763176359421873125147120532928191826186125867321579198414848829164470609575270695722091756711672291098169091528017350671274858322287183520935396572512108357915136988209144421006751033467110314126711136990865851639831501970165151168517143765761835155650884909989859982387345528331635507647918535893226185489632132933089857064204675259070915481416549859461637180270981994309924488957571282890592323326097299712084433573265489382391193259746366730583604142813883032038249037589852437441702913276561809377344403070746921120191302033038019762110110044929321516084244485963766983895228684783123552658213144957685726243344189303968642624341077322697802807318';
+
+    export const resetGlslPipeline = (pipeline: any): void => {
+        // Reset pipeline.
+        // Not needed once https://github.com/patriciogonzalezvivo/glsl-pipeline/pull/2 is deployed.
+        pipeline.clock = new Clock();
+        pipeline.frame = 0;
+        pipeline.lastTime = 0.0;
+        pipeline.time = 0.0;
+        pipeline.doubleBuffers.forEach((buffer: any) => {
+            buffer.renderTargets.forEach((renderTarget: any) => {
+                pipeline.renderer.setRenderTarget(renderTarget);
+                pipeline.renderer.clear();
+            });
+        });
+    };
 }
 
 export default Utils;