WebGL Textures & Vertices

Beginner's Guide

Page Two

WebGL Enables Online 3D Media

WebGL enables rapid display of 2D and 3D animated and interactive graphics on the Web. Games, animation, scientific simulation, interactive presentations, and other graphic intensive Web pages can run faster with WebGL.

As of fall 2014 every major operating system supports WebGL including Windows PCs with Internet Explorer 11, Macintosh OS X Yosemite, Android with Chrome and Firefox browsers, iPhone 6, and Windows Phone.

We believe WebGL represents the future of online 3D media and games. We're preparing our readers for the next wave of Web media with a series of short focused tutorials. Tutorials include working examples, diagrams, graphics, and instruction.

Series: Online 3D Media with WebGL

WebGL Textures & Vertices: Beginner's Guide represents the first in the series titled Online 3D Media with WebGL. This book covers the most material focusing on initialization of buffers and individual textures. Subsequent books in the series discuss new features such as mipmaps, texture atlases, animated textures, and shader effects. Most of the books build on the foundation detailed with this book.

This Book's Project List

Lighthouse Texture Map and Tiled Butterfly Fish

Lighthouse Texture Map
Tiled Butterfly Fish

Cropped Butterfly Fish and Repeating Lighthouse

Cropped Fish
Cropped Butterfly Fish
Repeating Lighthouse
Repeating Lighthouse

Animated Rotationand Bonus Procedural Textures

Rotated Fish
Animated Rotation
Procedural Textures
Bonus Procedural Textures!

The project list includes a square mesh texture mapped with a photograph of a lighthouse. Learn to display a cropped portion of an image, with WebGL. Render a mesh texture mapped with the tiled graphic of a Butterfly fish. We'll demonstrate how to map a repeating photograph of the lighthouse with the WebGL method texParameteri(). We explain how to display animation and rotation with the animated Butterfly fish.

Bonus Project: Procedural Textures

WebGL Textures & Vertices: Beginner's Guide includes the full source code and tutorial for generating and using procedural textures. Procedural textures are computer generated graphics. Procedural textures offer a lightweight alternative to JPG, GIF, or PNG image files. Image files must download, however JavaScript alone creates color data for use as a texture. Procedural graphics don't need to download. We'll demonstrate how to declare image colors, then apply the image to a WebGL mesh with JavaScript.

WebGL Overview

WebGL accesses the Graphics Processing Unit (GPU) to provide rapid hardware rendering. GPUs are composed of electronic circuitry designed specifically to display graphics quickly. In other words GPUs display animation, 2D, and 3D graphics to a computer or mobile device's screen, many times faster than software.

3D media demands a high level of processing resources. In the past Web browsers lacked the framework to access the GPU. However, WebGL now provides that framework. WebGL opens new opportunities for 3D media online.

OpenGL ES 2.0

Most native game apps and high performance software communicate to the GPU through languages such as OpenGL, OpenGL ES, or DirectX. With WebGL 1.0, JavaScript communicates to the GPU through a dialect of OpenGL ES 2.0. However, some browsers translate OpenGL ES calls to DirectX. Either way, regardless of the mobile device or desktop computer, WebGL enabled browsers can render high speed graphics with access to the GPU.

This short book demonstrates how to harness the power of the GPU with JavaScript WebGL methods, WebGL properties, and OpenGL ES 2.0 shaders.

Shader Overview

OpenGL ES 2.0 uses shaders to rapidly process vertices and pixel fragments for display to the screen. Each WebGL application requires one vertex and one fragment shader.

WebGL shaders are written with the OpenGL ES Shader Language (GLSL). GLSL is based on C programming syntax. You don't need to understand C programming for this book. We'll explain the shaders line by line.


Section titles which start with WebGL API, refer to WebGL specific functions and properties. To find WebGL features, look in the table of contents for entries starting with WebGL API. The WebGL API specific features may look a little peculiar. They resemble OpenGL ES features. However WebGL API functions and properties represent the key to interaction with the GPU for high speed graphics.

Text and diagrams represent vertex coordinates within parenthesis (x, y, z). Texel texture coordinates are represented within square brackets [s, t]. Indices are also represented within square brackets [index].

WebGL Beginner's Guide Introduction WebGL Beginner's Guide Page Three
Copyright © 2015 Seven Thunder Software. All Rights Reserved.