three.js - основы шейдера фрагмента - цвет фрагмента по его позиции

Question

Я пытаюсь покрасить фрагменты в моем шейдере в соответствии с их расположением между верхней и нижней вершинами. Вот шейдеры:

<script type="x-shader/x-vertex" id="vertexshader"> 

    uniform  float span; 

    attribute float displacement; 

    varying  vec3 vNormal; 
    varying  float color_according_to_z; 

       float z_actual; 

    void main() { 
     vNormal = normal; 

     vec3 newPosition = position + normal * vec3(0.0, 0.0, displacement); 
     gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0); 

     z_actual = gl_Position.z + span/2.0; 
     color_according_to_z = 1.0/span * z_actual; 
    } 

</script> 

<script type="x-shader/x-fragment" id="fragmentshader"> 

    uniform  float span; 

    varying  float color_according_to_z; 

    void main() 
    { 
     gl_FragColor = vec4(color_according_to_z, 0.5, 0.5, 1.0); 
    } 

</script> 

Вот моя функция визуализации:

function render() { 
    requestAnimationFrame(render); 

    plane.rotation.x = global_x_rotation; 
    plane.rotation.z = global_z_rotation; 

    for(var i = attributes.displacement.value.length - 1; i >= 0; i--) { 
     attributes.displacement.value[i] = attributes.displacement.value[i] - 0.5 + Math.random(); 
    }; 

    uniforms.lowest = attributes.displacement.value.min(); 
    uniforms.highest = attributes.displacement.value.max(); 
    uniforms.span = uniforms.highest - uniforms.lowest; 

    attributes.displacement.needsUpdate = true; 

    uniforms.lowest.needsUpdate = true; 
    uniforms.highest.needsUpdate = true; 
    uniforms.span.needsUpdate = true; 

    renderer.render(scene, camera); 
} 

изменить смещение от кадра к кадру и пересчитывать диапазон между самым высоким и самыми низкими вершинами.

Заключительная часть, как рисовать фрагмент в соответствии с его положением к самому высокому или низкому, я еще не мог понять.

Here is a jsfiddle with the mentioned code.

Answer 1

У вас есть несколько ошибок, которые я могу видеть. Проверьте, что NaN в ваших переменных.

Логика шейдера выглядит нормально, за исключением того, что она не может произвести нужный цвет.

var max = -1.0e30; 
var min = +1.0e30; 
var x; 
for(var i = attributes.displacement.value.length - 1; i >= 0; i--) { 
    x = attributes.displacement.value[i] += - 0.5 + Math.random(); 
    if (x < min) min = x; 
    if (x > max) max = x; 
}; 

uniforms.lowest.value = min; // lowest.value ! 
uniforms.highest.value = max; 
uniforms.span.value = max - min; 

attributes.displacement.needsUpdate = true; 

//uniforms.lowest.needsUpdate = true; // not needed for uniforms 
//uniforms.highest.needsUpdate = true; 
//uniforms.span.needsUpdate = true; 

скрипку: http://jsfiddle.net/c2jry/2/