Нет вывода в холсте при интеграции Shadertoy

Question

Я наткнулся на this SO сообщение, описывающее путь к порту shadertoy примеры в три js.

Я пробовал следовать за этим и закончил с этим plunk. Пиксельный шейдер выглядит следующим образом

#ifdef GL_ES 
    precision highp float; 
    #endif 
    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); 
     } 

и код threejs как этот

window.addEventListener("load", function() { 

    // Camera variables. 
    var width = window.innerWidth; 
    var height = window.innerHeight; 
    var aspect = width/height; 
    var fov = 65; 
    var clipPlaneNear = 0.1; 
    var clipPlaneFar = 1000; 
    var clearColor = 0x221f26; 
    var clearAlpha = 1.0; 

    // main container. 
    var $container = $('#container'); 

    // Clock 
    var clock = new THREE.Clock(); 

    // Set up uniform. 
    var tuniform = { 
     iGlobalTime: { type: 'f', value: 0.1 }, 
     iChannel0: { type: 't', value: THREE.ImageUtils.loadTexture('images/tex07.jpg') }, 
     iChannel1: { type: 't', value: THREE.ImageUtils.loadTexture('images/tex03.jpg') }, 
    }; 
    tuniform.iChannel0.value.wrapS = tuniform.iChannel0.value.wrapT = THREE.RepeatWrapping; 
    tuniform.iChannel1.value.wrapS = tuniform.iChannel1.value.wrapT = THREE.RepeatWrapping; 

    // Set up our scene. 
    var scene = new THREE.Scene(); 

    var camera = new THREE.PerspectiveCamera(fov, aspect, clipPlaneNear, clipPlaneFar); 
    //camera.position.z = 10; 

    var renderer = new THREE.WebGLRenderer({antialias: true}); 
    renderer.setSize(width, height); 
    renderer.setClearColor(new THREE.Color(clearColor, clearAlpha)); 

    $container.append(renderer.domElement); 

    var mat = new THREE.ShaderMaterial({ 
     uniforms: tuniform, 
     vertexShader: $('#vertexshader').text(), 
     fragmentShader: $('#fragmentshader').text(), 
     side:THREE.DoubleSide 
    }); 

    tuniform.iGlobalTime.value += clock.getDelta(); 

    var tobject = new THREE.Mesh(new THREE.PlaneGeometry(700, 394,1,1), mat); 
    //var tobject = new THREE.Mesh(new THREE.PlaneBufferGeometry (700, 394,1,1), mat); 

    scene.add(tobject); 

    // Keep updating our scene. 
    var loop = function loop() { 
    renderer.render(scene, camera); 
    }; 

    loop(); 

}, false); 

Как вы можете видеть из шлепнуть, не выход на этой странице. Что я сделал неправильно в этом случае и как я могу успешно реализовать шейдер в трехjs?

Answer 1

Ваша камера должна быть camera.position.z = 1000; и

Ваш код цикл должен быть:

var loop = function loop() { 
    requestAnimationFrame(loop); 
    tuniform.iGlobalTime.value += clock.getDelta(); 
    renderer.render(scene, camera); 
}; 

loop(); 

Updated plunker: