WebGL Shrinking Octagon

Tap the Play Button

Your browser doesn't support canvas.

WebGL shaders fill an octagon with a cloud texture. The vertex shader determines color location. The fragment shader prepares color for display.

The animated octagon vertex shader processes circle coordinates from the current vertex coordinates. The Animated Spotlight fragment shader processes circle coordinates from the current texture coordinates. Compare the difference in granularity between the two shaders. The fragment shader processes more often with more detail.

Seven Simple Shaders

See Seven Simple Shader examples. The link includes a few more WebGL shaders, for good measure. Enjoy free WebGL tutorials.

Shader projects include Fade Colors, WebGL Cube Color Animation, WebGL Shader Color Filters, Animated Radiating Colors, Lighthouse: WebGL Zoom In Shader, WebGL Multiply Geometric Shapes, and Spotlight on a Texture

Example projects work with WebGL enabled Web browsers including Windows PCs Internet Explorer 11, iPhone 6, Windows Phone operating system 8.1, current Androids with Chrome and Firefox browsers.

Copyright © 2015 Seven Thunder Software. All Rights Reserved.