Ebook: WebGL Textures & Vertices: Beginner's Guide

Seven Thunder Software, 2015. — 259 p. — (Online 3D Media with WebGL. Book 1). — ASIN: B0107LUQDM.

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() and drawElements().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 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. JavaScript examples for WebGL Textures & Vertices: Beginner's Guide use an object oriented design with prototype "classes".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 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.WebGL Textures & Vertices: Beginner's Guide provides examples and explanation covering the following WebGL methods: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.