Awesome

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 😏)

Check it out!

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

• 98.js: a recreation of the Windows 98 desktop

• NW Screensaver: a platform for running web pages as screensavers

Unaffiliated

• Screensaver Subterfuge: a game set in the 3D maze screensaver

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 i in 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