您的位置：首页 > 其它

ShaderToy Seascape

2015-09-18 06:45 429 查看

https://www.shadertoy.com/view/Ms2SD1

Shadertoy

Browse Live New
Shader Sign In

644.6960.0
fps

Seascape

Tags: procedural, noise, waves, sea,water, subsurface

159950

369

0

Uploaded by TDM in 2014-Sep-27

fully-procedural sea surface computing. without textures.

Android version: https://play.google.com/store/apps/details?id=com.nature.seascape
Comments

Dave_Hoskins, 2014-Sep-27

The ITER variable needs to be a constant at compile time, so passing a variable gives an error (GTX 680) on line 98.

It looks great setting the loop to a straight 5 though.

TDM, 2014-Sep-27

yep, thank you!

poljere, 2014-Sep-27

Looks great TDM. Love the water color! You could also add a bit of fog towards the horizon to make the transition between the water and the sky smoother

TDM, 2014-Sep-27

poljere, thanks! you can uncomment line 172 to enable fog.

Dave_Hoskins, 2014-Sep-27

Hello again! I have a tip for cheap anti-aliasing, if you want it.

Pass the distance to the surface to the getNormal function like:

vec3 dist = p - ori;
    float d = length(dist);
    vec3 n = getNormal(p, d*d*.0003);// Or whatever value that suits.

And use the second parameter passed as the epsilon in the normal function.

This smooths distant details and prevents the shimmering pixel effect.

TDM, 2014-Sep-27

yeah, good idea. also, we can get squared length by dot(dist,dist).

Dave_Hoskins, 2014-Sep-27

So true!

Passion, 2014-Sep-27

Incredible I love it. This is so damn impressive.

gloinart, 2014-Sep-29

Best water Ive seen

4rknova, 2014-Sep-29

Amazing!

CPU, 2014-Sep-29

awesome!

ewerybody, 2014-Oct-1

Whooooww!! *drool* No shit: This makes me wanna goto the sea!! I need vacation! :|

ewerybody, 2014-Oct-1

The colors and static looks are almost perfect. But after looking at it for a while.. the waves move kind of linear. I miss this bouncing feel they usually have.

fizzer, 2014-Oct-7

Awesome!

Flavio, 2014-Oct-7

Genius work! AWESOME!

epascal, 2014-Oct-8

Amazing best water ever seen, how long did you take to program it ?

TDM, 2014-Oct-8

a few days, but i've working on water rendering before.

garcia, 2014-Oct-8

This is absolutely amazing. Awesome work!

ac3t1ne, 2014-Oct-11

There is some strange white noise in the first few seconds on my computer, but obviously this is incredible water it looks fantastic!

abhi_bansal, 2014-Oct-11

Awesome !!

mrgnou, 2014-Oct-11

Killer.

ayberkozgur, 2014-Oct-13

This is one of the best CGI things I have ever seen. Simply beautiful.

Chameleon, 2014-Oct-15

Looks amazing!

McRam, 2014-Oct-16

This is ******* amazing! A masterpiece in 185 lines of code.

nimitz, 2014-Oct-20

Finally got around to reading the code. That technique for heightmap intersection is great, is it your own work?

TDM, 2014-Oct-20

it's interpolation search, very fast on linear increasing values (such as distance field). code is mine, algorithm is common.

nimitz, 2014-Oct-21

I see, and it suffers from the same problem as other interval based methods, that is not being able to predict which root it will converge to. But for cases when you (mostly) have only one possible root, like here, this is great.

TDM, 2014-Oct-21

true

jiaolu, 2014-Dec-16

registered account to say it's amazing work

airtight, 2014-Dec-17

I think you might have found the shader that god is running on the actual ocean.

saphire280x, 2014-Dec-31

Is there any cards on the market that can run these demos in fullscreen at 60fps ?

Dave_Hoskins, 2014-Dec-31

My GTX-680 runs this full-screen at 60fps, so I'm sure there are many many more cards that will:-

http://www.videocardbenchmark.net/high_end_gpus.html

valentingalea, 2015-Mar-2

Insane work! Any chance of an article to explain the finer points of how it works? Cheers!

Emuljan, 2015-Apr-10

wow this is really impressive !!!

Aj_, 2015-May-2

This make me wonder if the entire universe is a shader program.

TDM, 2015-May-8

now you can try android version of it (as gpu benchmark):
https://play.google.com/store/apps/details?id=com.nature.seascape

emh, 2015-Jul-18

I'm trying to use this as water plane in my game, or perhaps a sky box eventually.

Could you help me with passing correctly the THREE js camera position as "ori" and angle as "ang" in this JSBin: http://jsbin.com/reqali/edit?html,js,output , so that the mouse camera controls work correctly? Currently I have just set a fixed top-down perspective
on a plane in my game, but it would be cool to map the shader with correct perspective, perhaps even to a sky box.

ArtScott, 2015-Jul-23

I play Box of Rain when viewing.
https://www.youtube.com/watch?v=b-z7uN9OjyI

jedi_cy, 2015-Aug-26

reeeeally amaaaaaazing

alfkuhl, 2015-Sep-14

This is Awesome. The AntiAliasing tip D Hoskins made. Would make this perfect!

Image

Shader Inputs

uniform vec3      iResolution;           // viewport resolution (in pixels)
uniform float     iGlobalTime;           // shader playback time (in seconds)
uniform float     iChannelTime[4];       // channel playback time (in seconds)
uniform vec3      iChannelResolution[4]; // channel resolution (in pixels)
uniform vec4      iMouse;                // mouse pixel coords. xy: current (if MLB down), zw: click
uniform samplerXX iChannel0..3;          // input channel. XX = 2D/Cube
uniform vec4      iDate;                 // (year, month, day, time in seconds)
uniform float     iSampleRate;           // sound sample rate (i.e., 44100)

// "Seascape" by Alexander Alekseev aka TDM - 2014

// License Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

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.y*a3.y+a1.x*a2.x*a3.x,a1.y*a2.x*a3.x+a3.y*a1.x,-a2.y*a3.x);

m[1] = vec3(-a2.y*a1.x,a1.y*a2.y,a2.x);

m[2] = vec3(a3.y*a1.x*a2.x+a1.y*a3.x,a1.x*a3.x-a1.y*a3.y*a2.x,a2.y*a3.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.0*f);

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;

+)" style="margin: 0px; padding: 0px; width: 22px; height: 22px; position: absolute; cursor: pointer; border-radius: 4px; left: 30px; top: 2px; background: url(https://www.shadertoy.com/img/play.png);">3741 chars<div class="uiButton" title="Go full screen (+)" ,="" true)"="" style="margin: 0px; padding: 0px; width: 22px; height: 22px; position: absolute; cursor: pointer; border-radius: 4px; right: 120px; top: 1px; background: url(https://www.shadertoy.com/img/fullscreen.png);">+<+/->)" style="margin: 0px; padding: 0px; width: 22px; height: 22px; position: absolute; cursor: pointer; border-radius: 4px; right: 72px; top: 4px;"> S M L XL