Examples Gallery
This is a collection of examples extracted from the chapters of this book together with shared shaders kindly donated by other readers using the on-line editor. Feel free to explore and tweak them bit by bit. Once you have something you are proud of, click the "Export" and then copy the "URL to code...". Send it to @bookofshaders or @kyndinfo. We are looking forward to see it!
MotionToolKit
kynd Sep 9, 2016
Designing motion in a fragment shader is not straight forward and can be a bit tedious since it is not an animation tool after all. Here are some convenient tools and examples for controlling easing and timing, drawing shapes, and combining all these to create a nice sequence of motion. The first five examples introduce many useful functions that you can use as building blocks for your design. Following examples demonstrate how you can combine these tool to design complex animations.
Exercises:
-
Can you draw different waves using different easing functions, then animate circles following the waves?
-
Animate two circles. Can you express difference between different materials through motion? How a metal ball and a plastic ball behave differently?
-
Design your character (an animal, monster, spaceship, etc.) by combining shapes and animate it.
-
Speed up or down your character animation. Can you make it five times faster or slower than the original?
-
Add a new scene to the "wipes" example. How can you make it easy so that you don't have to adjust the timing of all subsequent parts manually?
- The examples here are not necessarily optimized, especially the last one. Try reducing the number of calculation as much as possible. Many functions are running even when the elements they draw are not on-screen. How can you avoid this?