WebGL Shrinking Octagon

Tap the Play Button

Tap the Canvas!

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.

WebGL shaders, WebGL shader, WebGL examples, Web GL, HTML5, 3D Web, OpenGL ES, gpu, shader programming, shader tutorial, 3D graphics, opengl shading language, vertex shader, webgl shader language, vertex shader tutorial, javascript, html5, learn webgl, webgl samples, html5 canvas tutorial,
Learn 3D Programming Learn 3D Programming
Copyright © 2015 Seven Thunder Software. All Rights Reserved.