фрагмент шейдерной формы больше не загружается в простой тест шейдера

Некоторое время назад (подумав, давайте попробуем что-нибудь в браузере). Я взломал небольшой трёхмерный тест, который рисует квадроцикл с двумя пользовательскими шейдерами, чтобы играть вокруг. Сбросил некоторый пример кода, поместил шейдеры в, вуаля. Я встраиваю three.js непосредственно из Github, поэтому я, конечно, склонен к проблемам миграции :)фрагмент шейдерной формы больше не загружается в простой тест шейдера

Вот что произошло: после повторных посещений этой недели мои униформы перестали работать (проверено с помощью WebGL-Inspector, они все ноль, тогда как предыдущие униформы, загруженные самими тремя .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 некрасиво шейдер;))

источник

2013-04-11 nielsj

Ваши формы имена переменных не совпадают с именами переменных в вашем шейдере.

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) } 
};

источник

2013-04-11 18:12:38 WestLangley

Черт меня, спасибо большое! – nielsj

фрагмент шейдерной формы больше не загружается в простой тест шейдера

ответ

Смежные вопросы