WebGL Textures & Vertices
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
Cropped Butterfly Fish and
Bonus Procedural Textures
The project list includes
a square mesh texture mapped with a photograph of a
Learn to display a
cropped portion of an image, with WebGL.
Render a mesh texture mapped with the tiled graphic of a
We'll demonstrate how to map a
repeating photograph of the lighthouse
with the WebGL method
We explain how to display animation and rotation
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 are computer generated graphics.
Procedural textures offer a lightweight alternative
to JPG, GIF, or PNG image files. Image files must download,
Procedural graphics don't need to download.
We'll demonstrate how to declare image colors,
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
native game apps and high performance software communicate
to the GPU through languages such as OpenGL,
OpenGL ES, or DirectX. With WebGL 1.0,
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.
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
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
The WebGL API specific features may look a
little peculiar. They resemble OpenGL ES features.
However WebGL API functions and properties represent
to interaction with the GPU for high speed graphics.
Text and diagrams represent vertex coordinates
(x, y, z).
Texel texture coordinates are represented
within square brackets
Indices are also represented within square brackets