diff --git a/community/seascape-shader/README.md b/community/seascape-shader/README.md new file mode 100644 index 0000000..e752dd1 --- /dev/null +++ b/community/seascape-shader/README.md @@ -0,0 +1,124 @@ +# Shadertoy to Pixel shader conversion + +This will show you an example how you can take an example from [shadertoy.com](shadertoy.com) and use it with the Pixel Shader support. + +["Seascape" by Alexander Alekseev aka TDM - 2014](https://www.shadertoy.com/view/Ms2SD1) is a nice one. It's very impressive and doesn't use textures so that simplifies things for us. Let's try that one. + +Looking at the seascape.glsl example you can see **iResolution**, **iTime** and **iMouse** in there. + +These are commonly needed to be exposed because these things are coming from outside and needs to be updated. Any other variable you need to have changed/updated from code can be exposed like those. + +## Exposing variables + +How to expose variables like this? + +Well, first we need to figure out what type of variables they are. Looking at the shader, you can see **iResolution.x** in there. This tells you that it's not a simple type. In this case it's a **vec2***, a **Vector containing 2 values, x and y**. This makes sense since resolution is described by x and y. That is, width and height. + +And thus, we create our variable in Go with like so: +``` +uResolution := mgl32.Vec2{float32(win.Bounds().W()), float32(win.Bounds().H())} +``` +That is, to be of the type **mgl32.Vec2**. Here we create it by taking the window's width and height. + +**iTime** is just a float, and thus that is just created like so: +``` +var uTime float32 +``` + +For the **iMouse**, it's a **mgl32.Vec4**, a **Vector containing 4 variables**. We only use x and y for the mouse position here though. +``` +var uMouse mgl32.Vec4 +``` + +And finally, to make our variables available in the shader itself we use: +``` +canvas.SetUniform(name string, value interface{}) +``` + +We create a handy function to do this: + +``` go +func EasyBindUniforms(c *pixelgl.Canvas, unifs ...interface{}) { + if len(unifs)%2 != 0 { + panic("needs to be divisable by 2") + } + for i := 0; i < len(unifs); i += 2 { + + c.SetUniform(unifs[i+0].(string), unifs[i+1]) + } +} +``` +and we call that function like so: + +``` go + EasyBindUniforms(canvas, + "uResolution", &uResolution, + "uTime", &uTime, + "uMouse", &uMouse, + ) +``` + +## Updating shader source file + +We also need to do some updates to the shader file itself to match these variables. First thing would be to add the variables we exposed in Go. + +``` +uniform vec2 uResolution; +uniform float uTime; +uniform vec4 uMouse; +``` +Then we just rename the variables to match. + +We also need to rename the main function itself, as the one used here is specific for use with shadertoy. For our shader, the entrypoint is main(). So we rename: +``` +void mainImage( out vec4 fragColor, in vec2 fragCoord ) +``` +to +``` +void main() { +``` + + +Also, rename: +``` +fragCoord +``` +to +``` +gl_FragCoord +``` +because this is available globaly in the OpenGL space for the shader. + +We also need to add: +``` +out vec4 fragColor; +``` + +to expose that. + +Lastly, we need to add: +``` +#version 330 core +``` +at the top to tell what version we require. + + +## Using shader +To use the shader in our canvas we do: +``` +canvas.SetFragmentShader(fragSource string) +``` +where fragSource is the fragment shader, not a path fo a file. + +# + +## Result converting shadertoy shader to use with Pixel + +Here is a diff of the changes: + +![code changes](shader_diffs.png "Code changes") + + +And that is it. Running the program we should see this: + +![seascape animation](seascape.gif "Seascape animation") diff --git a/community/seascape-shader/psutil.go b/community/seascape-shader/psutil.go new file mode 100644 index 0000000..2fb370e --- /dev/null +++ b/community/seascape-shader/psutil.go @@ -0,0 +1,54 @@ +package main + +import ( + "io/ioutil" + + "github.com/faiface/pixel" + "github.com/faiface/pixel/pixelgl" +) + +// Pixel Shader utility functions + +// EasyBindUniforms does all the work for you, just pass in a +// valid array adhering to format: String, Variable, ... +// +// example: +// +// var uTimeVar float32 +// var uMouseVar mgl32.Vec4 +// +// EasyBindUniforms(win.GetCanvas(), +// "u_time", &uTimeVar, +// "u_mouse", &uMouseVar, +// ) +// +func EasyBindUniforms(c *pixelgl.Canvas, unifs ...interface{}) { + if len(unifs)%2 != 0 { + panic("needs to be divisable by 2") + } + for i := 0; i < len(unifs); i += 2 { + + c.SetUniform(unifs[i+0].(string), unifs[i+1]) + } +} + +// CenterWindow will... center the window +func CenterWindow(win *pixelgl.Window) { + x, y := pixelgl.PrimaryMonitor().Size() + width, height := win.Bounds().Size().XY() + win.SetPos( + pixel.V( + x/2-width/2, + y/2-height/2, + ), + ) +} + +// LoadFileToString loads the contents of a file into a string +func LoadFileToString(filename string) (string, error) { + b, err := ioutil.ReadFile(filename) + if err != nil { + return "", err + } + return string(b), nil +} diff --git a/community/seascape-shader/seascape.gif b/community/seascape-shader/seascape.gif new file mode 100644 index 0000000..d8f7c2a Binary files /dev/null and b/community/seascape-shader/seascape.gif differ diff --git a/community/seascape-shader/seascape.go b/community/seascape-shader/seascape.go new file mode 100644 index 0000000..6737aa6 --- /dev/null +++ b/community/seascape-shader/seascape.go @@ -0,0 +1,73 @@ +package main + +import ( + "time" + + "github.com/go-gl/mathgl/mgl32" + + "github.com/faiface/pixel" + "github.com/faiface/pixel/pixelgl" + "golang.org/x/image/colornames" +) + +func run() { + // Set up window configs + cfg := pixelgl.WindowConfig{ // Default: 1024 x 768 + Title: "Golang Seascape from Shadertoy", + Bounds: pixel.R(0, 0, 1024, 768), + VSync: true, + } + + win, err := pixelgl.NewWindow(cfg) + if err != nil { + panic(err) + } + + camVector := win.Bounds().Center() + + bounds := win.Bounds() + bounds.Max = bounds.Max.ScaledXY(pixel.V(1.0, 1.0)) + + // I am putting all shader example initializing stuff here for + // easier reference to those learning to use this functionality + fragSource, err := LoadFileToString("shaders/seascape.glsl") + if err != nil { + panic(err) + } + + var uMouse mgl32.Vec4 + var uTime float32 + + canvas := win.Canvas() + uResolution := mgl32.Vec2{float32(win.Bounds().W()), float32(win.Bounds().H())} + + EasyBindUniforms(canvas, + "uResolution", &uResolution, + "uTime", &uTime, + "uMouse", &uMouse, + ) + + canvas.SetFragmentShader(fragSource) + + start := time.Now() + + // Game Loop + for !win.Closed() { + uTime = float32(time.Since(start).Seconds()) + mpos := win.MousePosition() + uMouse[0] = float32(mpos.X) + uMouse[1] = float32(mpos.Y) + + win.Clear(colornames.Black) + + // Drawing to the screen + canvas.Draw(win, pixel.IM.Moved(camVector)) + + win.Update() + } + +} + +func main() { + pixelgl.Run(run) +} diff --git a/community/seascape-shader/shader_diffs.png b/community/seascape-shader/shader_diffs.png new file mode 100644 index 0000000..efdd553 Binary files /dev/null and b/community/seascape-shader/shader_diffs.png differ diff --git a/community/seascape-shader/shaders/seascape.glsl b/community/seascape-shader/shaders/seascape.glsl new file mode 100644 index 0000000..1b0ff2a --- /dev/null +++ b/community/seascape-shader/shaders/seascape.glsl @@ -0,0 +1,193 @@ +/* + * "Seascape" by Alexander Alekseev aka TDM - 2014 + * License Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License. + * Contact: tdmaav@gmail.com + */ + +#version 330 core + +uniform vec2 uResolution; +uniform float uTime; +uniform vec4 uMouse; + +out vec4 fragColor; + +const int NUM_STEPS = 8; +const float PI = 3.141592; +const float EPSILON = 1e-3; +#define EPSILON_NRM (0.1 / uResolution.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); +#define SEA_TIME (1.0 + uTime * SEA_SPEED) +const 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) / (PI * 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); + return vec3(pow(1.0-e.y,2.0), 1.0-e.y, 0.6+(1.0-e.y)*0.4); +} + +// 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 = clamp(1.0 - dot(n,-eye), 0.0, 1.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 main() +{ + vec2 uv = gl_FragCoord.xy / uResolution.xy; + uv = uv * 2.0 - 1.0; + uv.x *= uResolution.x / uResolution.y; + float time = uTime * 0.3 + uMouse.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); +} diff --git a/community/seascape-shader/shaders/seascape_original.glsl b/community/seascape-shader/shaders/seascape_original.glsl new file mode 100644 index 0000000..b70f887 --- /dev/null +++ b/community/seascape-shader/shaders/seascape_original.glsl @@ -0,0 +1,184 @@ +/* + * "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.141592; +const float EPSILON = 1e-3; +#define 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); +#define SEA_TIME (1.0 + iTime * SEA_SPEED) +const 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) / (PI * 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); + return vec3(pow(1.0-e.y,2.0), 1.0-e.y, 0.6+(1.0-e.y)*0.4); +} + +// 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 = clamp(1.0 - dot(n,-eye), 0.0, 1.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 = iTime * 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); +} \ No newline at end of file