From 2c0a73af0c31af10f5605252dbf950de448b493f Mon Sep 17 00:00:00 2001 From: DBC-Works Date: Tue, 14 Jan 2020 22:08:07 +0900 Subject: [PATCH] add: shaders * Add shaders * Update documents --- README.md | 33 ++--- ...filter-volume-color-saturation-mapper.frag | 35 +++++ data/shader-study-202001.frag | 74 +++++++++++ data/template-shader-ray-marching.frag | 123 ++++++++++++++++++ doc/CHANGELOG.md | 30 +++-- doc/Examples.md | 27 ++-- 6 files changed, 279 insertions(+), 43 deletions(-) create mode 100644 data/filter-volume-color-saturation-mapper.frag create mode 100644 data/shader-study-202001.frag create mode 100644 data/template-shader-ray-marching.frag diff --git a/README.md b/README.md index 3224ab8..2d51850 100644 --- a/README.md +++ b/README.md @@ -1,36 +1,32 @@ -SoundVisualShaderBase -====== +# SoundVisualShaderBase SoundVisualShaderBase is a [GLSL fragment shader](https://www.khronos.org/opengl/wiki/Fragment_Shader) host program made by [Processing 3.5 or later](https://processing.org/). -Requirements ------- +## Requirements SoundVisualShaderBase needs Processing 3.5 or later to run. ### libraries -SoundVisualShaderBase is also using following libaries: +SoundVisualShaderBase is also using following libraries: - [Minim](http://code.compartmental.net/minim/) - [Spout for Processing](https://github.com/leadedge/SpoutProcessing/wiki) -Install thiese [libraries](https://processing.org/reference/libraries/) using PDE. +Install these [libraries](https://processing.org/reference/libraries/) using PDE. -Usage ------ +## Usage 1. Open project directory. 2. Create or edit fragment shader file(s) if you want. -1. Edit `setting.json` in `data` directory to define playback audio files and fragment shader usage informations. - * Refer to `setting-schema.json` for schema definition. - * Refer to file header comment of fragment shader file for kind and options(bundled files only). -3. Edit the beginning of the `setup` function in `SoundVisualShaderBase.pde` to define the dimension of the display window. -4. Run. -5. Operate if you want. +3. Edit `setting.json` in `data` directory to define playback audio files and fragment shader usage information. + - Refer to `setting-schema.json` for schema definition. + - Refer to file header comment of fragment shader file for kind and options(bundled files only). +4. Edit the beginning of the `setup` function in `SoundVisualShaderBase.pde` to define the dimension of the display window. +5. Run. +6. Operate if you want. -Operation ------- +## Operation ### Key @@ -41,7 +37,6 @@ Operation Some fragment shaders reflect the mouse position in the drawing. -License ------- +## License -MIT \ No newline at end of file +MIT diff --git a/data/filter-volume-color-saturation-mapper.frag b/data/filter-volume-color-saturation-mapper.frag new file mode 100644 index 0000000..03cf98e --- /dev/null +++ b/data/filter-volume-color-saturation-mapper.frag @@ -0,0 +1,35 @@ +/* + * name: Volume to color saturation mapper + * type: filter + */ +uniform sampler2D texture; +uniform ivec2 resolution; + +uniform vec3 soundLevel; + +vec3 rgb2hsv(vec3 c) { + // [The Book of Shaders by Patricio Gonzalez Vivo & Jen Lowe](https://thebookofshaders.com/06/) + vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0); + vec4 p = mix(vec4(c.bg, K.wz), vec4(c.gb, K.xy), step(c.b, c.g)); + vec4 q = mix(vec4(p.xyw, c.r), vec4(c.r, p.yzx), step(p.x, c.r)); + + float d = q.x - min(q.w, q.y); + float e = 1.0e-10; + return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), d / (q.x + e), q.x); +} + +vec3 hsb2rgb(float h, float s, float v) { + /* + vec4 t = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0); + vec3 p = abs(fract(vec3(h) + t.xyz) * 6.0 - vec3(t.w)); + return v * mix(vec3(t.x), clamp(p - vec3(t.x), 0.0, 1.0), s); + */ + // [[汎用関数]HSV2RGB 関数](https://qiita.com/keim_at_si/items/c2d1afd6443f3040e900) + return ((clamp(abs(fract(h + vec3(0, 2, 1) / 3.) * 6. - 3.) - 1., 0., 1.) - 1.) * s + 1.) * v; +} + +void main() { + vec4 color = texture(texture, gl_FragCoord.xy / resolution); + vec3 hsb = rgb2hsv(color.rgb); + gl_FragColor = vec4(hsb2rgb(hsb.x, hsb.y * soundLevel.z, hsb.z), 1); +} \ No newline at end of file diff --git a/data/shader-study-202001.frag b/data/shader-study-202001.frag new file mode 100644 index 0000000..84eb3da --- /dev/null +++ b/data/shader-study-202001.frag @@ -0,0 +1,74 @@ +/* + * name: ray marching study 201910 + * type: shader + * references: + * - [GLSL SandBoxで手軽にレイマーチングで遊ぼう](https://hackerslab.aktsk.jp/2018/12/01/131928) + * - [魔法使いになりたい人のためのシェーダーライブコーディング入門](https://qiita.com/kaneta1992/items/21149c78159bd27e0860) + * - [Phantom Mode](https://www.shadertoy.com/view/MtScWW) + * - [Live Coding Using Phantom Mode](https://www.shadertoy.com/view/wl2GWG) + * - [distance functions](https://iquilezles.org/www/articles/distfunctions/distfunctions.htm) + */ + +uniform ivec2 resolution; +uniform float time; +uniform float progress; +uniform vec3 soundLevel; + +uniform float kick; + +const float PI = acos(-1); +const float TWO_PI = PI * 2; + +vec3 hsb2rgb(float h, float s, float b) { + // [[汎用関数]HSV2RGB 関数](https://qiita.com/keim_at_si/items/c2d1afd6443f3040e900) + return ((clamp(abs(fract(h + vec3(0, 2, 1) / 3.) * 6. - 3.) - 1., 0., 1.) - 1.) * s + 1.) * b; +} + + +float sdHexPrism( vec3 p, vec2 h ) +{ + const vec3 k = vec3(-0.8660254, 0.5, 0.57735); + p = abs(p); + p.xy -= 2.0*min(dot(k.xy, p.xy), 0.0)*k.xy; + vec2 d = vec2( + length(p.xy-vec2(clamp(p.x,-k.z*h.x,k.z*h.x), h.x))*sign(p.y-h.x), + p.z-h.y ); + return min(max(d.x,d.y),0.0) + length(max(d,0.0)); +} + +float sdTriPrism( vec3 p, vec2 h ) { + vec3 q = abs(p); + return max(q.z-h.y,max(q.x*0.866025+p.y*0.5,-p.y)-h.x*0.5); +} + +vec3 repeat(vec3 p, float interval) { + return mod(p, interval) - 2.0 * progress; +} + +float dist(vec3 p) { + vec3 pos = repeat(p - 2.0 * progress, 4.0); + return sdHexPrism(pos, vec2(0.5, 2.0 * progress)); +} + +void main() { + vec2 uv = (gl_FragCoord.xy * 2.0 - resolution.xy) / min(resolution.x, resolution.y); + + vec3 cameraUp = normalize(vec3(-sin(progress * progress * 5 * TWO_PI), cos(progress * progress * 5 * TWO_PI), 0.0)); + vec3 cameraDir = vec3(0.0, 0.0, 2.0 * progress); + vec3 cameraSide = normalize(cross(cameraUp, cameraDir)); + vec3 rayDir = normalize((uv.x * cameraSide + uv.y * cameraUp) + cameraDir); + + float t = 0.01; + float ac = 0.0; + for (int i = 0; i < 48; ++i) { + float d = dist(rayDir * t); + d = max(abs(d), 0.02); + ac += exp(-d * 3.0); + t += d * 0.5; + } + + float h = soundLevel.x * ac * 0.2; + float s = ac * 0.02 * soundLevel.y; + float b = ac * 0.02; + gl_FragColor = vec4(hsb2rgb(h, s, b), 1.0); +} \ No newline at end of file diff --git a/data/template-shader-ray-marching.frag b/data/template-shader-ray-marching.frag new file mode 100644 index 0000000..de8d3f7 --- /dev/null +++ b/data/template-shader-ray-marching.frag @@ -0,0 +1,123 @@ +/* + * name: ray marching template + * type: shader + * references: + * - [GLSL SandBoxで手軽にレイマーチングで遊ぼう](https://hackerslab.aktsk.jp/2018/12/01/131928) + */ + +// +// Uniform variables +// + +uniform ivec2 resolution; + +// +// Constants +// + +const float PI = acos(-1); +const float TWO_PI = PI * 2; +const float DELTA = 0.001; + +// +// Types +// + +struct Camera { + vec3 position; + vec3 up; + vec3 direction; + vec3 side; +}; + +struct Ray { + vec3 position; + vec3 direction; +}; + +struct Light { + vec3 direction; + vec3 color; +}; + +// +// Functions +// + +float sdSphere(vec3 pos, float r, vec3 rayPos) { + return length(rayPos - pos) - r; +} + +float calcDistance(vec3 rayPos) { + const vec3 pos = vec3(0.0, 0.0, 3.0); + const float r = 1.0; + return sdSphere(pos, r, rayPos); +} + +vec3 calcNormalVector(vec3 rayPos) { + float d = calcDistance(rayPos); + return normalize( + vec3( + calcDistance(rayPos - vec3(DELTA, 0.0, 0.0)) - d, + calcDistance(rayPos - vec3(0.0, DELTA, 0.0)) - d, + calcDistance(rayPos - vec3(0.0, 0.0, DELTA)) - d + ) + ); +} + +vec3 calcLuminanceIntensity( + vec3 normalVector, + vec3 pointLightPos, + vec3 pointLightColor +) { + return dot(normalVector, pointLightPos) * pointLightColor; +} + +void main() { + vec2 uv = (gl_FragCoord.xy * 2.0 - resolution.xy) / max(resolution.x, resolution.y); + + // Set camera + Camera camera; + camera.position = vec3(0.0, 0.0, -4.0); + camera.up = normalize(vec3(0.0, 1.0, 0.0)); + camera.direction = normalize(vec3(0.0, 0.0, 1.0)); + camera.side = normalize(cross(camera.up, camera.direction)); + + // Initialize ray + Ray ray; + ray.position = camera.position; + ray.direction = normalize((uv.x * camera.side) + (uv.y * camera.up) + camera.direction); + + // Calc distance between camera and target + float t = 0.0; + const int MAX_STEP = 64; + int step = 0; + while (++step <= MAX_STEP) { + float d = calcDistance(ray.position); + if (d < DELTA) { + break; + } + t += d; + ray.position = camera.position + t * ray.direction; + } + if (MAX_STEP < step) { + gl_FragColor = vec4(0); + return; + } + + // Calc normal vector + vec3 normalVector = calcNormalVector(ray.position); + + // Calc color + Light surfaceLight; + surfaceLight.direction = normalize(vec3(1.0, -1.0, 1.0)); + surfaceLight.color = vec3(1.0, 1.0, 1.0); + vec3 luminanceIntensity = calcLuminanceIntensity( + normalVector, + surfaceLight.direction, + surfaceLight.color + ); + + // Render + gl_FragColor = vec4(luminanceIntensity, 1.0); +} \ No newline at end of file diff --git a/doc/CHANGELOG.md b/doc/CHANGELOG.md index 3a3f436..55d8ae2 100644 --- a/doc/CHANGELOG.md +++ b/doc/CHANGELOG.md @@ -1,16 +1,27 @@ -Changelog -====== +# Changelog All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). -[Unreleased] ------- +## [Unreleased] -[0.1.1] - 2019-08-11 ------- +## [0.1.2] - 2020-01-14 + +### Added + +- New shader + - `filter-volume-color-saturation-mapper.frag` + - `shader-study-202001.frag` + - `template-shader-ray-marching.frag` + +### Updated + +- README.md - Correct spells +- ./doc/Examples.md - Add works + +## [0.1.1] - 2019-08-11 ### Added @@ -23,13 +34,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Add `img` directory to `.gitignore` - Correct uniform var name in `shader-ray-marching-study-01.frag` -[0.1.0] - 2019-07-28 ------- +## [0.1.0] - 2019-07-28 ### Added - Initial projet files. -[Unreleased]: https://github.com/DBC-Works/SoundVisualShaderBase/compare/v0.1.1...HEAD +[unreleased]: https://github.com/DBC-Works/SoundVisualShaderBase/compare/v0.1.1...HEAD [0.1.1]: https://github.com/DBC-Works/SoundVisualShaderBase/releases/tag/v0.1.1 -[0.1.0]: https://github.com/DBC-Works/SoundVisualShaderBase/releases/tag/v0.1.0 \ No newline at end of file +[0.1.0]: https://github.com/DBC-Works/SoundVisualShaderBase/releases/tag/v0.1.0 diff --git a/doc/Examples.md b/doc/Examples.md index 4dd54f7..b693d13 100644 --- a/doc/Examples.md +++ b/doc/Examples.md @@ -1,24 +1,23 @@ -Examples -====== +# Examples -[shader-study-201910.frag](../data/shader-study-201910.frag) ------- +## [shader-study-202001.frag](../data/shader-study-202001.frag) -[![With impatient heart by Sad Juno](https://i.ytimg.com/vi/ILZz3aaolQ0/sddefault.jpg "With impatient heart by Sad Juno")](https://www.youtube.com/ILZz3aaolQ0) +[![泡立つ月、浮かぶ路(feat. GUMI, VOCALOID Megpoid V4) by Sad Juno](https://i.ytimg.com/vi/VvSWr_wXQx4/sddefault.jpg "泡立つ月、浮かぶ路(feat. GUMI, VOCALOID Megpoid V4) by Sad Juno")](https://www.youtube.com/watch?v=VvSWr_wXQx4) -[shader-study-201909.frag](../data/shader-study-201909.frag) ------- +## [shader-study-201910.frag](../data/shader-study-201910.frag) -[![星屑降る地より(feat. GUMI, VOCALOID Megpoid V4) by Sad Juno](https://i.ytimg.com/vi/JOH3b3gxxdA/sddefault.jpg "星屑降る地より(feat. GUMI, VOCALOID Megpoid V4) by Sad Juno")](https://www.youtube.com/JOH3b3gxxdA) +[![With impatient heart by Sad Juno](https://i.ytimg.com/vi/ILZz3aaolQ0/sddefault.jpg "With impatient heart by Sad Juno")](https://www.youtube.com/watch?v=ILZz3aaolQ0) + +## [shader-study-201909.frag](../data/shader-study-201909.frag) + +[![星屑降る地より(feat. GUMI, VOCALOID Megpoid V4) by Sad Juno](https://i.ytimg.com/vi/JOH3b3gxxdA/sddefault.jpg "星屑降る地より(feat. GUMI, VOCALOID Megpoid V4) by Sad Juno")](https://www.youtube.com/watch?v=JOH3b3gxxdA) (with other source) -[shader-study-20190804.frag](../data/shader-study-20190804.frag) ------- +## [shader-study-20190804.frag](../data/shader-study-20190804.frag) -[![Small bird in the rain(Processing + GLSL sound visualization study)](https://i.ytimg.com/vi/qMwQ23na1Ek/sddefault.jpg "Small bird in the rain(Processing + GLSL sound visualization study)")](https://www.youtube.com/qMwQ23na1Ek) +[![Small bird in the rain(Processing + GLSL sound visualization study)](https://i.ytimg.com/vi/qMwQ23na1Ek/sddefault.jpg "Small bird in the rain(Processing + GLSL sound visualization study)")](https://www.youtube.com/watch?v=qMwQ23na1Ek) -[shader-ray-marching-study-01.frag](../data/shader-ray-marching-study-01.frag) ------- +## [shader-ray-marching-study-01.frag](../data/shader-ray-marching-study-01.frag) -[![Running on the fence(Processing + GLSL sound visualization study)](https://i.ytimg.com/vi/8bA4d6-tRKE/sddefault.jpg "Running on the fence(Processing + GLSL sound visualization study)")](https://www.youtube.com/8bA4d6-tRKE) +[![Running on the fence(Processing + GLSL sound visualization study)](https://i.ytimg.com/vi/8bA4d6-tRKE/sddefault.jpg "Running on the fence(Processing + GLSL sound visualization study)")](https://www.youtube.com/watch?v=8bA4d6-tRKE)