Table Of ContentCopyright
Copyright (C) 2015 A. Butler. All rights reserved.
You may modify, copy, and use, the code under certain conditions. Please see the full
copyright for details.
WebGL Textures & Vertices
Beginner’s Guide
Introduction
"WebGL Textures & Vertices: Beginner’s Guide" provides an introduction to WebGL
for JavaScript designers and developers. We explain fundamental concepts of WebGL.
The book covers how to declare a simple square mesh. We demonstrate mapping the mesh
with textures from a JPG image file. We cover cropping, tiling, and repeating textures.
The book’s examples animate a rotating textured square. We briefly discuss animation
with 4 x 4 matrices and the window’s requestAnimationFrame() method. We include an
overview of perspective projection, which provides a sense of depth. The animation
section includes how to use WebGL API methods
uniformMatrix4fv(WebGLUniformLocation, boolean, Float32Array) and
drawElements(Number, Number, type, Number).
The book builds a foundation for future projects with element array buffers and two
simple shaders. The examples demonstrate how to re use data for efficient processing with
indices. "WebGL Textures & Vertices" represents the first book in the series titled
"Online 3D Media with WebGL". Future projects in the series use the foundation built
here. However, this book stands alone. We cover a long list of WebGL methods, provide
an introduction to shaders, and basic WebGL development.
For readers unfamiliar with shaders, we explain two shaders line by line. The shader
section covers storage qualifiers attribute, uniform, and varying. The vertex shader
discusses vec2, vec4 and mat4 types. The fragment shader explains how to use
sampler2D with the built in function texture2D(). We explain how to compile and link
shaders for use with a WebGL program.
We assume the reader understands basic HTML markup and JavaScript. The book
includes full source code listings, thorough comments, illustrations and diagrams, to
clarify each topic. You may download the source code with image files. Downloads
include thoroughly commented source code, non commented source code for lightweight
Web page display, an example Web page template, as well as graphics used with every
project.
We don’t rely on external libraries, but focus on WebGL itself. Once you understand
WebGL, you can use external libraries with confidence, write your own, or develop
lightweight independent WebGL media.
"WebGL Textures & Vertices: Beginner’s Guide" provides examples and explanation
covering the following WebGL methods. The list of WebGL methods includes
createProgram(), attachShader(), linkProgram(), useProgram(), createShader(),
shaderSource(), compileShader(), getShaderParameter(), getShaderInfoLog(),
getUniformLocation(), uniformMatrix4fv(), getAttribLocation(),
enableVertexAttribArray(), viewport(), createBuffer(), bindBuffer(),
bufferData(), vertexAttribPointer(), uniformi(), createTexture(),
activeTexture(), bindTexture(), pixelStorei(), texImage2D() , validateProgram(),
getProgramParameter(), getProgramInfoLog(), deleteProgram(), and
drawElements(). "WebGL Textures & Vertices: Beginner’s Guide" offers helpful
information toward a great start with WebGL.
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 Butterfly Fish Repeating Lighthouse
"Animated Rotation"and "Bonus Procedural Textures"
Animated Rotation 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.
