Three.js/GLSL -将像素坐标转换为世界坐标

Question

我的Three.js应用程序中有一个简单的着色器，将屏幕涂成红色。但是，我想把所有像素都涂到给定的世界位置的右边，以不同的颜色。

我见过一些 答案建议使用varying vec4 worldCoord = gl_ModelViewMatrix * gl_Vertex;，但是由于WebGL使用GLSLES，所以像gl_Vertex这样的变量对我来说是不可用的。

顶点着色器

<script type="x-shader/x-vertex" id="vertexshader">
    #ifdef GL_ES
    precision highp float;
    #endif

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

片段着色器

<script type="x-shader/x-fragment" id="fragmentshader">
    #ifdef GL_ES
    precision highp float;
    #endif

    float worldX = 10.0; //Or some other position in the WebGL world

    void main()
    {
        if(gl_FragCoord.x > worldX) //FragCoord gives me coordinates relative to the screen
        {
            gl_FragColor = vec4(0.0, 1.0, 0.0, 1);
        }

        else
        {
            gl_FragColor = vec4(1.0, 0.0, 0.0, 1);
        }
    }
</script>

问:如何使用Three.js?将像素的位置转换为在WebGL中的世界位置

Answer 1

答案来自韦斯特兰利的Fiddle这里：http://jsfiddle.net/ST4aM/2/。

顶点着色器

<script type="x-shader/x-vertex" id="vertexshader">
    #ifdef GL_ES
    precision highp float;
    #endif

    varying float x;
    varying float y;
    void main()
    {
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
        x = position.x;
        y = position.y;
    }
</script>

片段着色器

<script type="x-shader/x-fragment" id="fragmentshader">
    #ifdef GL_ES
    precision highp float;
    #endif

    varying float x;
    varying float y;

    void main()
    {
        if(x > somePosition)
        {
            gl_FragColor = vec4(0.0, 1.0, 0.0, 1);
        }

        else
        {
            gl_FragColor = vec4(1.0, 0.0, 0.0, 1);
        }
    }
</script>