ShadertoyのiResolution変数をThree.jsスクリプトで変換して使用する

Question

ShadertoyをローカルのThree.jsプロジェクトに変換しており、レンダリングできません。ここでfull snippetを試すことができます。

私はiResolution変数をどのように変換するのかという問題があると思います。私が理解しているように、組み込みのShadertoyグローバル変数iResolutionには、ウィンドウのピクセルサイズが含まれています。ここでoriginal Shadertoyに使用される方法iResolutionある：

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

iResolution変換への2つのアプローチを試みたIローカルThree.jsベースのスクリプトにこのShadertoy変換で：ウィンドウをロード

1）ベクトル2として寸法および均一vec2 uResolutionとしてシェーダにそれらを送信する：

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

このソリューションは、最も近いデにこだわっoriginal Shadertoyを無視しても何も表示されません。

2）第二のアプローチは、このSO Answerから来ているとxy絶対座標にuv座標を変換します。この一

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

、私は完全にそれがどのように動作するか理解していない認める、と私2行目のuvCustomの使用が正しくない可能性があります。

最後に、使用しているThree.js CameraHelperを除いて、画面上に何も表示されません。それ以外の場合、画面は黒色で、コンソールにはJavascriptまたはWebGLのエラーは表示されません。見ていただきありがとうございます！

Answer 1

初心者の方でも、この部門を行う必要はありません。あなたは、フルスクリーンクワッド（PlaneBufferGeometry）を使用している場合は、あなただけのUVでそれをレンダリングすることができます。

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

uv == vUv; //sort of 

あなたの頂点シェーダは、あなたがnew THREE.PlaneGeometry(2,2,1,1);を作る場合、これはすべきこの

varying vec2 varyingUV; 

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

のようなものを見ることができますフルスクリーンのクワッドとしてレンダリング