Skip to content

Commit 2c0a73a

Browse files
DBC-WorksDBC-Works
committed
add: shaders
* Add shaders * Update documents
1 parent 9fc74c9 commit 2c0a73a

6 files changed

+279
-43
lines changed

‎README.md

+14-19
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,32 @@
1-
SoundVisualShaderBase
2-
======
1+
# SoundVisualShaderBase
32

43
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/).
54

6-
Requirements
7-
------
5+
## Requirements
86

97
SoundVisualShaderBase needs Processing 3.5 or later to run.
108

119
### libraries
1210

13-
SoundVisualShaderBase is also using following libaries:
11+
SoundVisualShaderBase is also using following libraries:
1412

1513
- [Minim](http://code.compartmental.net/minim/)
1614
- [Spout for Processing](https://github.com/leadedge/SpoutProcessing/wiki)
1715

18-
Install thiese [libraries](https://processing.org/reference/libraries/) using PDE.
16+
Install these [libraries](https://processing.org/reference/libraries/) using PDE.
1917

20-
Usage
21-
-----
18+
## Usage
2219

2320
1. Open project directory.
2421
2. Create or edit fragment shader file(s) if you want.
25-
1. Edit `setting.json` in `data` directory to define playback audio files and fragment shader usage informations.
26-
* Refer to `setting-schema.json` for schema definition.
27-
* Refer to file header comment of fragment shader file for kind and options(bundled files only).
28-
3. Edit the beginning of the `setup` function in `SoundVisualShaderBase.pde` to define the dimension of the display window.
29-
4. Run.
30-
5. Operate if you want.
22+
3. Edit `setting.json` in `data` directory to define playback audio files and fragment shader usage information.
23+
- Refer to `setting-schema.json` for schema definition.
24+
- Refer to file header comment of fragment shader file for kind and options(bundled files only).
25+
4. Edit the beginning of the `setup` function in `SoundVisualShaderBase.pde` to define the dimension of the display window.
26+
5. Run.
27+
6. Operate if you want.
3128

32-
Operation
33-
------
29+
## Operation
3430

3531
### Key
3632

@@ -41,7 +37,6 @@ Operation
4137

4238
Some fragment shaders reflect the mouse position in the drawing.
4339

44-
License
45-
------
40+
## License
4641

47-
MIT
42+
MIT

‎data/filter-volume-color-saturation-mapper.frag

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
/*
2+
* name: Volume to color saturation mapper
3+
* type: filter
4+
*/
5+
uniform sampler2D texture;
6+
uniform ivec2 resolution;
7+
8+
uniform vec3 soundLevel;
9+
10+
vec3 rgb2hsv(vec3 c) {
11+
// [The Book of Shaders by Patricio Gonzalez Vivo & Jen Lowe](https://thebookofshaders.com/06/)
12+
vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0);
13+
vec4 p = mix(vec4(c.bg, K.wz), vec4(c.gb, K.xy), step(c.b, c.g));
14+
vec4 q = mix(vec4(p.xyw, c.r), vec4(c.r, p.yzx), step(p.x, c.r));
15+
16+
float d = q.x - min(q.w, q.y);
17+
float e = 1.0e-10;
18+
return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), d / (q.x + e), q.x);
19+
}
20+
21+
vec3 hsb2rgb(float h, float s, float v) {
22+
/*
23+
vec4 t = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
24+
vec3 p = abs(fract(vec3(h) + t.xyz) * 6.0 - vec3(t.w));
25+
return v * mix(vec3(t.x), clamp(p - vec3(t.x), 0.0, 1.0), s);
26+
*/
27+
// [[汎用関数]HSV2RGB 関数](https://qiita.com/keim_at_si/items/c2d1afd6443f3040e900)
28+
return ((clamp(abs(fract(h + vec3(0, 2, 1) / 3.) * 6. - 3.) - 1., 0., 1.) - 1.) * s + 1.) * v;
29+
}
30+
31+
void main() {
32+
vec4 color = texture(texture, gl_FragCoord.xy / resolution);
33+
vec3 hsb = rgb2hsv(color.rgb);
34+
gl_FragColor = vec4(hsb2rgb(hsb.x, hsb.y * soundLevel.z, hsb.z), 1);
35+
}

‎data/shader-study-202001.frag

+74
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
/*
2+
* name: ray marching study 201910
3+
* type: shader
4+
* references:
5+
* - [GLSL SandBoxで手軽にレイマーチングで遊ぼう](https://hackerslab.aktsk.jp/2018/12/01/131928)
6+
* - [魔法使いになりたい人のためのシェーダーライブコーディング入門](https://qiita.com/kaneta1992/items/21149c78159bd27e0860)
7+
* - [Phantom Mode](https://www.shadertoy.com/view/MtScWW)
8+
* - [Live Coding Using Phantom Mode](https://www.shadertoy.com/view/wl2GWG)
9+
* - [distance functions](https://iquilezles.org/www/articles/distfunctions/distfunctions.htm)
10+
*/
11+
12+
uniform ivec2 resolution;
13+
uniform float time;
14+
uniform float progress;
15+
uniform vec3 soundLevel;
16+
17+
uniform float kick;
18+
19+
const float PI = acos(-1);
20+
const float TWO_PI = PI * 2;
21+
22+
vec3 hsb2rgb(float h, float s, float b) {
23+
// [[汎用関数]HSV2RGB 関数](https://qiita.com/keim_at_si/items/c2d1afd6443f3040e900)
24+
return ((clamp(abs(fract(h + vec3(0, 2, 1) / 3.) * 6. - 3.) - 1., 0., 1.) - 1.) * s + 1.) * b;
25+
}
26+
27+
28+
float sdHexPrism( vec3 p, vec2 h )
29+
{
30+
const vec3 k = vec3(-0.8660254, 0.5, 0.57735);
31+
p = abs(p);
32+
p.xy -= 2.0*min(dot(k.xy, p.xy), 0.0)*k.xy;
33+
vec2 d = vec2(
34+
length(p.xy-vec2(clamp(p.x,-k.z*h.x,k.z*h.x), h.x))*sign(p.y-h.x),
35+
p.z-h.y );
36+
return min(max(d.x,d.y),0.0) + length(max(d,0.0));
37+
}
38+
39+
float sdTriPrism( vec3 p, vec2 h ) {
40+
vec3 q = abs(p);
41+
return max(q.z-h.y,max(q.x*0.866025+p.y*0.5,-p.y)-h.x*0.5);
42+
}
43+
44+
vec3 repeat(vec3 p, float interval) {
45+
return mod(p, interval) - 2.0 * progress;
46+
}
47+
48+
float dist(vec3 p) {
49+
vec3 pos = repeat(p - 2.0 * progress, 4.0);
50+
return sdHexPrism(pos, vec2(0.5, 2.0 * progress));
51+
}
52+
53+
void main() {
54+
vec2 uv = (gl_FragCoord.xy * 2.0 - resolution.xy) / min(resolution.x, resolution.y);
55+
56+
vec3 cameraUp = normalize(vec3(-sin(progress * progress * 5 * TWO_PI), cos(progress * progress * 5 * TWO_PI), 0.0));
57+
vec3 cameraDir = vec3(0.0, 0.0, 2.0 * progress);
58+
vec3 cameraSide = normalize(cross(cameraUp, cameraDir));
59+
vec3 rayDir = normalize((uv.x * cameraSide + uv.y * cameraUp) + cameraDir);
60+
61+
float t = 0.01;
62+
float ac = 0.0;
63+
for (int i = 0; i < 48; ++i) {
64+
float d = dist(rayDir * t);
65+
d = max(abs(d), 0.02);
66+
ac += exp(-d * 3.0);
67+
t += d * 0.5;
68+
}
69+
70+
float h = soundLevel.x * ac * 0.2;
71+
float s = ac * 0.02 * soundLevel.y;
72+
float b = ac * 0.02;
73+
gl_FragColor = vec4(hsb2rgb(h, s, b), 1.0);
74+
}

‎data/template-shader-ray-marching.frag

+123
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
/*
2+
* name: ray marching template
3+
* type: shader
4+
* references:
5+
* - [GLSL SandBoxで手軽にレイマーチングで遊ぼう](https://hackerslab.aktsk.jp/2018/12/01/131928)
6+
*/
7+
8+
//
9+
// Uniform variables
10+
//
11+
12+
uniform ivec2 resolution;
13+
14+
//
15+
// Constants
16+
//
17+
18+
const float PI = acos(-1);
19+
const float TWO_PI = PI * 2;
20+
const float DELTA = 0.001;
21+
22+
//
23+
// Types
24+
//
25+
26+
struct Camera {
27+
vec3 position;
28+
vec3 up;
29+
vec3 direction;
30+
vec3 side;
31+
};
32+
33+
struct Ray {
34+
vec3 position;
35+
vec3 direction;
36+
};
37+
38+
struct Light {
39+
vec3 direction;
40+
vec3 color;
41+
};
42+
43+
//
44+
// Functions
45+
//
46+
47+
float sdSphere(vec3 pos, float r, vec3 rayPos) {
48+
return length(rayPos - pos) - r;
49+
}
50+
51+
float calcDistance(vec3 rayPos) {
52+
const vec3 pos = vec3(0.0, 0.0, 3.0);
53+
const float r = 1.0;
54+
return sdSphere(pos, r, rayPos);
55+
}
56+
57+
vec3 calcNormalVector(vec3 rayPos) {
58+
float d = calcDistance(rayPos);
59+
return normalize(
60+
vec3(
61+
calcDistance(rayPos - vec3(DELTA, 0.0, 0.0)) - d,
62+
calcDistance(rayPos - vec3(0.0, DELTA, 0.0)) - d,
63+
calcDistance(rayPos - vec3(0.0, 0.0, DELTA)) - d
64+
)
65+
);
66+
}
67+
68+
vec3 calcLuminanceIntensity(
69+
vec3 normalVector,
70+
vec3 pointLightPos,
71+
vec3 pointLightColor
72+
) {
73+
return dot(normalVector, pointLightPos) * pointLightColor;
74+
}
75+
76+
void main() {
77+
vec2 uv = (gl_FragCoord.xy * 2.0 - resolution.xy) / max(resolution.x, resolution.y);
78+
79+
// Set camera
80+
Camera camera;
81+
camera.position = vec3(0.0, 0.0, -4.0);
82+
camera.up = normalize(vec3(0.0, 1.0, 0.0));
83+
camera.direction = normalize(vec3(0.0, 0.0, 1.0));
84+
camera.side = normalize(cross(camera.up, camera.direction));
85+
86+
// Initialize ray
87+
Ray ray;
88+
ray.position = camera.position;
89+
ray.direction = normalize((uv.x * camera.side) + (uv.y * camera.up) + camera.direction);
90+
91+
// Calc distance between camera and target
92+
float t = 0.0;
93+
const int MAX_STEP = 64;
94+
int step = 0;
95+
while (++step <= MAX_STEP) {
96+
float d = calcDistance(ray.position);
97+
if (d < DELTA) {
98+
break;
99+
}
100+
t += d;
101+
ray.position = camera.position + t * ray.direction;
102+
}
103+
if (MAX_STEP < step) {
104+
gl_FragColor = vec4(0);
105+
return;
106+
}
107+
108+
// Calc normal vector
109+
vec3 normalVector = calcNormalVector(ray.position);
110+
111+
// Calc color
112+
Light surfaceLight;
113+
surfaceLight.direction = normalize(vec3(1.0, -1.0, 1.0));
114+
surfaceLight.color = vec3(1.0, 1.0, 1.0);
115+
vec3 luminanceIntensity = calcLuminanceIntensity(
116+
normalVector,
117+
surfaceLight.direction,
118+
surfaceLight.color
119+
);
120+
121+
// Render
122+
gl_FragColor = vec4(luminanceIntensity, 1.0);
123+
}

‎doc/CHANGELOG.md

+20-10
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,27 @@
1-
Changelog
2-
======
1+
# Changelog
32

43
All notable changes to this project will be documented in this file.
54

65
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
76
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
87

9-
[Unreleased]
10-
------
8+
## [Unreleased]
119

12-
[0.1.1] - 2019-08-11
13-
------
10+
## [0.1.2] - 2020-01-14
11+
12+
### Added
13+
14+
- New shader
15+
- `filter-volume-color-saturation-mapper.frag`
16+
- `shader-study-202001.frag`
17+
- `template-shader-ray-marching.frag`
18+
19+
### Updated
20+
21+
- README.md - Correct spells
22+
- ./doc/Examples.md - Add works
23+
24+
## [0.1.1] - 2019-08-11
1425

1526
### Added
1627

@@ -23,13 +34,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
2334
- Add `img` directory to `.gitignore`
2435
- Correct uniform var name in `shader-ray-marching-study-01.frag`
2536

26-
[0.1.0] - 2019-07-28
27-
------
37+
## [0.1.0] - 2019-07-28
2838

2939
### Added
3040

3141
- Initial projet files.
3242

33-
[Unreleased]: https://github.com/DBC-Works/SoundVisualShaderBase/compare/v0.1.1...HEAD
43+
[unreleased]: https://github.com/DBC-Works/SoundVisualShaderBase/compare/v0.1.1...HEAD
3444
[0.1.1]: https://github.com/DBC-Works/SoundVisualShaderBase/releases/tag/v0.1.1
35-
[0.1.0]: https://github.com/DBC-Works/SoundVisualShaderBase/releases/tag/v0.1.0
45+
[0.1.0]: https://github.com/DBC-Works/SoundVisualShaderBase/releases/tag/v0.1.0

‎doc/Examples.md

+13-14
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,23 @@
1-
Examples
2-
======
1+
# Examples
32

4-
[shader-study-201910.frag](../data/shader-study-201910.frag)
5-
------
3+
## [shader-study-202001.frag](../data/shader-study-202001.frag)
64

7-
[![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)
5+
[![泡立つ月、浮かぶ路(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)
86

9-
[shader-study-201909.frag](../data/shader-study-201909.frag)
10-
------
7+
## [shader-study-201910.frag](../data/shader-study-201910.frag)
118

12-
[![星屑降る地より(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)
9+
[![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)
10+
11+
## [shader-study-201909.frag](../data/shader-study-201909.frag)
12+
13+
[![星屑降る地より(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)
1314

1415
(with other source)
1516

16-
[shader-study-20190804.frag](../data/shader-study-20190804.frag)
17-
------
17+
## [shader-study-20190804.frag](../data/shader-study-20190804.frag)
1818

19-
[![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)
19+
[![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)
2020

21-
[shader-ray-marching-study-01.frag](../data/shader-ray-marching-study-01.frag)
22-
------
21+
## [shader-ray-marching-study-01.frag](../data/shader-ray-marching-study-01.frag)
2322

24-
[![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)
23+
[![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)

0 commit comments

Comments
 (0)