Pipes
A web-based remake of the Windows 3D Pipes screensaver (3D Pipes.scr or sspipes.scr) using Three.js
Includes both Utah Teapots and candy cane easter eggs! (with increased chances
It's also included in 98.js.org as a program you can run.
(This screen capture GIF is outdated. It now avoids collisions between pipes and implements the dissolve effect for fading out.)
TODO
-
Add back smooth fade out as an option, now that a dissolve effect is implemented
-
Add control for speed
-
Animate sections into existence, emulating CPU graphics where the triangles were drawn progressively and the screen updated in between "frames" (optionally)
-
Improve lighting (the original was less shiny), or at least avoid unflattering camera angles
-
Use a palette (what palette? please help with this)
-
Extra camera functions like continuous rotation, maybe even following the pipes like a rollercoaster
-
Allow moving camera during dissolve transition (it's kinda unpleasant how it stops you (abruptly), and the effect is implemented as an overlay anyways)
-
Save options to local storage, or maybe in the URL
-
Custom textures with drag and drop (and also a file input) (can accept multiple textures, for it to choose from randomly (pulling from a bag and not replacing them))
-
Proper elbow joints (currently uses a sphere (smaller than the ball joint so it doesn't stick out) rather than a section of a torus); could use spline extrusion rather than trying to align a torus section every which way (if it actually helps)
-
Implement different behavioral characteristics between pipes
-
Follow-the-leader mode
-
Update README GIF
-
An API maybe?
See Also
Mine / Affiliated
Unaffiliated
License
MIT-licensed; see LICENSE for details
Development
Live Server
You just need an HTTP server, but Live Server is a great option, automatically reloading when you make changes.
Prettier
Prettier is used for code formatting.
To set up, including a pre-commit hook:
- Install Node.js if you don't already have it
- Run
npm iin the project directory
A pre-commit hook can be surprising tho; formatting on save might be better...
Reference Material
The source code for the original OpenGL screensavers can be found in a version of the Windows SDK (for Windows NT 4.0), in MSTOOLS\SAMPLES\OPENGL\SCRSAVE
(If you have a later version of the code, please let me know.)
Project Structure
All the good stuff is in screensaver.js
