Three Customshadermaterial has an awesome demo of an ocean shader using “Gerstner waves” which is a wave formula that creates convincing ocean waves.
I ported that shader to Shaderfrog. The initial demo is pretty similar to the Three-CSM one: https://shaderfrog.com/2/editor/cmam3jqbj0000paurs3yroinj
Three-CSM lets you inject shaders into Three.js default materials with string replacement. Shaderfrog composes at the GLSL level, and it’s a social platform, so you can “compose” any shaders on the site arbitriarily into other ones.
This shader has been very fun to experiment with. I extracted the base shadre first, which is the vertex noise + fragment color: https://shaderfrog.com/2/editor/cman27z8u000apaurvhglwf3f
This shader can both be “composed” with other shaders, as well as you can inject other shaders into this one, to do things like change ocean surface shader.
Composing it with a Zelda/Mario-like cartoon ocean looks fantastic: https://shaderfrog.com/2/editor/cman0hya60004paurgo9i4oza
Messing around with other patterns like Voronoi: https://shaderfrog.com/2/editor/cman0oofa0006pauryrt8wd9y
Also looks great in a dark metallic Matrix code theme: https://shaderfrog.com/2/editor/cmand6u4j000gpaurbw8mq4mv
You can also compose vertex shaders together. Shaderfrog extracts the final “position” vec3 and uses that as the initial position for other shaders. Here’s a fireball ocean: https://shaderfrog.com/2/editor/cman2amwl000cpaureu9mpjbd
Here’s a forbidden cookie: https://shaderfrog.com/2/editor/cmanlgpu0000opaurvzoc5t2y
And here’s stacking ripple shaders across a glass moon: https://shaderfrog.com/2/editor/cmanln8xk000qpaurd5z9poq2
I hope some of these are inspiring to you! As an artist I find Shaderfrog really fun to quickly iterate on effects with and test the out. And the more shaders people create, the more inputs you have available on the social platform to try composing into your own shader.
6 Likes
Is there any updated particle water based on the input coordinates?
How do I download this shader to use in my game?
It is not clear what your question is
For downloading into your game, I replied in Discord as well, but I’ll add some screenshots here.
You can get this shader into your game it but it will require some manual work. Shaderfrog does not currently have a standard way to export shaders. This is due to how the editor works, using a GLSL compiler. The full details (which you probably don’t need to care about) are outlined here Export Feature (THREE.js) · Issue #2 · ShaderFrog/editor · GitHub
For any node in the graph, you can always see the raw shader GLSL. The ocean shader has both a fragment and vertex component. You can see its raw code by double clicking on its node or browsing to it.
You need to modify a Three.js material to inject this shader source code into it using onBeforeCompile. I don’t think there will be an easy way to do this with Three’s new TSL. Also, all of these shaders are for WebGL, not WebGPU. They are all GLSL.
Shaderfrog uses a compiler to hijack the entire raw Three.js material GLSL code and inject new GLSL into it. To hep get an idea of what Shaderfrog is doing, you can also look at the final built GLSL in the “Fragment Output” and “Vertex Output” tabs - which will show you how the custom ocean shader GLSL is composed with the Three.js material GLSL. In particular - look for where main_Ocean() is used.
All of the blue nodes in the graph are data nodes, most of which need to be passed to your material as uniforms. You will need to convert each blue data node to its uniform and set material.uniforms.offset.value = 0.042 etc
The shader in question you asked about, the cartoon water shader (https://shaderfrog.com/2/editor/cman0hya60004paurgo9i4oza) also has another shader node in the graph. But I would start with just the base ocean shader.
You can also see the raw ocean shader “base” material, not composed with a Three.js shader. You can probably put this directly into a Three RawShaderMaterial https://shaderfrog.com/2/editor/cman27z8u000apaurvhglwf3f
