diff --git a/src/animations/minimalShader.tsx b/src/animations/minimalShader.tsx index 5220253..3aee7b7 100644 --- 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 index 69897c5..8b3620d 100644 --- a/src/lib/Animation.tsx +++ b/src/lib/Animation.tsx @@ -220,16 +220,16 @@ export const Animation = (props: AnimationOptions) => { )}
-
+