Three.js/GLSL — преобразование пиксельных координат в мировые координаты

У меня есть простой шейдер в моем приложении 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>

В: Как преобразовать положение пикселя в его мировое положение в WebGL с помощью Three.js?


three.js webgl glsl glsles
person Dragonseer    schedule 01.12.2013    source источник
comment
Посмотрите, поможет ли это вам: stackoverflow.com/questions/19776554/   -  person WestLangley    schedule 01.12.2013
comment
@WestLangley: Ваша первая скрипка по этому вопросу ближе к тому, чего я хочу достичь. Я смог вывести решение из него. Смотрите мой ответ ниже. Спасибо!   -  person Dragonseer    schedule 01.12.2013

Ответы (1)


arrow_upward
1
arrow_downward

Ответ получен из скрипта WestLangley здесь: 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>
person Dragonseer    schedule 01.12.2013
comment
Это может быть ответ, который вы хотите, но это не ответ на вопрос, который вы задали. - person gman; 27.08.2017