Download

Implementing shadertoy shader (HELP NEEDED)

I’m trying to implement an ocean shader into Ue4, I tried to do this with a custom node, first I wrote my HLSL code to a new shader in the shader folder, called that shader in my Materialtemplate.usf, and when I compiled the code to launch the engine, I got a buttload of errors, I’m just trying to see if 'yall can compile without getting the same errors, here’s the code;

/*
“Seascape” by Alexander Alekseev aka TDM - 2014
License Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.
Contact: tdmaav@gmail.com
*/

const int NUM_STEPS = 8;
const float PI = 3.1415;
const float EPSILON = 1e-3;
float EPSILON_NRM = 0.1 / iResolution.x;

// sea
const int ITER_GEOMETRY = 3;
const int ITER_FRAGMENT = 5;
const float SEA_HEIGHT = 0.6;
const float SEA_CHOPPY = 4.0;
const float SEA_SPEED = 0.8;
const float SEA_FREQ = 0.16;
const vec3 SEA_BASE = vec3(0.1,0.19,0.22);
const vec3 SEA_WATER_COLOR = vec3(0.8,0.9,0.6);
float SEA_TIME = iGlobalTime * SEA_SPEED;
mat2 octave_m = mat2(1.6,1.2,-1.2,1.6);

// math
mat3 fromEuler(vec3 ang) {
vec2 a1 = vec2(sin(ang.x),cos(ang.x));
vec2 a2 = vec2(sin(ang.y),cos(ang.y));
vec2 a3 = vec2(sin(ang.z),cos(ang.z));
mat3 m;
m[0] = vec3(a1.ya3.y+a1.xa2.xa3.x,a1.ya2.xa3.x+a3.ya1.x,-a2.ya3.x);
m[1] = vec3(-a2.y
a1.x,a1.ya2.y,a2.x);
m[2] = vec3(a3.y
a1.xa2.x+a1.ya3.x,a1.xa3.x-a1.ya3.ya2.x,a2.ya3.y);
return m;
}
float hash( vec2 p ) {
float h = dot(p,vec2(127.1,311.7));
return fract(sin(h)43758.5453123);
}
float noise( in vec2 p ) {
vec2 i = floor( p );
vec2 f = fract( p );
vec2 u = f
f*(3.0-2.0f);
return -1.0+2.0
mix( mix( hash( i + vec2(0.0,0.0) ),
hash( i + vec2(1.0,0.0) ), u.x),
mix( hash( i + vec2(0.0,1.0) ),
hash( i + vec2(1.0,1.0) ), u.x), u.y);
}

// lighting
float diffuse(vec3 n,vec3 l,float p) {
return pow(dot(n,l) * 0.4 + 0.6,p);
}
float specular(vec3 n,vec3 l,vec3 e,float s) {
float nrm = (s + 8.0) / (3.1415 * 8.0);
return pow(max(dot(reflect(e,n),l),0.0),s) * nrm;
}

// sky
vec3 getSkyColor(vec3 e) {
e.y = max(e.y,0.0);
vec3 ret;
ret.x = pow(1.0-e.y,2.0);
ret.y = 1.0-e.y;
ret.z = 0.6+(1.0-e.y)*0.4;
return ret;
}

// sea
float sea_octave(vec2 uv, float choppy) {
uv += noise(uv);
vec2 wv = 1.0-abs(sin(uv));
vec2 swv = abs(cos(uv));
wv = mix(wv,swv,wv);
return pow(1.0-pow(wv.x * wv.y,0.65),choppy);
}

float map(vec3 p) {
float freq = SEA_FREQ;
float amp = SEA_HEIGHT;
float choppy = SEA_CHOPPY;
vec2 uv = p.xz; uv.x *= 0.75;

float d, h = 0.0;    
for(int i = 0; i < ITER_GEOMETRY; i++) {        
	d = sea_octave((uv+SEA_TIME)*freq,choppy);
	d += sea_octave((uv-SEA_TIME)*freq,choppy);
    h += d * amp;        
	uv *= octave_m; freq *= 1.9; amp *= 0.22;
    choppy = mix(choppy,1.0,0.2);
}
return p.y - h;

}

float map_detailed(vec3 p) {
float freq = SEA_FREQ;
float amp = SEA_HEIGHT;
float choppy = SEA_CHOPPY;
vec2 uv = p.xz; uv.x *= 0.75;

float d, h = 0.0;    
for(int i = 0; i < ITER_FRAGMENT; i++) {        
	d = sea_octave((uv+SEA_TIME)*freq,choppy);
	d += sea_octave((uv-SEA_TIME)*freq,choppy);
    h += d * amp;        
	uv *= octave_m; freq *= 1.9; amp *= 0.22;
    choppy = mix(choppy,1.0,0.2);
}
return p.y - h;

}

