片段着色器制服不再在简单着色器测试中上传

问题描述：

前一段时间（思考让我们尝试浏览器）我掀起了一个小型的three.js测试，绘制了一个带有2个自定义着色器的四边形玩具。翻阅一些示例代码，将着色器放入，瞧。我直接从Github中嵌入three.js，所以我当然很容易出现迁移问题:)片段着色器制服不再在简单着色器测试中上传

这就是发生了什么事情：在重新访问本周后，我的制服停止工作（使用WebGL-Inspector进行验证，它们是全部为零，而由three.js上传的先前制服本身仍然很好）。

证实采用WebGL督察：

0 projectionMatrix 1 FLOAT_MAT4 
[ 1.000000000, 0.000000000, 0.000000000, 0.000000000, 
    0.000000000, 1.000000000, 0.000000000, 0.000000000, 
    0.000000000, 0.000000000, -0.002000200, 0.000000000, 
    0.000000000, 0.000000000, -1.000200033, 1.000000000 ] 
1 modelViewMatrix 1 FLOAT_MAT4 
[ 1.000000000, 0.000000000, 0.000000000, 0.000000000, 
    0.000000000, 1.000000000, 0.000000000, 0.000000000, 
    0.000000000, 0.000000000, 1.000000000, 0.000000000, 
    0.000000000, 0.000000000, -0.100000001, 1.000000000 ] 
2 u_resolution 1 FLOAT_VEC2 
    [ 0.000000000, 0.000000000 ] 
3 u_time 1 FLOAT  0.000000000 
4 u_aspectRatio 1 FLOAT  0.000000000

这里的“代码”（我是那种虚拟的，当涉及到所有的东西网络进行，因此不会削减任何可能的冲动，指出其他stupidities =））：

<!-- 
next: texture! 
also, it doesn't work anymore =) (uniforms are invalid?) 
--> 

<html> 
<head> 
    <title>taste the browser!</title> 
    <style>canvas { width: 100%; height: 100% }</style> 

    <script type="text/javascript" src="../WebGL-Inspector/core/embed.js">  </script> 
    <script src="https://raw.github.com/mrdoob/three.js/master/build/three.js"> </script> 
</head> 

<body> 
    <script id="vertexShader" type="x-shader/x-vertex"> 
//   varying vec2 v_UV; 

     void main() { 
//    vUV = uv; 
      gl_Position = projectionMatrix * modelViewMatrix *  vec4(position, 1.0); 
     } 
    </script> 

    <script id="fragmentShader" type="x-shader/x-fragment"> 
     uniform float u_aspectRatio; 
     uniform float u_time; 
     uniform vec2 u_resolution; 

//   varying vec2 v_UV; 

     void main() 
     { 
      vec2 p = -1.0 + 2.0*(gl_FragCoord.xy/u_resolution); 

      // cheapest trick in the book #1: tunnel 
      float r = sqrt(dot(p, p)); 
      float a = atan(p.y, p.x); // abs(a)/3.1416 
      float flower = r + 0.2*sin(a*4.0 + u_time); 

      // cheapest trick in the book #2: 2D blobs 
      vec2 blob1 = vec2(sin(u_time*0.66), cos(u_time*0.96)); 
      vec2 blob2 = vec2(cos(u_time*0.75 + 1.4), sin(u_time*0.4 - 3.0)); 
      vec2 dist1 = p - blob1; 
      vec2 dist2 = p - blob2; 
      dist1 *= 2.0; dist2 *= 3.0; 
      float energy = 1.0/dot(dist1, dist1) + 1.0/dot(dist2, dist2); 
      energy = pow(energy, 4.0); 

       gl_FragColor = vec4(energy, flower, u_time, 1.0); 
     } 
    </script> 

    <script> 
     // initialize renderer 
     var renderer = new THREE.WebGLRenderer(); 
     renderer.setSize(window.innerWidth, window.innerHeight); 
     document.body.appendChild(renderer.domElement); 

     // setup scene & camera 
     var scene = new THREE.Scene(); 
     var camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0.1, 1000); 

     // setup uniforms 
     var myUniforms = { 
      aspectRatio: { type: "f", value: window.innerWidth/window.innerHeight }, 
      time: { type: "f", value: 0.0 }, 
      resolution: { type: "v2", value: new THREE.Vector2(window.innerWidth, window.innerHeight) } 
     }; 

     // build plane with custom shader material 
     var geometry = new THREE.PlaneGeometry(2, 2, 1, 1); 
     var material = new THREE.ShaderMaterial(
      { 
       uniforms: myUniforms, 
       attributes: null, 
       vertexShader: document.getElementById('vertexShader').textContent, 
       fragmentShader: document.getElementById('fragmentShader').textContent } 
      ); 
     var plane = new THREE.Mesh(geometry, material); 
     scene.add(plane); 

     // anything non-zero will do 
     camera.position.z = 0.1; 

     // create timer 
     var timer = new THREE.Clock(true); 

     // render loop func. 
     function render() { 
      // update & render 
      myUniforms.time.value = timer.getElapsedTime(); // % 1.0; 
      renderer.render(scene, camera); 

      // req. next frame 
      requestAnimationFrame(render); 
     } 

     render(); 
    </script> 
</body> 
</html>

任何关于此的指针：非常欢迎！

（是的，那就是1个丑陋着色器;））

答

你的制服变量名不着色器匹配的变量名。

var myUniforms = { 
    u_aspectRatio: { type: "f", value: window.innerWidth/window.innerHeight }, 
    u_time: { type: "f", value: 0.0 }, 
    u_resolution: { type: "v2", value: new THREE.Vector2(window.innerWidth, window.innerHeight) } 
};

该死的我:)非常感谢！ – nielsj 2013-04-11 22:45:44

片段着色器制服不再在简单着色器测试中上传

相关推荐