javascript - 集成Shadertoy时 Canvas 中没有输出

Question

我偶然发现this SO 帖子描述了一种移植方式 shadertoy示例到 Threejs 中。

我尝试跟随并最终得到这个 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);

从 plunk 中可以看到，页面中没有任何输出。在这种情况下我做错了什么，如何在 Threejs 中成功实现着色器？

Answer 1

您的相机应位于camera.position.z = 1000; 和

你的循环代码应该是:

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

loop();

Updated笨蛋: