2017-12-21 20 views
0

Der folgende Link ist mein Stift passen:Wie Rauschen-Shader in mein Flugzeug Geometrie

https://codepen.io/johnhckuo/pen/RxrXxX

Und hier ist mein Code in Fragment-Shader:

void main() { 
    vec2 st = gl_FragCoord.xy/u_resolution.xy; 
    vec3 color = vec3(0.0); 

    vec3 worldtoEye = eye - worldPosition; 
    vec3 eyeDirection = normalize(worldtoEye); 
    vec3 pos = vec3(st.x*5.0, st.y*5.0, u_time*0.5); 
    color = vec3(fbm(pos) + 1.0); 
    //color = vec3(noise(pos)*0.5 + 1.0); 

    vec3 sunLight = vec3(1., 1., 1.); 
    color *= (diffuseLight(sunLight) + specularLight(eyeDirection)); 

    vec3 oceanBlue = vec3(0.109, 0.419, 0.627); 
    gl_FragColor = vec4(oceanBlue * color, 1.0); 

} 

Hier ist der Code der Ebene geometrie:

var plane_geometry = new THREE.PlaneBufferGeometry(2000, 2000, 32); 
    var customMaterial = new THREE.ShaderMaterial( 
    { 
     uniforms: uniforms, 
     vertexShader: document.getElementById('vertexShader' ).textContent, 
     fragmentShader: document.getElementById('fragmentShader').textContent 

    } 
); 
    customMaterial.side = THREE.DoubleSide; 
    var surface = new THREE.Mesh(plane_geometry, customMaterial); 
    surface.position.set(0,0,0); 
    scene.add(surface); 

Ich habe einen Shader erstellt und versucht, es auf mein Flugzeug anzuwenden.

Aber immer wenn ich heranzoome, muss der Shader seither am Bildschirm fixiert werden und nicht entsprechend ein-/auszoomen.

Irgendwelche Vorschläge werden geschätzt!

Antwort

1

Ändern Sie diese Zeile:

vec2 st = gl_FragCoord.xy/u_resolution.xy; 

zu

vec2 st = uVu.xy* 2.0; 

und Geige mit 2.0 (die Auflösung)

Es ist auch einfach vert + frag Shadern auf ShaderFrog zu testen, wie in : https://shaderfrog.com/app/view/1997

+0

Wow! Danke für die Antwort und die Ressource. Sehr dankbar :) – johnhckuo

Verwandte Themen