Как определить координаты фрагмента относительно его сетки

Question

Я пытаюсь сделать систему плитки с использованием шейдеров ThreeJS. Я думал, что начну с PlaneBufferGeometry с заполнением градиента (ShaderMaterial).

Я действительно новичок в GLSL, и я изо всех сил пытаюсь найти способ определения координат фрагмента внутри его сетки (для вычисления значения градиента).

Чтобы было ясно, я ищу тот же переменной position, используемых в этих примерах: http://pixelshaders.com/sample/

кодекса (пиксельный шейдер):

precision mediump float; 

varying vec2 position; 

void main() { 
    gl_FragColor.r = position.x; 
    gl_FragColor.g = 0.0; 
    gl_FragColor.b = 0.0; 
    gl_FragColor.a = 1.0; 
} 

Но только пример показывает код фрагмента shader, поэтому я не понимаю, как он построил эту переменную.

Я попытался объявить ту же переменную в моей вершинных шейдеров:

varying vec2 position; 

, но я получил следующее сообщение об ошибке (Chrome консоль):

THREE.WebGLShader: gl.getShaderInfoLog() ERROR: 0:77: 'position' : redefinition

Похоже three.js установки что-то настроек уже называется «положение» в вершинном шейдере:

attribute vec3 position; 

Но я уверен, что мне нужно сделать мой OW n vec2, я просто не понимаю, как его вычислить.

Любой намек будет оценено

Answer 1

position Имя зарезервировано three.js передать вершину атрибута position в вершинный шейдер. Просто назовите переменную, отличную от position. Вы можете использовать это вместо этого -

Vertex Shader:

varying vec2 vPosition; 

void main() { 
    // your calculation 
    vPosition = position.xy; 
    gl_Position = vec4(position, 1.0); 
} 

пиксельный шейдер:

varying vec2 vPosition; 

void main() { 
    gl_FragColor.r = vPosition.x; 
    gl_FragColor.g = 0.0; 
    gl_FragColor.b = 0.0; 
    gl_FragColor.a = 1.0; 
} 

Кроме того, вы можете использовать встроенный в переменной gl_FragCoord добиться того, что вы ищете. Таким образом, вам не нужно использовать дополнительную переменную.

Фрагмент шейдеры:

void main() { 
     gl_FragColor.r = gl_FragCoord.x/WINDOW_WIDTH; 
     gl_FragColor.g = 0.0; 
     gl_FragColor.b = 0.0; 
     gl_FragColor.a = 1.0; 
    }