Converting and using Shadertoy's iResolution variable in a Three.js script

Question

I'm converting a Shadertoy to a local Three.js project, and can't get it to render. You can try out the full snippet here.

I think the problem may lie in how I'm converting the iResolution variable. As I understand it, the built-in Shadertoy global variable iResolution contains the pixel dimensions of the window. Here is how iResolution is used in the original Shadertoy:

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

In converting this Shadertoy into a local Three.js-based script I have tried two approaches to converting iResolution:

1) Loading the window dimensions as a Vector2 and sending them into the shader as the uniform vec2 uResolution:

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

This solution sticks closest to the design of the original Shadertoy, but alas nothing renders.

2) The second approach comes from this SO Answer and converts the uv coordinates to xy absolute coordinates:

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

In this one, I admit I don't fully understand how it works, and my use of the uvCustom in the second line may not be correct.

In the end, nothing renders onscreen except a Three.js CameraHelper I'm using. Otherwise, the screen is black and the console shows no errors for the Javascript or WebGL. Thanks for taking a look!

Change your shader to just void main() { gl_FragColor = vec4(1,0,0,1); }. Do you see red? If not the issue has nothing to do with your fragment shader. — user128511
– user128511, Commented Jun 2, 2017 at 1:23

pailhead · Accepted Answer · 2017-06-01 18:26:37Z

1

For starters, you don't need to even do this division. If you are using a full screen quad (PlaneBufferGeometry), you can render it with just the uvs:

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

uv == vUv; //sort of

your vertex shader can look something like this

varying vec2 varyingUV;

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

If you make a new THREE.PlaneGeometry(2,2,1,1); this should render as a full screen quad

answered Jun 1, 2017 at 18:26

pailhead

5,5372 gold badges30 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Converting and using Shadertoy's iResolution variable in a Three.js script

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related