WebGL Textures & Vertices

Beginner's Guide

Page One

Introduction

Textures and Vertices Images

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 reuse 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 Beginner's Guide Introduction WebGL Beginner's Guide
Copyright © 2015 Seven Thunder Software. All Rights Reserved.