I want to use this shader from ShaderToy on a plane in my project.

I already made a setup with the ShaderMaterial, but I still need help how to convert the mainImage function to three.js and I can’t get it working. I have trouble setting up the iResolution, iTime, fragColor and fragCoord uniforms in the fragmentShader and also need help with the vertexShader.

Can anyone help me with the fragmentShader, vertexShader and the setup of the uniforms?

To convert the provided ShaderToy fragment shader to work with Three.js, we will follow a similar process as outlined earlier. We need to create a corresponding vertex shader for Three.js and modify the fragment shader to match Three.js’s conventions. Also, we will set up the necessary uniforms and JavaScript code to render it using Three.js.

The vertex shader can be a simple pass-through shader, as the main graphical effect is in the fragment shader.

``````void main() {
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
``````

In the fragment shader, we adapt the `mainImage` function to the standard `main` function used in Three.js shaders and use the uniforms provided by Three.js.

``````uniform float iTime;
uniform vec2 iResolution;

void main() {
vec2 uv = -1.0 + 2.0 * gl_FragCoord.xy / iResolution.xy;
uv.x *= iResolution.x / iResolution.y;

vec3 color = vec3(0.0);
for( int i = 0; i < 128; i++ ) {
float pha = sin(float(i) * 546.13 + 1.0) * 0.5 + 0.5;
float siz = pow(sin(float(i) * 651.74 + 5.0) * 0.5 + 0.5, 4.0);
float pox = sin(float(i) * 321.55 + 4.1) * iResolution.x / iResolution.y;
float rad = 0.1 + 0.5 * siz + sin(pha + siz) / 4.0;
vec2 pos = vec2(pox + sin(iTime / 15.0 + pha + siz), -1.0 - rad + (2.0 + 2.0 * rad) * mod(pha + 0.3 * (iTime / 7.0) * (0.2 + 0.8 * siz), 1.0));
float dis = length(uv - pos);
vec3 col = mix(vec3(0.194 * sin(iTime / 6.0) + 0.3, 0.2, 0.3 * pha), vec3(1.1 * sin(iTime / 9.0) + 0.3, 0.2 * pha, 0.4), 0.5 + 0.5 * sin(float(i)));
float f = length(uv - pos) / rad;
f = sqrt(clamp(1.0 + (sin(iTime * siz) * 0.5) * f, 0.0, 1.0));
}

color *= sqrt(1.5 - 0.5 * length(uv));
gl_FragColor = vec4(color, 1.0);
}
``````

### JavaScript/Three.js Code

Now, we set up the Three.js scene, including the uniforms, material, geometry, and mesh.

``````const uniforms = {
iTime: { value: 0 },
iResolution: { value: new THREE.Vector2(window.innerWidth, window.innerHeight) }
};

uniforms: uniforms,
});

const geometry = new THREE.PlaneBufferGeometry(2, 2);
const mesh = new THREE.Mesh(geometry, material);

function animate() {
requestAnimationFrame(animate);

uniforms.iTime.value += 0.05;

renderer.render(scene, camera);
}
animate();
``````

Make sure to replace `vertexShader` and `fragmentShader` with your actual shader code strings. This setup will render the effect of the original ShaderToy shader in a Three.js context. Remember to adjust the uniforms and rendering loop to suit your specific application’s needs.
In this conversion:

• We’ve replaced `mainImage(out vec4 fragColor, in vec2 fragCoord)` with `void main()`.
• We’ve modified the calculation of `uv` to use `gl_FragCoord` instead of `fragCoord`.
• The uniforms `iTime` and `iResolution` are declared at the top, which you will pass from your Three.js application.

This shader should now work within a Three.js context, using a `ShaderMaterial` with this fragment shader and a basic vertex shader. Remember to update the uniform values (`iTime` and `iResolution`) in your JavaScript code as your scene updates.

1 Like

a bit more complicated …

And because I was curious.
The ChatGPT answer from @anidivr above is pretty good.
It was almost a verbatim copy paste.
Only error was to change `planeBufferGeometry` to `planeGeoneyrty` since I am using r159
Seems ChatGPT learned from an older version.

Since there is a new release every month , I asked ChatGPT myself.