Step 02

- Add debug panel
- Remove unneeded `uTime` uniform

package.json

@@ -5,7 +5,8 @@
   },
   "dependencies": {
     "gsap": "^3.7.1",
-    "ogl": "^0.0.73"
+    "ogl": "^0.0.73",
+    "tweakpane": "^3.0.4"
   },
   "devDependencies": {
     "glslify-bundle": "^5.1.1",

src/app.js

@@ -1,5 +1,6 @@
 import { Renderer, Program, Mesh, Triangle } from 'ogl'
 import { gsap } from 'gsap'
+import { Pane } from 'tweakpane'
 
 class WebGLCarousel {
   constructor() {
@@ -9,11 +10,11 @@ class WebGLCarousel {
   init() {
     this._createRenderer()
     this._createScene()
+    this._createDebugPanel()
     this._addListeners()
     this._onResize()
 
     gsap.ticker.add(() => {
-      this.program.uniforms.uTime.value += 0.01
       this.renderer.render({ scene: this.mesh })
     })
   }
@@ -34,7 +35,6 @@ class WebGLCarousel {
       vertex: require('./shaders/effect.vertex.glsl'),
       fragment: require('./shaders/effect.fragment.glsl'),
       uniforms: {
-        uTime: { value: 0 },
         uProgress: { value: 0 }
       }
     })
@@ -45,6 +45,12 @@ class WebGLCarousel {
     })
   }
 
+  _createDebugPanel() {
+    const pane = new Pane()
+
+    pane.addInput(this.program.uniforms.uProgress, 'value', { label: 'uProgress', min: 0, max: 1, step: 0.01 })
+  }
+
   _addListeners() {
     window.addEventListener('resize', this._onResize.bind(this), { passive: true })
   }

src/shaders/effect.fragment.glsl

@@ -1,14 +1,11 @@
 precision highp float;
 
-uniform float uTime;
+uniform float uProgress;
 
 varying vec2 vUv;
 
 void main() {
-  float sTime = sin(uTime);
-  float cTime = cos(uTime);
-
-  vec3 color = vec3(vUv.x*0.8 + sTime*0.2, vUv.y, 0.5 + cTime*0.5);
+  vec3 color = vec3(vUv, uProgress);
 
   gl_FragColor = vec4(color, 1.0);
 }

yarn.lock

@@ -5288,6 +5288,11 @@ tunnel-agent@^0.6.0:
   dependencies:
     safe-buffer "^5.0.1"
 
+tweakpane@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/tweakpane/-/tweakpane-3.0.4.tgz#9f40ae9b38a049c7d2782f73d4261f7363cedc8b"
+  integrity sha512-rnx+vzTw1tAjUXkIFubYUIwJEmOASFAlIP0De6tqWa2+IptmxdyvXWQG5/Vsph1T5YkFcMJ3VnV56wZirjPyFA==
+
 tweetnacl@^0.14.3, tweetnacl@~0.14.0:
   version "0.14.5"
   resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-0.14.5.tgz#5ae68177f192d4456269d108afa93ff8743f4f64"