vec3 getSeaColor(vec3 p, vec3 n, vec3 l, vec3 eye, vec3 dist) {
float fresnel = 1.0 - max(dot(n,-eye),0.0);
fresnel = pow(fresnel,3.0) * 0.65;

vec3 reflected = getSkyColor(reflect(eye,n));    
vec3 refracted = SEA_BASE + diffuse(n,l,80.0) * SEA_WATER_COLOR * 0.12; 

vec3 color = mix(refracted,reflected,fresnel);

float atten = max(1.0 - dot(dist,dist) * 0.001, 0.0);
color += SEA_WATER_COLOR * (p.y - SEA_HEIGHT) * 0.18 * atten;

color += vec3(specular(n,l,eye,60.0));

return color;

}

// tracing
vec3 getNormal(vec3 p, float eps) {
vec3 n;
n.y = map_detailed(p);
n.x = map_detailed(vec3(p.x+eps,p.y,p.z)) - n.y;
n.z = map_detailed(vec3(p.x,p.y,p.z+eps)) - n.y;
n.y = eps;
return normalize(n);
}

float heightMapTracing(vec3 ori, vec3 dir, out vec3 p) {
float tm = 0.0;
float tx = 1000.0;
float hx = map(ori + dir * tx);
if(hx > 0.0) return tx;
float hm = map(ori + dir * tm);
float tmid = 0.0;
for(int i = 0; i < NUM_STEPS; i++) {
tmid = mix(tm,tx, hm/(hm-hx));
p = ori + dir * tmid;
float hmid = map(p);
if(hmid < 0.0) {
tx = tmid;
hx = hmid;
} else {
tm = tmid;
hm = hmid;
}
}
return tmid;
}

// main
void mainImage( out vec4 fragColor, in vec2 fragCoord ) {
vec2 uv = fragCoord.xy / iResolution.xy;
uv = uv * 2.0 - 1.0;
uv.x = iResolution.x / iResolution.y;
float time = iGlobalTime * 0.3 + iMouse.x
0.01;

// ray
vec3 ang = vec3(sin(time*3.0)*0.1,sin(time)*0.2+0.3,time);    
vec3 ori = vec3(0.0,3.5,time*5.0);
vec3 dir = normalize(vec3(uv.xy,-2.0)); dir.z += length(uv) * 0.15;
dir = normalize(dir) * fromEuler(ang);

// tracing
vec3 p;
heightMapTracing(ori,dir,p);
vec3 dist = p - ori;
vec3 n = getNormal(p, dot(dist,dist) * EPSILON_NRM);
vec3 light = normalize(vec3(0.0,1.0,0.8)); 
         
// color
vec3 color = mix(
    getSkyColor(dir),
    getSeaColor(p,n,light,dir,dist),
	pow(smoothstep(0.0,-0.05,dir.y),0.3));
    
// post
fragColor = vec4(pow(color,vec3(0.75)), 1.0);

}

If anyone could help me with this, I’m even willing to pay, to get this working in my current project, please message me asap, and reply here in the thread.

Hey Yoyomike sup? :), don’t wanna discourage you but I had recreated part of that shader in ue4 sometime ago but it was not performing good enough (I remember getting like 35fps).

That said, it can probably be optimized (I would start by using different noise generation functions).

Hey, performance isn’t an issue, would you mind telling me how you got it to implement, or prefer uploading a project with it implemented? I’d really appreciate that :D. Just using this in the mean time until your FFT is done, which I really am looking forward to by the way.

Can’t help you there I’m afraid, the code will need a few modifications here and there to work in ue4 properly which would take some time (which I currently don’t have :p, maybe some other time).

I wish I had the material I implemented before but I’m 99.999% sure I scrapped it :frowning: gonna have to check my desktop when I get back from vacation to know for sure but yeah… :p.

Ahh, disregard my PM then, and enjoy yourself, taking a load off from work must be nice.

I made it, you still want it?

What kind of code modifications did this require? Looks pretty good.

Shadertoy is webgl. Unreal engine uses HLSL. Find a tool to convert that to HLSL, cram it into some custom node and then assign the output variables properly is the TLDR

I would have been able to do it all with custom nodes if it wasn’t for heightMapTracing which had an out vector. So I had to put some of it in a .usf file.

And you don’t really need a tool to translate glsl to hlsl, it’s mostly changing vec to float, changing a few function names, and being aware of a few functions that have slightly different implementations, like frac and fract.

Yes please :).

It’s awesome, would you like to share it ?

Please can you provide the material or some tutorial

Sharing the shader

Can anyone share a working version of this?

Your work is amazing. Could you please share it out? I’m doing the same thing, but I have some problem with putting it in custom node.