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/

three.js - 片段着色器基础 - 根据它的位置给片段着色

1 个答案: