Skip to content

Commit 0772ff6

Browse files
NOPR9D ☄️NOPROD
NOPR9D ☄️
and
NOPROD
authored
🎨 : fluid shadows (#2)
* 🎨 : fluid shadows * :doc: : add doc * 🎨 : cleaner * 🎨 : cleaner Co-authored-by: NOPR9D <contact@boucham-amine.fr>
1 parent 3dc0d43 commit 0772ff6

18 files changed

+452
-44
lines changed

‎.gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22

33
# compiled output
44
/dist
5+
/**/dist
6+
/**/**/dist
57
/tmp
68
/out-tsc
79
# Only exists if Bazel was run

‎README.md

+11
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,13 @@
11
# animations
2+
23
Animations used by all mylabz.xyz's websites
4+
5+
---
6+
7+
### **Fluid Shadows**
8+
9+
**Folder** : threejs/backgrounds/fluid-shadows
10+
11+
![Fluid Shadows](threejs/backgrounds/fluid-shadows/fluid-shadows.gif)
12+
13+
---

‎package-lock.json

+104
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
"three": "^0.141.0"
2222
},
2323
"devDependencies": {
24+
"raw-loader": "^4.0.2",
2425
"ts-loader": "^9.3.0",
2526
"typescript": "^4.7.4",
2627
"webpack": "^5.73.0",

‎threejs/backgrounds/fluid-shadows/fluid-shadows.gif

8.33 MB
Loading

‎threejs/backgrounds/fluid-shadows/fluid-shadows.ts

+102
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
import * as THREE from 'three';
2+
import { FluidShadowsOptions } from '.';
3+
import { hexToVec3 } from '../../utils';
4+
//@ts-ignore
5+
import fragment from './fragment.glsl';
6+
//@ts-ignore
7+
import vertex from './vertex.glsl';
8+
9+
export class FluidShadows {
10+
private scene!: THREE.Scene;
11+
private camera!: THREE.PerspectiveCamera;
12+
private geometry!: THREE.PlaneBufferGeometry | THREE.BoxGeometry;
13+
private light!: THREE.SpotLight;
14+
private material!: any;
15+
private mesh!: THREE.Mesh;
16+
private renderer!: THREE.WebGLRenderer;
17+
private clock!: THREE.Clock;
18+
19+
private options = {
20+
backgroundColor: '0xffffff',
21+
shadowColor: '0xffffff',
22+
shadowIteration: 5,
23+
shadowSpectrum: 0.0,
24+
speed: 0.1
25+
};
26+
constructor(options?: FluidShadowsOptions) {
27+
if (options) {
28+
this.options = { ...this.options, ...options };
29+
}
30+
}
31+
32+
public init(canvas: HTMLCanvasElement) {
33+
this.scene = new THREE.Scene();
34+
this.scene.background = new THREE.Color(this.options.backgroundColor);
35+
this.light = new THREE.SpotLight(this.options.backgroundColor, 1);
36+
37+
const fov = 45;
38+
const aspect = window.innerWidth / window.innerHeight;
39+
const near = 1;
40+
const far = 100;
41+
this.camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
42+
this.geometry = new THREE.PlaneBufferGeometry(30, 10);
43+
this.material = new THREE.ShaderMaterial({
44+
vertexShader: vertex,
45+
fragmentShader: fragment,
46+
uniforms: {
47+
uTime: { value: 0.0 },
48+
uResolution: { value: { x: window.innerWidth, y: window.innerHeight } },
49+
uColor: { value: hexToVec3(this.options.shadowColor) },
50+
uMaxIter: { value: this.options.shadowIteration },
51+
uSpectrum: { value: this.options.shadowSpectrum },
52+
uSpeed: { value: this.options.speed }
53+
}
54+
});
55+
this.mesh = new THREE.Mesh(this.geometry, this.material);
56+
this.renderer = new THREE.WebGLRenderer({
57+
canvas: canvas
58+
});
59+
this.renderer.setClearColor(this.options.backgroundColor, 1);
60+
this.renderer.setPixelRatio(window.devicePixelRatio);
61+
this.renderer.setSize(window.innerWidth, window.innerHeight);
62+
63+
this.scene.add(this.camera);
64+
this.scene.add(this.mesh);
65+
this.scene.add(this.light);
66+
this.mesh.position.set(0, 0, 0);
67+
this.camera.position.set(0, 0, 10);
68+
this.light.position.set(0, 0, 10);
69+
70+
this.light.lookAt(this.mesh.position);
71+
this.camera.lookAt(this.mesh.position);
72+
73+
this.clock = new THREE.Clock();
74+
75+
this.addEvents();
76+
}
77+
78+
public run() {
79+
window.requestAnimationFrame(this.run.bind(this));
80+
this.material.uniforms.uTime.value = this.clock.getElapsedTime();
81+
this.renderer.render(this.scene, this.camera);
82+
}
83+
84+
public setOptions(options?: FluidShadowsOptions) {
85+
if (options) {
86+
this.options = { ...this.options, ...options };
87+
}
88+
}
89+
90+
private addEvents(): void {
91+
window.addEventListener('resize', this.onResize.bind(this), false);
92+
}
93+
94+
private onResize() {
95+
this.material.uniforms.uResolution = {
96+
value: { x: window.innerWidth, y: window.innerHeight }
97+
};
98+
this.camera.aspect = window.innerWidth / window.innerHeight;
99+
this.camera.updateProjectionMatrix();
100+
this.renderer.setSize(window.innerWidth, window.innerHeight);
101+
}
102+
}

‎threejs/backgrounds/fluid-shadows/fragment.glsl

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
#ifdef GL_ES
2+
precision highp float;
3+
#endif
4+
5+
#define PI2 6.28318530718
6+
7+
uniform float uTime;
8+
uniform int uMaxIter;
9+
uniform vec2 uResolution;
10+
uniform vec3 uColor;
11+
uniform float uSpectrum;
12+
uniform float uSpeed;
13+
14+
void mainImage(out vec4 fragColor, in vec2 fragCoord) {
15+
float uTime = uTime * uSpeed;
16+
vec2 uv = fragCoord.xy / uResolution.xy;
17+
18+
vec2 p = mod(uv * PI2, PI2) - 100.0;
19+
vec2 i = vec2(p);
20+
float c = 0.5;
21+
float inten = .0094;
22+
23+
for(int n = 0; n < uMaxIter; n++) {
24+
float t = uTime * (1.5 - (2.2 / float(n + 122)));
25+
i = p + vec2(cos(t - i.x) + sin(t + i.y), sin(t - i.y) + cos(t + i.x));
26+
c += 1.0 / length(vec2(p.x / (sin(i.x + t) / inten + uSpectrum), p.y / (cos(i.y + t) / inten)));
27+
}
28+
29+
c /= float(uMaxIter);
30+
c = 1.10 - pow(c, 1.26);
31+
vec3 colour = vec3(0.098 + pow(abs(c), 0.2), 0.098 + pow(abs(c), 0.2), .098 + pow(abs(c), 0.2));
32+
33+
fragColor = vec4(colour, 1.3);
34+
}
35+
36+
void main(void) {
37+
mainImage(gl_FragColor, gl_FragCoord.xy);
38+
}

‎threejs/backgrounds/fluid-shadows/index.html

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Getting Started</title>
6+
7+
</head>
8+
<body style="margin: 0px; padding: 0px;">
9+
10+
<div id="viewport" style="width: 100vw; height: 100vh;"></div>
11+
<script src="./dist/bundle.js"></script>
12+
<script src="http://localhost:4200/livereload.js"></script>
13+
<script>
14+
</script>
15+
</body>
16+
</html>

‎threejs/backgrounds/fluid-shadows/index.ts

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
export * from './fluid-shadows';
2+
3+
export interface FluidShadowsOptions {
4+
backgroundColor?: string;
5+
shadowColor?: string;
6+
shadowIteration?: number;
7+
shadowSpectrum?: number;
8+
speed?: number;
9+
}

‎threejs/backgrounds/fluid-shadows/vertex.glsl

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
precision mediump float;
2+
varying vec2 vUv;
3+
4+
void main() {
5+
vUv = uv;
6+
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
7+
}

‎threejs/backgrounds/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './fluid-shadows'

0 commit comments

Comments
 (0)