whole task is to create animated spline wave using shaders
-
Clone this source and put it somewhere online (for instance .github.io/some.html), make it working.
-
change createMyCustomGeometry, which is easy to manipulate for spline functions: It must be rectangular face with properties:
- have N-width segments.
- Have only one height segment;
x
increases from0,0
to1.0
y
could be-1.0
or1.0
- must have UV coordinates;
- Geometry must be instance of
THREE.Geometry
for
N == 3
we will have set of vertices =[(0,1), (0.5, 1), (1.0, 1), (0, -1), (0.5, -1), (1.0, -1)];
-
Create array of positions that forming some kind of time-based waving. Create array of matrices, according to this positions and pass it to shader program as uniform value
-
Draw spline on current canvas, using your shader and geometry, your have created. It must be looking simular to image below. Feel free to play with width, period and amplitude of a wave.
-
Put texture on it and make texture slowly moving along your spline width.
That's it. Final image - slowly moving wave with slowly moving texture on it surface.