웹프로그램밍 자료실/기타 자료
[해피CGI][cgimall] Neuro Noise (GLSL Shader)
해피CGI윤실장
2024. 10. 25. 09:15
신경 흐름을 나타내는 백그라운드 효과 입니다.
마우스 커서에 의해 흐름에 외곡을 줄 수 있습니다.
HTML, CSS, JS를 사용하였습니다.
자세한 내용은 데모사이트 주소에서 확인하실 수 있습니다.
HTML
<div class="content">
<div class="section">
<div>
Neural Noise
</div>
</div>
<div class="section">
<div>
</div>
</div>
<div class="section">
<div>
</div>
</div>
</div>
<canvas id="neuro"></canvas>
<script type="x-shader/x-fragment" id="vertShader">
precision mediump float;
varying vec2 vUv;
attribute vec2 a_position;
void main() {
vUv = .5 * (a_position + 1.);
gl_Position = vec4(a_position, 0.0, 1.0);
}
</script>
<script type="x-shader/x-fragment" id="fragShader">
precision mediump float;
varying vec2 vUv;
uniform float u_time;
uniform float u_ratio;
uniform vec2 u_pointer_position;
uniform float u_scroll_progress;
vec2 rotate(vec2 uv, float th) {
return mat2(cos(th), sin(th), -sin(th), cos(th)) * uv;
}
float neuro_shape(vec2 uv, float t, float p) {
vec2 sine_acc = vec2(0.);
vec2 res = vec2(0.);
float scale = 8.;
for (int j = 0; j < 15; j++) {
uv = rotate(uv, 1.);
sine_acc = rotate(sine_acc, 1.);
vec2 layer = uv * scale + float(j) + sine_acc - t;
sine_acc += sin(layer);
res += (.5 + .5 * cos(layer)) / scale;
scale *= (1.2 - .07 * p);
}
return res.x + res.y;
}
void main() {
vec2 uv = .5 * vUv;
uv.x *= u_ratio;
vec2 pointer = vUv - u_pointer_position;
pointer.x *= u_ratio;
float p = clamp(length(pointer), 0., 1.);
p = .5 * pow(1. - p, 2.);
float t = .001 * u_time;
vec3 color = vec3(0.);
float noise = neuro_shape(uv, t, p);
noise = 1.2 * pow(noise, 3.);
noise += pow(noise, 10.);
noise = max(.0, noise - .5);
noise *= (1. - length(vUv - .5));
color = normalize(vec3(.2, .5 + .4 * cos(3. * u_scroll_progress), .5 + .5 * sin(3. * u_scroll_progress)));
color = color * noise;
gl_FragColor = vec4(color, noise);
}
</script>
CSS
body, html {
margin: 0;
padding: 0;
background-color: #151912;
overflow-x: hidden;
}
.content {
width: 100vw;
font-family: 'Times New Roman', serif;
}
.section {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
color: #FFF6F7;
text-align: center;
}
.section > div {
width: 90%;
}
.section:nth-child(1) {
font-size: 20vh;
}
.section:nth-child(2) {
font-size: 10vh;
}
.section:nth-child(3) {
font-size: 8vh;
}
.section:nth-child(2) > div {
max-width: 800px
}
.section:nth-child(3) > div {
max-width: 900px
}
.section:nth-child(3) a {
padding: 0 .3em;
}
canvas#neuro {
position: fixed;
top: 0;
left: 0;
width: 100%;
pointer-events: none;
opacity: .95;
}
a {
display: inline-block;
text-decoration: none;
color: inherit;
font-weight: inherit;
font-style: inherit;
}
a:hover {
font-weight: inherit;
text-decoration: none;
color: rgb(160, 160, 255);
}
a:active {
color: rgb(160, 255, 255);
}
body, html {
margin: 0;
padding: 0;
background-color: #151912;
}
.content {
width: 100vw;
font-family: 'Times New Roman', serif;
}
.section {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
color: #FFF6F7;
text-align: center;
}
.section > div {
width: 90%;
}
.section:nth-child(1) {
font-size: 20vh;
}
.section:nth-child(2) {
font-size: 10vh;
}
.section:nth-child(3) {
font-size: 8vh;
}
.section:nth-child(2) > div {
max-width: 800px
}
.section:nth-child(3) > div {
max-width: 900px
}
.section:nth-child(3) a {
padding: 0 .3em;
}
canvas#neuro {
position: fixed;
top: 0;
left: 0;
width: 100%;
pointer-events: none;
opacity: .95;
}
a {
display: inline-block;
text-decoration: none;
color: inherit;
font-weight: inherit;
font-style: inherit;
}
a:hover {
font-weight: inherit;
text-decoration: none;
color: rgb(160, 160, 255);
}
a:active {
color: rgb(160, 255, 255);
}
