Konvertieren und Verwenden von Shadertoys iResolution-Variable in einem Three.js-Skript

Question

Ich konvertiere ein Shadertoy in ein lokales Three.js-Projekt und kann es nicht zum Rendern bringen. Sie können die full snippet hier ausprobieren.

Ich denke, dass das Problem darin liegen kann, wie ich die iResolution Variable umwandle. Wie ich es verstehe, enthält die integrierte Shadertoy-globale Variable iResolution die Pixelmaße des Fensters. Hier ist, wie iResolution im original Shadertoy verwendet wird:

vec2 uv = fragCoord.xy/iResolution.y; 
vec2 ak = abs(fragCoord.xy/iResolution.xy-0.5); 

Bei der Umwandlung dieses Shadertoy in eine lokale Three.js-basierte Skript habe ich versucht, zwei Ansätze zur Umwandlung iResolution:

1) das Fenster Laden Dimensionen als Vector2 und sie in den Shader als einheitliche Senden vec2 uResolution:

vec2 uv = gl_FragCoord.xy/uResolution.y; 
vec2 ak = abs(gl_FragCoord.xy/uResolution.xy-0.5); 

Diese Lösung klebt am nächsten an die den ign der original Shadertoy, aber leider nichts rendert.

2) Der zweite Ansatz kommt aus dieser SO Answer und wandelt die uv-xy absoluten Koordinaten Koordinaten:

vec2 uvCustom = -1.0 + 2.0 *vUv; 
vec2 ak = abs(gl_FragCoord.xy/uvCustom.xy-0.5); 

In diesem, ich gebe zu, ich nicht vollständig verstehen, wie es funktioniert, und meine Verwendung der uvCustom in der zweiten Zeile möglicherweise nicht korrekt.

Am Ende nichts rendert auf dem Bildschirm außer einem Three.js CameraHelper ich benutze. Ansonsten ist der Bildschirm schwarz und die Konsole zeigt keine Fehler für das Javascript oder WebGL. Danke für einen Blick!

Answer 1

Für den Anfang müssen Sie nicht einmal diese Division machen. Wenn Sie einen Vollbild-Quad (PlaneBufferGeometry) verwenden, können Sie es nur mit dem UVS machen:

vec2 uv = gl_FragCoord.xy/uResolution.y; 
vec2 vUv = varyingUV; 

uv == vUv; //sort of 

Ihr Vertex-Shader so etwas wie diese

varying vec2 varyingUV; 

void main(){ 
    varyingUV = uv; 
    gl_Position = vec4(position.xy , 0. , 1.); 
} 

Wenn Sie ein new THREE.PlaneGeometry(2,2,1,1); aussehen kann dies sollte render als Vollbild Quad