-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathFuild_Rewrite.html
223 lines (174 loc) · 6.61 KB
/
Fuild_Rewrite.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fuild_Rewrite</title>
</head>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: black;
}
</style>
<body>
</body>
<div id="canvas"></div>
<script type="importmap">
{
"imports": {
"three": "./three.module.js",
"three/addons/": "./jsm/"
}
}
</script>
<script type="module">
import * as THREE from "three";
import Renderer from "./fuild/modules_rewrite/Renderer.js";
import Simulation from "./fuild/modules_rewrite/Simulation.js";
import Mouse from "./fuild/modules_rewrite/Mouse.js";
import { calcSizeFitCamPerspective } from './utils/calcSizeFitCamPerspective.js'
Renderer.init();
Mouse.init();
let matCheck
const scene = new THREE.Scene();
const scene2 = new THREE.Scene();
const light = new THREE.AmbientLight(0x404040); // soft white light
scene.add(light);
const directionalLight = new THREE.DirectionalLight(0xffffff, 2.5);
scene.add(directionalLight);
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = .5
const [widthFit, heightFit] = calcSizeFitCamPerspective(camera)
const simulation = new Simulation({
options: {
iterations_poisson: 1.1,
iterations_viscous: 1,
mouse_force: .1,
resolution: 0.2,
cursor_size: 20,
viscous: 30,
isBounce: false,
dt: 0.042,
isViscous: false,
BFECC: false
}
});
const textureImg = new THREE.TextureLoader().load('textures/cat.jpg');
const vertexShader = `
precision highp float;
uniform float time;
uniform sampler2D fuildMap;
uniform vec2 sizeView;
varying vec2 vUv;
varying vec3 vPos;
void main() {
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
vUv = uv;
}
`;
const fragmentShader = `
varying vec3 vPos;
varying vec2 vUv;
uniform sampler2D fuildMap;
uniform sampler2D fuildPress;
uniform sampler2D fuildForce;
vec3 pal( in float t, in vec3 a, in vec3 b, in vec3 c, in vec3 d )
{
return a + b*cos( 6.28318*(c*t+d) );
}
void main() {
vec3 shape = texture2D(fuildForce, vUv).xyz;
vec3 velOri = texture2D(fuildMap, vUv).xyz;
vec2 vel = texture2D(fuildMap, vUv).xy;
vec3 press = texture2D(fuildPress, vUv).xyz;
float len = length(vel*720.);
float cccc = length(vUv);
// Sử dụng hàm pal() để tạo màu sắc dựa trên vận tốc
vec3 color = pal(len * 10.0, vec3(0.5,0.5,0.5), vec3(0.5,0.5,0.5), vec3(1.0,1.0,0.5), vec3(0.8,0.90,0.30));
vec3 colorsample = pal(len * 5.0, vec3(0.5,0.5,0.5), vec3(0.5,0.5,0.5), vec3(1.0,1.0,0.5), vec3(0.8,0.90,0.30));
// color = vec3(len)*10.;
// Thêm hiệu ứng phát sáng
//color += vec3(len * 0.05);
// Áp dụng độ mờ dựa trên vận tốc
float alpha = smoothstep(0.0, 0.9, len * .77 );
vec3 fc = mix(vec3(0.),color * 20.,alpha);
// Tính độ sáng của pixel
float luminance = dot(fc, vec3(0.299, 0.587, 0.114));
// Ngưỡng để quyết định xem pixel có sáng hay không
float threshold = 0.1;
float destinyHOLD = 5.;
if (luminance > threshold) {
fc *= 0.0001; // giảm cường độ của màu (làm tối)
// fc = vec3(0.8,0.90,0.30) / destinyHOLD;
}
gl_FragColor = vec4(1.-fc * destinyHOLD,.1);
// gl_FragColor = vec4(colorsample,1.);
float lele = length(velOri.xy);
// gl_FragColor = vec4(vec3(lele) * 500.,1.);
// gl_FragColor = vec4(shape * 1000.,1.);
}
`
const pointMat = new THREE.ShaderMaterial({
vertexShader: vertexShader,
fragmentShader: fragmentShader,
transparent:true,
uniforms: {
time: {
value: 0
},
fuildMap: {
value: simulation.fbos.vel_0.texture
},
fuildPress: {
value: simulation.fbos.pressure_0.texture
},
fuildForce:{
value: simulation.externalForce.props.output.texture
},
sizeView: {
value: new THREE.Vector2(widthFit, heightFit)
}
}
});
let meshView = new THREE.Mesh(new THREE.PlaneGeometry(widthFit, heightFit), pointMat);
const vertexShader22 = `
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
`;
const fragmentShader22 = `
uniform sampler2D uTex;
varying vec2 vUv;
void main() {
vec4 color = texture2D(uTex, vUv);
gl_FragColor = vec4(color.xyz,1.);
}
`;
matCheck = new THREE.ShaderMaterial({
uniforms:{
uTex:{value:simulation.fbos.vel_0.texture}
},
vertexShader: vertexShader22,
fragmentShader: fragmentShader22,
transparent:true,
})
let meshView2 = new THREE.Mesh(new THREE.PlaneGeometry(.5, .5), matCheck);
scene.add(meshView)
scene2.add(meshView2)
Renderer.renderer.setAnimationLoop(animate);
function animate() {
Mouse.update();
Renderer.update();
simulation.update()
// if(matCheck) matCheck.uniforms.uTex.value = simulation.fbos.vel_0.textures[0]
Renderer.renderer.setRenderTarget(null);
Renderer.renderer.render(scene, camera);
pointMat.uniforms.time.value = Renderer.time
}
</script>
</html>