Example of using a fragment shader from ShaderToy in Three.js

Resources
,
1

Fragment Shader based on ShaderToy https://www.shadertoy.com/view/lt3GWj
But with some tweaks to use it with these GUI controls.

JSFiddle: ShaderToy Water shader in Threejs
image

5 Likes
2

Thanks, I havent seen that shadertoy. It is much faster than the original. However, you should not put “superman” uniforms on the shader, and instead just use the the plane transform itself - rather than using it with OrthoCam as a full screen quad. See here for some hints.

3

I think I know what you are saying. I tried to get the camera in the shader to look straight down onto the ocean, and then tilt the plane in threejs, but I just couldn’t match the richness of the colours.
So, I went with projection onto the plane instead.

4

Nice one! At low intensity it approaches 90% of realism or so, which is very good, and useful for most scenes. But what I would like to see is wild ocean waves on bad weather where foam is created from splashing waves and windy conditions - a majestic harmony of chaos! Of course that won’t be easy, one needs to study the many parameters of physics involved.

5

this would not be enough

6

If I do any more work on this demo, then I will make sure that I update the title of this thread

7

chrome os

image
image1366Ă—768 109 KB

8

Oh, it stopped working, isn’t that a shame.
Here’s a gif for the memories
ocean

9

but it did not? sometimes you just need to click “run” again.

edit: so I tried to embed this shader in a plane - here (edit: now with orbit controls) - but broke the final hsv voodoo part, which in turn broke their day/night code (leaving the incorrect - or not corrected - colors just looks bad) - so I cut the coloring code a lot. you might want to fix it for me :sweat_smile:… or not :person_shrugging:

1 Like
10

Thats a good attempt,
The classic threejs water shader uses both an eye and sun vector. There is probably something that can be hocus pocused in this shader to reproduce.
Anyway, despite the code being 80% documentation in only one language, the IQ required to comprehend it is still way above mine.
handing over.

11

it’s where it says

    // bteitler: direction of the infinitely far away directional light.  Changing this will change
    // the sunlight direction.
    vec3 light = normalize(vec3(0.0,1.0,0.8));

just add it as a uniform?

12

Cool, I just forked yours and added the Threejs sky, and few other small bits and pieces just to see how it looks.
JSFiddle : https://jsfiddle.net/seanwasere/afL8mcsz/
image

2 Likes
13

funny thing is that three’s Sky is also just a full-screen shader, you could just copy Sky.js and edit shadertoy one in, replacing its getSkyColor() with Sky’s original output