-
Notifications
You must be signed in to change notification settings - Fork 14
Expand file tree
/
Copy pathindex.html
More file actions
151 lines (137 loc) · 5.79 KB
/
Copy pathindex.html
File metadata and controls
151 lines (137 loc) · 5.79 KB
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
<!--
ThreeJS Water - A Real-Time Water Simulation with Three.js
https://github.com/jeantimex/threejs-water
Original WebGL Water Demo: http://madebyevan.com/webgl-water/
Copyright 2011 Evan Wallace
Released under the MIT license
=============================================================================
Three.js Port by Yong Su (jeantimex)
https://github.com/jeantimex
=============================================================================
ABOUT THIS PROJECT:
This project is a complete port of Evan Wallace's legendary WebGL Water demo
to Three.js. The original demo showcased groundbreaking real-time water
rendering techniques including raytraced reflections, refractions, and caustics.
This Three.js port preserves all the original visual fidelity while leveraging
the Three.js framework for better maintainability, extensibility, and
compatibility with modern web development workflows.
NEW FEATURES ADDED BY JEANTIMEX:
1. Multiple Interactive Objects
- Sphere, Cube, Torus Knot (Three.js geometry), and Duck (GLTF model)
- Each object properly displaces water and casts caustic shadows
- Objects support physics simulation with buoyancy and gravity
2. Customizable Pool Shapes
- Standard box pool (original)
- Rounded box pool with configurable corner radius
- Adjustable pool dimensions (width, height, length)
3. Three.js Geometry Support
- Native Three.js geometries (TorusKnotGeometry, BoxGeometry, SphereGeometry)
- Compound sphere approximation for complex shape water displacement
4. GLTF Model Support
- Load and render external 3D models (Duck.gltf)
- Custom shader materials with caustic lighting integration
5. Enhanced GUI Controls (lil-gui)
- Object selection and physics toggles
- Pool shape and dimension controls
- Density/buoyancy adjustments
6. Responsive Design
- Mobile-friendly collapsible info panel
- Adaptive canvas sizing
7. Modern Build System
- Vite for fast development and optimized builds
- TypeScript for type safety
- GLSL shader imports via vite-plugin-glsl
TECHNICAL ARCHITECTURE:
- Water.ts: Ping-pong buffer wave simulation using the discrete wave equation
- Renderer.ts: Multi-pass rendering pipeline (caustics, reflections, refractions)
- Shaders: GLSL vertex/fragment shaders for water surface, pool walls, caustics
- Physics: Simple buoyancy and gravity simulation for floating objects
RENDERING PIPELINE:
1. Update wave simulation (heightmap)
2. Compute surface normals from height derivatives
3. Render object shadow/reflection/refraction textures
4. Generate caustics texture via differential area method
5. Render pool walls with triplanar texture mapping
6. Render water surface with Fresnel-based reflection/refraction blending
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>ThreeJS Water</title>
</head>
<body>
<div id="help" class="collapsed">
<h1>ThreeJS Water</h1>
<p>
Original author:
<a href="http://madebyevan.com/" target="_blank" rel="noopener noreferrer">Evan Wallace</a>
</p>
<p>
Ported to Three.js by
<a href="https://github.com/jeantimex" target="_blank" rel="noopener noreferrer">jeantimex</a>
</p>
<p>
<svg
height="16"
viewBox="0 0 16 16"
width="16"
style="fill: currentColor; vertical-align: text-bottom; margin-right: 4px"
>
<path
fill-rule="evenodd"
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.58-.18-3.24-.79-3.24-3.5 0-.77.28-1.4.73-1.89-.07-.19-.32-1.1.07-2.27 0 0 .59-.19 1.95.73.57-.16 1.18-.24 1.8-.24.62 0 1.23.08 1.8.24 1.36-.92 1.95-.73 1.95-.73.39 1.17.14 2.08.07 2.27.45.49.73 1.11.73 1.89 0 2.72-1.67 3.32-3.24 3.5.26.22.48.65.48 1.32 0 .96-.01 1.73-.01 1.97 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"
></path>
</svg>
<a
href="https://github.com/jeantimex/threejs-water"
target="_blank"
rel="noopener noreferrer"
>jeantimex/threejs-water</a>
</p>
<h2>Interactions:</h2>
<ul>
<li>Draw on the water to make ripples</li>
<li>Drag the background to rotate the camera</li>
<li>Press SPACEBAR to pause and unpause</li>
<li>Drag the selected object to move it around</li>
<li>Press the L key to set the light direction</li>
<li>Press the G key to toggle gravity</li>
</ul>
<h2>Features:</h2>
<ul>
<li>Raytraced reflections and refractions</li>
<li>Analytic ambient occlusion</li>
<li>Heightfield water simulation</li>
<li>Soft shadows</li>
<li>
Real-time
<a
href="https://medium.com/@evanwallace/rendering-realtime-caustics-in-webgl-2a99a29a0b2c"
target="_blank"
rel="noopener noreferrer"
>Caustics</a>
</li>
<li>Customizable pool shapes with rounded corners</li>
<li>Three.js geometry and GLTF model support</li>
</ul>
<p>
<small>
Tile texture from
<a
href="http://www.flickr.com/photos/zooboing/3682834083/"
target="_blank"
rel="noopener noreferrer"
>zooboing</a>
on Flickr
</small>
</p>
</div>
<div id="help-toggle" class="material-icons">menu</div>
<div id="app"></div>
<div id="loading">Loading...</div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>