title: How to implemen shadertoy code into three.js - clarifying the details
body: <p>So here is a previous question:
  <a href="https://stackoverflow.com/questions/24820004/how-to-implement-a-shadertoy-shader-in-three-js">How to implement a ShaderToy shader in three.js</a></p>
  
  <p>Tried to implement the steps from the link above into this code unsucessfully:
  <a href="https://github.com/mrdoob/three.js/blob/master/examples/webgl_shader.html" rel="nofollow noreferrer">three.js/blob/master/examples/webgl_shader.html</a></p>
  
  <p>So I replaced the original vertex shader and the origianl fragment shader so I got this code:</p>
  
  <pre><code>&lt;script id="vertexShader" type="x-shader/x-vertex"&gt;
      varying vec2 vUv; 
      void main()
      {
  
       vUv = uv;
  
          vec4 mvPosition = modelViewMatrix * vec4(position, 1.0 );
          gl_Position = projectionMatrix * mvPosition;    
      }
  &lt;/script&gt;
  
  &lt;script id="fragmentShader" type="x-shader/x-fragment"&gt;
  
  
      uniform float iGlobalTime;
      uniform sampler2D iChannel0;
      uniform sampler2D iChannel1;
  
      varying vec2 vUv; 
  
      void main(void)
      {
          vec2 p = -1.0 + 2.0 *vUv;
          vec2 q = p - vec2(0.5, 0.5);
  
          q.x += sin(iGlobalTime* 0.6) * 0.2;
          q.y += cos(iGlobalTime* 0.4) * 0.3;
  
          float len = length(q);
  
          float a = atan(q.y, q.x) + iGlobalTime * 0.3;
          float b = atan(q.y, q.x) + iGlobalTime * 0.3;
          float r1 = 0.3 / len + iGlobalTime * 0.5;
          float r2 = 0.2 / len + iGlobalTime * 0.5;
  
          float m = (1.0 + sin(iGlobalTime * 0.5)) / 2.0;
          vec4 tex1 = texture2D(iChannel0, vec2(a + 0.1 / len, r1 ));
          vec4 tex2 = texture2D(iChannel1, vec2(b + 0.1 / len, r2 ));
          vec3 col = vec3(mix(tex1, tex2, m));
          gl_FragColor = vec4(col * len * 1.5, 1.0);
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>This is clear but how and Where to implement the tuniform:</p>
  
  <pre><code>var tuniform = {
  
  
          iGlobalTime:    { type: 'f', value: 0.1 },
          iChannel0:  { type: 't', value: THREE.ImageUtils.loadTexture( 'textures/tex07.jpg') },
          iChannel1:  { type: 't', value: THREE.ImageUtils.loadTexture( 'textures/infi.jpg' ) },
  
  
      };
  </code></pre>
  
  <p>and the iGlobalTime parts?</p>
  
  <pre><code>tuniform.iChannel0.value.wrapS = tuniform.iChannel0.value.wrapT = THREE.RepeatWrapping;
  tuniform.iChannel1.value.wrapS = tuniform.iChannel1.value.wrapT = THREE.RepeatWrapping;
  </code></pre>
  
  <p>So my question is: how to modify this code (or any thrre.js code):
  <a href="https://github.com/mrdoob/three.js/blob/master/examples/webgl_shader.html" rel="nofollow noreferrer">three.js/blob/master/examples/webgl_shader.html</a></p>
  
  <p>to display a working shadertoy example which includes iGlobalTime as well?</p>
  
  <p>==================== EITED PART STARTS HERE =========================</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;title&gt;three.js webgl - shader [Monjori]&lt;/title&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"&gt;
          &lt;style&gt;
              body {
                  color: #ffffff;
                  font-family:Monospace;
                  font-size:13px;
                  text-align:center;
                  font-weight: bold;
  
                  background-color: #000000;
                  margin: 0px;
                  overflow: hidden;
              }
  
              #info {
                  position: absolute;
                  top: 0px; width: 100%;
                  padding: 5px;
              }
  
              a {
  
                  color: #ffffff;
              }
  
              #oldie a { color:#da0 }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
  
          &lt;div id="container"&gt;&lt;/div&gt;
          &lt;div id="info"&gt;&lt;a href="http://threejs.org" target="_blank"&gt;three.js&lt;/a&gt; - shader demo. featuring &lt;a href="http://www.pouet.net/prod.php?which=52761" target="_blank"&gt;Monjori by Mic&lt;/a&gt;&lt;/div&gt;
  
          &lt;script src="../build/three.min.js"&gt;&lt;/script&gt;
  
          &lt;script src="js/Detector.js"&gt;&lt;/script&gt;
          &lt;script src="js/libs/stats.min.js"&gt;&lt;/script&gt;
  
          &lt;script id="vertexShader" type="x-shader/x-vertex"&gt;
              varying vec2 vUv; 
              void main()
              {
              vUv = uv;
                  vec4 mvPosition = modelViewMatrix * vec4(position, 1.0 );
                  gl_Position = projectionMatrix * mvPosition;    
              }
          &lt;/script&gt;
  
          &lt;script id="fragmentShader" type="x-shader/x-fragment"&gt;
  
  
              uniform float iGlobalTime;
              uniform sampler2D iChannel0;
              uniform sampler2D iChannel1;
  
              varying vec2 vUv; 
  
              void main(void)
              {
                  vec2 p = -1.0 + 2.0 *vUv;
                  vec2 q = p - vec2(0.5, 0.5);
  
                  q.x += sin(iGlobalTime* 0.6) * 0.2;
                  q.y += cos(iGlobalTime* 0.4) * 0.3;
  
                  float len = length(q);
  
                  float a = atan(q.y, q.x) + iGlobalTime * 0.3;
                  float b = atan(q.y, q.x) + iGlobalTime * 0.3;
                  float r1 = 0.3 / len + iGlobalTime * 0.5;
                  float r2 = 0.2 / len + iGlobalTime * 0.5;
  
                  float m = (1.0 + sin(iGlobalTime * 0.5)) / 2.0;
                  vec4 tex1 = texture2D(iChannel0, vec2(a + 0.1 / len, r1 ));
                  vec4 tex2 = texture2D(iChannel1, vec2(b + 0.1 / len, r2 ));
                  vec3 col = vec3(mix(tex1, tex2, m));
                  gl_FragColor = vec4(col * len * 1.5, 1.0);
              }
          &lt;/script&gt;
  
          &lt;script&gt;
  
              if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
  
              var container, stats;
  
              var camera, scene, renderer;
  
              var uniforms;
  
              init();
              animate();
  
              function init() {
  
                  container = document.getElementById( 'container' );
  
                  camera = new THREE.Camera();
                  camera.position.z = 1;
  
                  scene = new THREE.Scene();
  
                  var geometry = new THREE.PlaneBufferGeometry( 2, 2 );
  
                  uniforms = {
                      time: { type: "f", value: 1.0 },
                      resolution: { type: "v2", value: new THREE.Vector2() }
                  };
  
                  var material = new THREE.ShaderMaterial( {
  
                      uniforms: uniforms,
                      vertexShader: document.getElementById( 'vertexShader' ).textContent,
                      fragmentShader: document.getElementById( 'fragmentShader' ).textContent
  
                  } );
  
                  var mesh = new THREE.Mesh( geometry, material );
                  scene.add( mesh );
  
                  renderer = new THREE.WebGLRenderer();
                  renderer.setPixelRatio( window.devicePixelRatio );
                  container.appendChild( renderer.domElement );
  
                  stats = new Stats();
                  stats.domElement.style.position = 'absolute';
                  stats.domElement.style.top = '0px';
                  container.appendChild( stats.domElement );
  
                  onWindowResize();
  
                  window.addEventListener( 'resize', onWindowResize, false );
  
              }
  
              function onWindowResize( event ) {
                  renderer.setSize( window.innerWidth, window.innerHeight );
  
                  uniforms.resolution.value.x = renderer.domElement.width;
                  uniforms.resolution.value.y = renderer.domElement.height;
              }
              //
  
              function animate() {
  
                  requestAnimationFrame( animate );
  
                  render();
                  stats.update();
  
              }
  
              function render() {
  
                  var tuniform = {
  
                          iGlobalTime:    { type: 'f', value: 0.1 },
                          iChannel0:  { type: 't', value: THREE.ImageUtils.loadTexture( 'textures/brick_bump.jpg') },
                          iChannel1:  { type: 't', value: THREE.ImageUtils.loadTexture( 'textures/brick_bump.jpg' ) },
  
                      };
                      tuniform.iChannel0.value.wrapS = tuniform.iChannel0.value.wrapT = THREE.RepeatWrapping;
                      tuniform.iChannel1.value.wrapS = tuniform.iChannel1.value.wrapT = THREE.RepeatWrapping;
  
  
                      delta=clock.getDelta();
                      tuniform.iGlobalTime.value += delta;
  
                      uniforms.time.value += 0.05;
  
                      renderer.render( scene, camera );
  
              }
  
          &lt;/script&gt;
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>