WebGL Textures and Vertices eBook Screen Shots

What Is WebGL?

Basic Purpose and Features of WebGL

Introduction Advantages Features OpenGL ES Vertices Vertex Shader Fragment Shader Summary

Introduction

This short tutorial describes the basic purpose and features of WebGL. This article gives an overview of WebGL, vertices, and shaders. This lesson includes 2D and 3D Cartesian coordinate graphs and two sample shaders which work together. This tutorial explains how points on a graph relate to vertices which run through the shaders.

Advantages

WebGL provides the ability to display 2D and 3D graphics on the Web. Games, animation, scientific visualization, interactive presentations, and other graphic intensive Web pages can run quickly with WebGL.

WebGL accesses device hardware to speed rendering. Many other graphical Web features use software rendering for display. Properly implemented hardware rendering runs many times faster than software rendering.

In the recent past Web browsers only displayed graphical applications with software rendering. Therefore rendering was limited to two dimensions. Three dimensional content required too much processing power. Now with WebGL, developers can prepare a wide range of three dimensional content for display on the Web.

We believe WebGL is the future of online 3D models and games. Current Windows PCs, Macintosh computers, Androids, iPhones, Windows Phones, and some Blackberry devices, run WebGL. As of fall 2014 Apple iPhones and iPads with iOS 8 or higher, and proper hardware, began displaying online WebGL content.

That's big news for Web developers and designers. Now all major mobile devices and operating systems have the ability to display WebGL 3D games and media online. WebGL appears ready to change the Web significantly. Seven Thunder Software periodically releases free WebGL tutorials to help you prepare for the next wave of Web technology. Seven Thunder Software also offers a set of WebGL E-Books.

Features of WebGL

Developers and designers who understand JavaScript have a head start with WebGL. WebGL functionality begins with JavaScript. However WebGL also includes a number of new features including shaders, and methods which resemble OpenGL ES. WebGL hooks into hardware with OpenGL ES functionality and shaders. Shaders run directly within the device hardware's Graphics Processing Unit (GPU). However OpenGL ES offers a very different approach to programming compared to JavaScript. Often OpenGL ES functionality involves setting states and uploading data.

Each WebGL program uses one vertex shader and one fragment shader at a time. Shaders are written in C yet include a number of unique built in functions.

OpenGL ES

OpenGL ES stands for Open Graphics Library for Embedded Systems. OpenGL ES is an application programming interface (API) for hardware accelerated rendering on devices with limited processing power.

The WebGLRenderingContext includes a set of methods which resemble OpenGL ES methods. To access WebGL methods, obtain a reference to a WebGLRenderingContext from a canvas declared on an HTML Web page. The follow listing usually assigns a WebGLRenderingContext to the variable glContext. Variable canvas refers to an HTML5 canvas.

glContext = canvas.getContext(
'webgl'
); 

WebGLRenderingContext

The WebGLRenderingContext includes methods such as activeTexture(), bindAttribLocation(), and attachShader(). Method attachShader() attaches vertex and fragment shaders to a WebGL program. Once attached, drawing operations pass every specified vertex through the vertex shader very quickly.

Vertices

Vertices represent points in space. A set of vertices properly arranged represent a model. Models might look like cubes, buildings, cats, or even people. The Cartesian coordinate graph perhaps explains the concept of vertices best.

Coordinate Systems

The following diagram includes a two dimensional cartesian coordinate graph which illustrates the concept of vertices. The graph should look familiar to readers who've studied algebra. (0,0) specifies X and Y coordinates at the origin of the graph. Vertices are located at points (-1,+1), (+1,+1), (-1,-1) and (+1,-1). The shape which overlays the graph might represent a square.

Cartesian Coordinate Graph

The following diagram includes a three dimensional cartesian coordinate graph which illustrates the concept of vertices in 3D systems. The axes are labeled X+, Y+, Z+, and Z-. All three axes cross at coordinate (0,0,0) which is the origin of the graph. The shape which overlays the graph might represent a cube. Imagine vertices at each corner of the following cube illustration.

3D Cartesian Coordinate Graph

Vertex Shader

Vertex shaders process a set of vertices for each drawing operation. Vertex shaders are written in C with OpenGL ES built in functions. Each run of the vertex shader processes one vertex with specified attributes. If a model contains three vertices then the vertex shader runs three times. The example vertex shader's attribute named a_position contains values for X, Y, and Z coordinates.

The final position of a vertex is assigned to the built in variable gl_Position. The sample vertex shader multiplies three values before assigning the output to gl_Position. The series of multiplications preceding gl_Position modify the location of the vertex. If a set of vertices representing a 3D model run through the vertex shader, and every vertex position is modified, then the appearance of the entire model changes. The model might rotate, scale, or move.

The attribute named a_tex_coord0 represents texture coordinates to apply for the particular vertex in process. The fragment shader receives v_tex_coord0 after the GPU interpolates data. The following listing demonstrates a simple vertex shader.

attribute vec4 a_position;   
attribute vec2 a_tex_coord0;
varying vec2 v_tex_coord0;
           
uniform mat4 um4_matrix;
uniform mat4 um4_pmatrix; 
           
void main(void) {

 gl_Position = um4_pmatrix * 
  um4_matrix * 
  a_position; 
   
 v_tex_coord0 = a_tex_coord0;      
}

Fragment Shader

The fragment shader processes just one fragment for display to the canvas. The fragment shader prepares color for rendering.

In this tutorial's example shaders, both the vertex and fragment shader declare varying v_tex_coord0. The vertex shader assigns a value to v_tex_coord0. The GPU interpolates or modifies v_tex_coord0 before sending it on to the fragment shader.

The varying represents a texture coordinate. The fragment shader samples a texture at the location specified by v_tex_coord0. The method texture2D() returns a portion of the texture specified by u_sampler0 at the coordinates specified by varying v_tex_coord0. The following listing demonstrates assigning a sampled texture to the built in variable gl_FragColor. The color represented by vector gl_FragColor eventually displays to the Web page's canvas.

gl_FragColor = texture2D(
 u_sampler0, 
 v_tex_coord0
);

The value assigned to gl_FragColor displays on the canvas. The following listing includes the entire fragment shader.

precision mediump float;
uniform sampler2D u_sampler0;
varying vec2 v_tex_coord0;

void main(void) {
gl_FragColor = texture2D(
 u_sampler0, 
 v_tex_coord0
); 
}

Summary

This short tutorial described the basic purpose and features of WebGL. This article gave an overview of WebGL, vertices, and shaders. This lesson included 2D and 3D Cartesian coordinate graphs and two sample shaders which work together. This tutorial explained how points on a graph relate to vertices which run through the shaders.

Read free WebGL Tutorials. Enjoy viewing the Creative 3D Web Collection rendered with WebGL and other software applications. Have fun and love learning!

See WebGL Examples!

WebGL Scenes: Responsive Web Design Screen Shots
Copyright © 2015 Seven Thunder Software. All Rights Reserved.