Wie Koordinaten des Fragments relativ zu seinem Mesh zu bestimmen

Question

Ich versuche, ein Tile-System mit ThreeJS Shadern zu tun. Ich dachte, ich würde mit einer PlaneBufferGeometry mit einer Farbverlaufsfüllung (ShaderMaterial) beginnen.

Ich bin wirklich neu in GLSL und ich bin dabei, einen Weg zu finden, Koordinaten eines Fragments in seinem Netz zu bestimmen (um den Gradientenwert zu berechnen).

klar sein, ich bin auf der Suche für die gleiche Variable position in diesen Beispielen verwendet: http://pixelshaders.com/sample/

-Code (Fragment-Shader):

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; 
} 

Aber das Beispiel für das Fragment des Code nur zeigen Shader, also verstehe ich nicht, wie er diese Variable konstruiert.

Ich habe versucht, die gleiche Variable in meinem Vertex-Shader zu erklären:

varying vec2 position; 

aber ich bekam die folgende Fehlermeldung (Chrome-Konsole):

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

Es scheint wie Three.js alredy Setup etwas 'Position' im Vertex-Shader genannt:

attribute vec3 position; 

Aber ich bin ziemlich sicher, dass ich mein ow machen muss n vec2 variable, ich bekomme einfach nicht, wie ich es berechnen soll.

Jeder möglicher Hinweis viel

Answer 1

Der Name position ist reserviert von Three.js geschätzt werden, um den Scheitelpunkt position passieren zu Vertex-Shader-Attribut. Benennen Sie die Variable anders als position. Sie können dies stattdessen -

Vertex Shader:

varying vec2 vPosition; 

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

Fragment-Shader:

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; 
} 

Auch können Sie die integrierte Variable gl_FragCoord verwenden, um zu erreichen, was Sie suchen. Auf diese Weise müssen Sie keine zusätzliche Variable verwenden.

Fragment-Shader:

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; 
    }