How to implemen shadertoy code into three.js - clarifying the details

Question

So here is a previous question: How to implement a ShaderToy shader in three.js

Tried to implement the steps from the link above into this code unsucessfully: three.js/b

Answer 1

To convert any shader from shadertoy to a three.js shader, you just have to have the correct variables/uniforms. Shadertoy has uniforms available that three.js shaders do not by default. Shadertoy has the iResolution uniform for example, which you will not have in a three.js shader as Shadertoy is for rendering on a flat canvas rather than a 3d object. iGlobalTime is also one of these uniforms that is not in a three.js shader by default.

In the code you posted, you have defined the iGlobalTime uniform corrrectly, you just need create a THREE.Clock once when you code first runs, then you need to update the uniform in your render function.

uniforms.iGlobalTime.value = clock.getElapsedTime();

I have implemented this matrix style shader which uses iGlobalTime in three.js here