Skip to content

ShemTovYosef/webgl-test-task

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Test task

whole task is to create animated spline wave using shaders

  1. Clone this source and put it somewhere online (for instance .github.io/some.html), make it working.

  2. 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 from 0,0 to 1.0
    • y could be -1.0 or 1.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)];

  3. 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

  4. Implement multipoint spline in shader: Spline Formula

  5. 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. Wave image

  6. 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.

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 99.5%
  • HTML 0.5%